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----------数码闹钟的主要内容，如果未能解决你的问题，请参考以下文章