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

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

数电实验数字电子钟设计基于quartus 实现计时校时闹钟秒表稍复杂音频分享电路图设计以及工程文件

PHP轻闹钟如何检查我的时间是不是等于设定的时间？

基于Electron的Windows桌面闹钟小程序

用单片机设计一个时钟，可显示时和分，可以调时间，也要有闹钟功能，要有设计的电路图

基于Electron的Windows桌面闹钟小程序