JS制作一个创意数字时钟

时间：2019-06-25 18:31:18 阅读：348 评论：0 收藏：0 [点我收藏+]

标签：imu type blog center size oct 显示函数 seconds

通过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>