js----------数码闹钟

效果图：

程序代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <style>
 </style>
    <script>

window.onload=function () {
    function toDouble(num) {
        if (num<10){
            return '0'+num;
        }
        else {
            return ''+num;
        }
    }
    var oBtn=document.getElementById('btn');

    var  Img=document.getElementsByTagName('img');
    function update() {
     var oDate=new Date();
     var str=toDouble(oDate.getHours())+toDouble(oDate.getMinutes())+toDouble(oDate.getSeconds());

     for (i=0;i<Img.length;i++){
         Img[i].src='../IMG/'+str.charAt(i)+'.png';
     }
    }
    setInterval(update, 1000);//并非你开了这个定时器以后，就直接执行，而是需要先过1000毫秒，下面一行代码解决
    //先开启定时器以后手动的执行函数，就可以解决这个问题；
    update();
}
    </script>
</head>
<body style="background: #990099;color: #ffff00;font-size: 50px">

<img src="../IMG/0.png" alt="">
<img src="../IMG/0.png" alt="">
点
<img src="../IMG/0.png" alt="">
<img src="../IMG/0.png" alt="">
分
<img src="../IMG/0.png" alt="">
<img src="../IMG/0.png" alt="">
秒
</body>
</html>

 

posted @ 2019-08-04 12:08  半夏琉璃空人心  阅读(217)  评论(0)  编辑  收藏  举报