简易图片时钟
思路
1.首先创建一个div,在div中有6个img标签，分别代表时分秒。
2.通过dom操作获取这6个img标签。
3.通过new Date()获取时间，根据时间来修改图片的显示。
4.设置定时器，达到一秒一动的效果
具体操作
创建基本的结构，默认显示00:00:00
<div><!-- 时 --><img src="images/0.png" alt=""><img src="images/0.png" alt="">:<!-- 分 --><img src="images/0.png" alt=""><img src="images/0.png" alt="">:<!-- 秒 --><img src="images/0.png" alt=""><img src="images/0.png" alt=""></div>
获取相关元素
var div=document.querySelector('div');var aImg=div.getElementsByTagName('img')
获取时间(重点)
//因为采用的是24h计时法，所以需要判断当前时间是一位数还是两位数，若为一位数那么就在这个数的前面加一个0,否则维持原样不做修改,这里通过一个函数来实现这个功能。function format(time){//=>接收一个时间作为参数//若为一位数则前面加0，否则不变return (time<10&&Num>0)?'0'+time:time;}//重点:因为经过format处理过的时间会变为字符串类型，所以我们统一对时间进行处理，将他们全部变为字符串类型的数据，后面会使用。var oDate=new Date();var oHo=format(oDate.getHours())+'';var oMi=format(oDate.getMinutes())+'';var oSe=format(oDate.getSeconds())+'';
修改图片(重点)
//为了修改图片我们使用一个很重要的概念，charAt(),//举个例子 var str='abc';//str.charAt(0); //a //str.charAt(1); //b//str.charAt(2); //c //也就是说，我们可以通过这种方法获取到字符串每一位上的内容//那么我们就需要对之前获取到的时间进行一个处理，将他们合并起来var aDate=oHo+oMi+oSe; //之后我们就可以通过遍历img，获得相应下标，通过下标获取到时间对应的数字根据这个数字修改图片for(var i=0;i<aImg.length;i++){aImg[i].src='images/'+aDate.charAt(i)+'.png'}
设置定时器（此处不赘述，请看完整代码）
完整代码(对相关代码进行了封装)
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body><div><!-- 时 --><img src="images/0.png" alt=""><img src="images/0.png" alt="">:<!-- 分 --><img src="images/0.png" alt=""><img src="images/0.png" alt="">:<!-- 秒 --><img src="images/0.png" alt=""><img src="images/0.png" alt=""></div><script>timeMove();function timeMove() {var oDate=new Date();var oHo=format(oDate.getHours())+'';var oMi=format(oDate.getMinutes())+'';var oSe=format(oDate.getSeconds())+'';var aDate=oHo+oMi+oSe;var div=document.querySelector('div');var aImg=div.getElementsByTagName('img')for(var i=0;i<aImg.length;i++){aImg[i].src='images/'+aDate.charAt(i)+'.png'}}setInterval(timeMove,1000)function format(time){return (time<10&&time>0)?'0'+time:time;}</script></body></html>
运行结果
图片来源于冒险岛相关素材,下面是网盘,有需要的可以去下载
链接:/s/1ObKBHDVtpQGp_o8DpxnfUQ
提取码:ylul
只是个人的一些想法，希望大家指正交流。
