用js制作数码时钟
实现效果
实现效果
图片素材
图片素材
原理分析
- 用
setInterval（fn, 1000）来循环刷新图片。 - 用
date对象的getHours()、getMinutes()、getSeconds()方法来获取当前的时、分、秒，并且拼接成字符串。 - 通过字符串的处理来改变
<img>的src，从而达到改变图片显示的目的。
代码
1 <body style="background:black; color: white; font-size:50px; padding: 50px 80px; "> 2 <img src="images/0.png" /> 3 <img src="images/0.png" /> 4 : 5 <img src="images/0.png" /> 6 <img src="images/0.png" /> 7 : 8 <img src="images/0.png" /> 9 <img src="images/0.png" /> 10 </body> 11 window.onload = function () { 12 //获取img元素数组 13 aImg = document.getElementsByTagName('img'); 14 15 function tick(){ 16 var oDate = new Date(); 17 18 // 获取当前的时分秒拼接成长度为6的字符串 19 var str = toDou(oDate.getHours()) + 20 toDou(oDate.getMinutes()) + 21 toDou(oDate.getSeconds()); 22 23 // 遍历所有img，更新src 24 for(var i = 0; i < aImg.length; i++){ 25 // 第i张图片的src对应str的第i为 26 aImg[i].src = "images/" + str.charAt(i) + ".png"; 27 } 28 } 29 30 // 设置定时器 31 setInterval(tick, 1000); 32 33 // 初始化 34 tick() 35 } 36 37 // 为了保证str的长度是6，用toDou()来为一位数补0 38 function toDou(num) { 39 return num < 10 ? "0" + num : "" + num; 40 }
分析总结
-
更新
src的整体思路是通过长度为6 的字符串str和长度为6的aImg数组对象一一对应，而获取的时分秒有可能是一位数，所以用toDou(num)来补位。 -
toDou (num)中用的是三元运算符，简化了代码。1 //用if esle 2 function toDou(num){ 3 if(n<10){ 4 return "0"+num; 5 }else{ 6 return ""+num; 7 } 8 } 9 //用三元运算符 10 function toDou(num) { 11 return num < 10 ? "0" + num : "" + num; 12 }
-
由于setIteval(fn, 1000)的执行顺序是先延迟，再执行函数，所以在最后单独调用一下tick()，来防止刷新页面后的第一秒显示的是00：00：00。
-
还有一点，复习下
String对象的charAt()方法：charAt(index)方法可返回指定位置的字符（长度为1的字符串），如果index不在0和str.length之间将返回一个空字符串。
