javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > js动态网页时钟

JavaScript实现动态网页时钟

作者:Cairo960918

这篇文章主要介绍了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文