新西兰服务器

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 成本,提升运维效率,使您更专注于核心业务创新。

[图文来源于网络,不代表本站立场,如有侵权,请联系高防服务器网删除]
[