位置：首页-资讯-后端开发

JavaScript如何实现动态网页时钟

2023-07-02 11:42

短信预约 -IT技能 免费直播动态提醒

这篇文章主要讲解了“JavaScript如何实现动态网页时钟”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“JavaScript如何实现动态网页时钟”吧！

设计思路：

1先建立一个数组保存带有0〜9数字的10张图片;

通过GETDATE（）获得本地时间保存在变量数值指明MyTime中;

getHours（）返回的是24进制即0~23的整数，getMinutes（）方法返回一个处于0到59之间的整数，getSeconds（）方法返回一个处于0到59之间的整数;

通过的setTimeout（）每隔1秒调用一次显示（）函数改变图像对象的class="lazy" data-src属性。

串对象的的charAt（ID）方法：返回指定位置处的字符，标识为要寻找的字符的位置的索引整数，0对应左边第1个字符，1对应左边第2个字符，如喂的的charAt（1 ）则是è;

代码如下：

<html><head><title>时钟</title><meta charset="utf-8"><style>*{    padding:0;    margin:0;    }</style><script>function show(){    var images=new Array("./images/s0.png","./images/s1.png","./images/s2.png","./images/s3.png","./images/s4.png","./images/s5.png","./images/s6.png","./images/s7.png","./images/s8.png","./images/s9.png");    var myTime=new Date();    var hours=myTime.getHours();    var minutes=myTime.getMinutes();    var seconds=myTime.getSeconds();    if(hours<=9){hours="0"+hours;}//补足两位    if(minutes<=9){minutes="0"+minutes;}    if(seconds<=9){seconds="0"+seconds}    var theString=""+hours+minutes+seconds;//转换为字符串    document.getElementById("img0").class="lazy" data-src=images[theString.charAt(0)];    document.getElementById("img1").class="lazy" data-src=images[theString.charAt(1)];    document.getElementById("img2").class="lazy" data-src=images[theString.charAt(2)];    document.getElementById("img3").class="lazy" data-src=images[theString.charAt(3)];    document.getElementById("img4").class="lazy" data-src=images[theString.charAt(4)];    document.getElementById("img5").class="lazy" data-src=images[theString.charAt(5)];    setTimeout("show()",1000);    }</script></head><body onLoad="show()"><img id="img0" /><img id="img1" />时<img id="img2" /><img id="img3" />分<img id="img4" /><img id="img5" /></body></html>

JavaScript如何实现动态网页时钟