JS制作一个创意数字时钟

Posted 2022-02-11 f6056

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS制作一个创意数字时钟相关的知识，希望对你有一定的参考价值。

通过js代码制作一个创意数字时钟

通过JS代码实现创意数字时钟效果如下：由数字化的卡通形象图片取代常规的数字显示当前实时北京时间。具体效果示例：

技术图片

核心重点：

(1)Date方法的初步了解

(2)构建模型，从特殊到一般。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>cnblog头部轮播图</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <style>
        #div1 
            width: 100%;
            height: auto;
            font-size: 0px;
            text-align:center;
        

        #div1 img 
            width: 14%;
            max-width:232px;
            height: auto;
            border:2px solid black;   
        
        #div1 .border-left
            border-left:0px;           
        
        #div1 span            
            width: 1%;
            font-size: 16px;  
          
    </style>

</head>

<body>
    <div id="div1">
        <img src="./clock/0.jpg">
        <img  class=‘border-left‘ src="./clock/0.jpg">
        <span>:</span>
        <img src="./clock/0.jpg">
        <img class=‘border-left‘  src="./clock/0.jpg">
        <span>:</span>
        <img src="./clock/0.jpg">
        <img class=‘border-left‘  src="./clock/0.jpg">
    </div>
    <script>

//对数字进行双数判断，并且转换为字符串。函数很巧妙的应用了JS中的隐式类型转换。

        function toDuble(n) 
            if (n < 10) 
                return "0" + n;
             else 
                return ‘‘ + n;
            
        
        window.onload = function () 
            var oDiv = document.getElementById(‘div1‘);
            var aImgs = oDiv.getElementsByTagName(‘img‘);
            function tick() 
                var oDate = new Date();
                var str = toDuble(oDate.getHours()) + toDuble(oDate.getMinutes()) + toDuble(oDate.getSeconds());
                for (var i = 0; i < aImgs.length; i++) 
                    aImgs[i].src = ‘./clock/‘ + str.charAt(i) + ‘.jpg‘;
                
            
            setInterval(tick,1000);
            tick();
        
    </script>

</body>

</html>