网页时钟(JavaScript如何实现动态网页时钟)

发布时间:2025-12-11 02:28:33 浏览次数:1

设计思路:

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

2.通过GETDATE()获得本地时间保存在变量数值指明MyTime中;

3. getHours()返回的是24进制即0~23的整数,getMinutes()方法返回一个处于0到59之间的整数,getSeconds()方法返回一个处于0到59之间的整数;

4.通过的setTimeout()每隔1秒调用一次显示()函数改变图像对象的SRC属性。

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

代码如下:

<html><head><title>时钟</title><metacharset="utf-8"><style>*{padding:0;margin:0;}</style><script>functionshow(){varimages=newArray("./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");varmyTime=newDate();varhours=myTime.getHours();varminutes=myTime.getMinutes();varseconds=myTime.getSeconds();if(hours<=9){hours="0"+hours;}//补足两位if(minutes<=9){minutes="0"+minutes;}if(seconds<=9){seconds="0"+seconds}vartheString=""+hours+minutes+seconds;//转换为字符串document.getElementById("img0").src=images[theString.charAt(0)];document.getElementById("img1").src=images[theString.charAt(1)];document.getElementById("img2").src=images[theString.charAt(2)];document.getElementById("img3").src=images[theString.charAt(3)];document.getElementById("img4").src=images[theString.charAt(4)];document.getElementById("img5").src=images[theString.charAt(5)];setTimeout("show()",1000);}</script></head><bodyonLoad="show()"><imgid="img0"/><imgid="img1"/>时<imgid="img2"/><imgid="img3"/>分<imgid="img4"/><imgid="img5"/></body></html>

感谢各位的阅读,以上就是“JavaScript如何实现动态网页时钟”的内容了,经过本文的学习后,相信大家对JavaScript如何实现动态网页时钟这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是本站,小编将为大家推送更多相关知识点的文章,欢迎关注!

网页时钟
需要做网站?需要网络推广?欢迎咨询客户经理 13272073477