首先我们要有几张代表数字的图片，来代表0-9如图：
然后开始实现功能
下面展示完整代码。
<!DOCTYPE html><html><head><meta charset="utf-8"><title>炫酷时钟</title><style>.box{width:500px;height:500px;margin: 0 auto; /*使盒子居中*/text-align: center;/*使盒子内容居中*/}</style> <script>function toDouble(n){//规范时间的格式，都以二位数的形式输出if(n<10){return '0'+n}elsereturn ''+n}window.onload=function(){var aImg=document.getElementsByTagName('img');function getTime(){var str=new Date();var myTime=toDouble(str.getFullYear())+toDouble(str.getMonth()+1)+toDouble(str.getDate())+toDouble(str.getHours())+toDouble(str.getMinutes())+toDouble(str.getSeconds());for(var i=0;i<aImg.length;i++){aImg[i].src='F:/html code/images/'+myTime[i]+'.png';}}getTime();setInterval(getTime,1000); //定时器，每隔1s刷新一次};</script></head><body style="background-color: black;color: white;font-size: 50px;"><div class="box"><h3>今天是：<br></h3><img src="F:\html code\images\0.png"/><img src="F:\html code\images\0.png"/><img src="F:\html code\images\0.png"/><img src="F:\html code\images\0.png"/>年<img src="F:\html code\images\0.png"/><img src="F:\html code\images\0.png"/>月<img src="F:\html code\images\0.png"/><img src="F:\html code\images\0.png"/>日<br><img src="F:\html code\images\0.png"/><img src="F:\html code\images\0.png"/>:<img src="F:\html code\images\0.png"/><img src="F:\html code\images\0.png"/>:<img src="F:\html code\images\0.png"/><img src="F:\html code\images\0.png"/></div></body></html>
