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>

思路：

//当前时间：18：18：30

str='181730'

//需要获取当前时间的时+分+秒

//图片地址设置与对应的str索引值的关系

案例图片

JS制作一个创意数字时钟

猜你喜欢