前提条件:图片素材要如下
用DOM做时间钟
<body>
<div>
<img src="img/0.png" alt="">
<img src="img/0.png" alt="">
<img src="img/second1.png" alt="">
<img src="img/0.png" alt="">
<img src="img/0.png" alt="">
<img src="img/second1.png" alt="">
<img src="img/0.png" alt="">
<img src="img/0.png" alt="">
</div>
<script>
//调取函数
showTime();
//计时器 每隔一秒执行showTime函数一次
setInterval(showTime,1000);
function showTime(){
//获取文档流中所有的img标签
var img=document.getElementsByTagName('img');
//获取当前时间日期
var date=new Date();
//在当前时间中获取小时
var hour=date.getHours();
//在当前时间中获取分钟
var minute=date.getMinutes();
//在当前时间中获取秒
var second=date.getSeconds();
//补零
if(hour<10){
hour='0'+hour;
}else if(minute<10){
minute='0'+minute;
}else if(second<10){
second='0'+second;
}
//第一张图片位置的路径
img[0].src='img/'+parseInt(hour/10)+'.png';
//第二张图片位置的路径
img[1].src='img/'+hour%10+'.png';
//第四张图片位置的路径
img[3].src='img/'+parseInt(minute/10)+'.png';
//第五张图片位置的路径
img[4].src='img/'+minute%10+'.png';
//第七张图片位置的路径
img[6].src='img/'+parseInt(second/10)+'.png';
//第八张图片位置的路径
img[7].src='img/'+second%10+'.png';
}
</script>
结果显示

注意它是动的不是静止