<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>数码时钟</title>
<style type="text/css">
img{
width:100px
}
</style>
<script type="text/javascript">
function toDouble(num){
if(num < 10){
return "0" + num;
}else{
return "" + num; //从数字变为字符串。
}
} //当小时数 、分钟数 、秒数都是个位数时，比如3点4分2秒。这时候字符串只有的长度只有3，就不能每位数字对应一个图片，所以需要将个位数字补成两位，就是说把3:4:2改为03:04:02。
window.onload = function(){
var aImg = document.getElementsByTagName(‘img‘);
var i = 0;
function upTime(){
var date = new Date();
var str = toDouble(date.getHours()) + toDouble(date.getMinutes()) + toDouble(date.getSeconds());
for(i = 0;i < aImg.length;i++){
aImg[i].src = "img/" + str.charAt(i) + ".png"; //charAt()：获取字符串指定位置的字符。
}
}
setInterval(upTime,1000); //当每次刷新压面的时候就会发先所有的图片都回先变成0；因为这个时候upTime还没有执行。
upTime(); //在开启定时器之后先调用一次函数就解决了问题。
}
</script>
</head>
<body style="color:red;font-size:40px;background:#222;">
<img src="img/0.png"/>
<img src="img/0.png"/>
点
<img src="img/0.png"/>
<img src="img/0.png"/>
分
<img src="img/0.png"/>
<img src="img/0.png"/>
秒
</body>
</html>
照几张0 - 9的数字照片试试吧！
时间： 2024-11-08 14:27:56