这篇文章主要讲解了“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如何实现动态网页时钟这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
