嗨,我是编程和网络编程的新手,此代码假设将日期和时间显示为我选择的图片,并随着时间和日期的变化而相应更改,代码可以在 IE 中正确显示图像,但不能在 FireFox 上正确显示Chrome或任何其他浏览器,在其他浏览器上显示图片但不遵循编码的样式规则是我的代码有问题还是我错过了其他东西
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
image{
posyion: fixed;
width: 120px;
max-width: 100%;
height:300px;
max-height:100%;
overflow: visible;
margin: auto;
padding: 0;
}
</style>
<script>
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
var yyyy = today.getFullYear();
var mm = today.getMonth() + 1;
var dd = today.getDate();
h = checkTime(h);
m = checkTime(m);
s = checkTime(s);
mm = ( mm < 10 ) ? ( "0" + ( mm ).toString() ) : ( mm
).toString();
dd = ( dd < 10 ) ? ( "0" + ( dd ).toString() ) : ( dd
).toString()
var string = h + ":" + m + ":" + s ;
var string1 = dd + "-" + mm + "-" + yyyy;
var img = stringToImage(string);
var img2 = stringToImage(string1);
document.getElementById('timetxt').innerHTML = img;
document.getElementById('timetxt2').innerHTML = img2;
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {
i = "0" + i
}
return i;
}
function stringToImage(s) {
var temp = ""
for (var i = 0; i < s.length; i++) {
temp = temp + "<img src='" + img[s[i]] + "'/>"
}
return temp
}
var img = {
"1": "images/one.jpg",
"2": "images/two.png",
"3": "images/three.jpg",
"4": "images/four.jpg",
"5": "images/five.jpg",
"6": "images/six.png",
"7": "images/seven.jpg",
"8": "images/eight.png",
"9": "images/nine.jpg",
"0": "images/zero.gif",
":": "images/Colon.jpg",
"-": "images/line.jpg"
}
</script>
</head>
<body onload="startTime()">
<div id="container" align = "center">
<div id="timetxt" class = "image" align = "center"></div>
<div id="timetxt2" class = "image" align = "center"></div>
</div>
</body>
</html>
所有图片都显示在所有浏览器上,但仅在 IE 上应用样式参数,因此图片的宽度应为 180px,高度为 300px,因此在 IE 上,浏览器应用这些规则,但其他浏览器似乎不应用这些规则仅在代码的样式部分发生,其他一切都按计划运行