设计思路：
数码时钟即通过图片数字来显示当前时间，需要显示的图片的url根据时间变化而变化。
a、获取当前时间date()并将当前时间信息转换为一个6位的字符串;
b、根据时间字符串每个位置对应的数字来更改图片的src的值，从而实现更换显示图片;
构建html基础并添加样式。
<div id="div1"> <img src='./数字时钟（1）_files/0.jpg'> <img src='./数字时钟（1）_files/0.jpg'> : <img src='./数字时钟（1）_files/0.jpg'> <img src='./数字时钟（1）_files/0.jpg'> : <img src='./数字时钟（1）_files/0.jpg'> <img src='./数字时钟（1）_files/0.jpg'></div>
style样式
#p1{ width:50%; margin:300px auto; background:black; }
获取图片元素以及当前时间：
var op=document.getelementbyid('p1'); var aimg=op.getelementsbytagname('img'); var odate=new date(); var str=odate.gethours()+odate.getminutes()+odate.getseconds();
这里出现两个问题
1、odate.gethours()返回的都是数字，这样编写为数字相加，而非字符串相加。
2、当获取的值为一位数时，会造成字符串的个数少于6，不满足初始设计要求。
解决以上两个问题的代码解决方案：
var op=document.getelementbyid('p1');var aimg=op.getelementsbytagname('img');var odate=new date();function twodigitsstr(){if(n<10){return '0'+n;}else{return ''+n;}}var str=twodigitsstr(odate.gethours())+twodigitsstr(odate.getminutes())+twodigitsstr(odate.getseconds());
设置所有图片的src值：
for(var i=0;i<aimg.length;i++) { aimg[i].src="./数字时钟（1）_files/"+str.charat(i)+".jpg"; }
通过setinterval()来实现每隔1秒进行重新获取当前时间以及图片src值：
var op=document.getelementbyid('p1'); var aimg=op.getelementsbytagname('img'); setinterval(function tick() { var odate=new date(); var str=twodigitsstr(odate.gethours())+twodigitsstr(odate.getminutes())+twodigitsstr(odate.getseconds()); for(var i=0;i<aimg.length;i++) { aimg[i].src="./数字时钟（1）_files/"+str.charat(i)+".jpg"; } } ,1000);
但是还是有一个问题，网页在打开的初始阶段，显示时间为00：00：00，这是因为定时器有个特性，当定时器被打开后，不会立刻执行里面的函数，而是在1秒后执行。解决代码：
var op=document.getelementbyid('p1');var aimg=op.getelementsbytagname('img');function tick(){var odate=new date(); var str=twodigitsstr(odate.gethours())+twodigitsstr(odate.getminutes())+twodigitsstr(odate.getseconds()); for(var i=0;i<aimg.length;i++) { aimg[i].src="./数字时钟（1）_files/"+str.charat(i)+".jpg"; } } setinterval(tick,1000); tick();
问题：代码setinterval(tick,1000);中函数tick没有带括号，那么js中函数带括号与不带括号有什么区别？
完整的数码时钟制作js代码为：
function twodigitsstr(n) { if(n<10) {return '0'+n;} else {return ''+n;} }window.onload=function(){ var op=document.getelementbyid('p1'); var aimg=op.getelementsbytagname('img'); function tick() {var odate=new date(); var str=twodigitsstr(odate.gethours())+twodigitsstr(odate.getminutes())+twodigitsstr(odate.getseconds()); for(var i=0;i<aimg.length;i++) { aimg[i].src="./数字时钟（1）_files/"+str.charat(i)+".jpg"; } } setinterval(tick,1000); tick(); }
当然，如果有好的创意图片，可以将上述数字图片进行替换，生成各种炫目的数码时钟效果。譬如：
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注！
相关推荐：
分享一下js对象常用的扩展
分享nodejs接入微信js-sdk的全过程
以上就是如何使用js实现一个简易数码时钟的详细内容。