JS make a creative digital clock

A digital clock produced by Creative js code

Creative digital clock to realize the effect of the JS code is as follows: a digital cartoon images to replace the conventional real-time digital display of the current Beijing. Specific examples of the effect of:

The core focus:

Getting to Know (1) Date of method

(2) Construction of the model, from the specific to the general.

<!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>

// number of digital double determination and is converted to a string. Function very clever application of the implicit type conversion of 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>

Ideas:

// Current time: 18: 18:30

str='181730'

When // need to get the current time + minutes + seconds

// Set picture address the relationship between the index value corresponding str

Case picture

JS make a creative digital clock

Guess you like