纯Js网页时钟

最新推荐文章于 2023-04-17 13:30:40 发布

上官绝岚

最新推荐文章于 2023-04-17 13:30:40 发布

阅读量340

点赞数 1

CC 4.0 BY-SA版权

文章标签： js javascript html

本文链接：https://blog.youkuaiyun.com/Boxzhang/article/details/105855949

效果图

源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页时钟</title>
    <style>
        img{
            width: 50px;
            height: 50px;
        }
    </style>
    
</head>
<body>
<img src="img/1.png" name="a"><img src="img/1.png" name="a"><img src="img/-1.png" >
<img src="img/2.png" name="a"><img src="img/1.png" name="a"><img src="img/-1.png">
<img src="img/1.png" name="a"><img src="img/9.png" name="a">
</body>
<script>

   function addDouble(x) {
       /*
       * 
       * 传入时间,如果是1位,则要变成两位  (2点 就是02点)
       * */
       return x>=10?x+"":"0"+x;
   }
window.onload=function(){
            function timeStart() {
                 var date=new Date();
                 var arr=document.getElementsByName("a");
                 var hour=date.getHours();
                 var minute=date.getMinutes();
                 var ss=date.getSeconds();
                 
                 var str=add0(hour)+""+add0(minute)+""+add0(ss);
                 /*
                 * 把时间10点29分36秒拼接成字符串102936  
                 * 截取字符1 替换1.png
                 * 截取字符0 替换0.png
                 * 截取字符2 替换2.png 以此类推
                 * */
                 for (var i=0;i<arr.length;i++)
                     arr[i].src="img/"+str.charAt(i)+".png";

                                 }

                 setInterval(timeStart,1000);
                 timeStart();//刷新页面时,立即调用timeStart()方法一次。如果不加这一行,会延迟一秒加载图片
                         }


</script>
</html>