JavaScript如何实现动态网页时钟
JavaScript如何实现动态网页时钟
发布时间：2022-06-21 15:59:45 来源：高防服务器网 阅读：62 作者：iii 栏目：开发技术
这篇文章主要讲解了“JavaScript如何实现动态网页时钟”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“JavaScript如何实现动态网页时钟”吧！
设计思路：
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> <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").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> <body onLoad="show()"> <img id="img0" /><img id="img1" />时<img id="img2" /><img id="img3" />分<img id="img4" /><img id="img5" /> </body> </html>
感谢各位的阅读，以上就是“JavaScript如何实现动态网页时钟”的内容了，经过本文的学习后，相信大家对JavaScript如何实现动态网页时钟这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是高防服务器网，小编将为大家推送更多相关知识点的文章，欢迎关注！
[微信提示：高防服务器能助您降低 IT 成本，提升运维效率，使您更专注于核心业务创新。
[图文来源于网络，不代表本站立场，如有侵权，请联系高防服务器网删除]
[