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

Posted 1322957664qqcom

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>

 

以上是关于js----------数码闹钟的主要内容,如果未能解决你的问题,请参考以下文章