7.3、事例

7.3.1、离下课还有多少时间

 <P id="app">
        10:10:10
    </P>
    <script>
        function handleTime(value){
            if(value<10){
                return "0"+value;
            }
            return ""+value;
        }
    function showTime(){
        var app = document.getElementById("app")
        var endTime = "2020-12-01 16:50:00";
        /* 1.获取结束时间的毫秒 */
        endTime = new Date(endTime).getTime();
        /* 2.获取当前时间的毫秒 */
        var nowTime = new Date().getTime();
        /* 3.获取他们之间的差 */
        var gapTime = endTime - nowTime;
        /* 4.将他们的差转换为时分秒 */
        var seconds = Math.floor(gapTime/1000);
        var hours = handleTime(Math.floor(seconds/3600));
        seconds = seconds%3600;
        var minutes = handleTime(Math.floor(seconds/60));
        seconds = handleTime(seconds%60);
        var sum = hours+":"+minutes+":"+seconds;
        app.innerHTML = sum;
        setTimeout(function(){
            showTime()
        },1000)
    }
       showTime();
    </script>

 <P id="app">
        10:10:10
    </P>
    <script>
        function handleTime(value){
            if(value<10){
                return "0"+value;
            }
            return ""+value;
        }
    function showTime(){
        var app = document.getElementById("app")
        var endTime = "2020-12-01 16:50:00";
        /* 1.获取结束时间的毫秒 */
        endTime = new Date(endTime).getTime();
        /* 2.获取当前时间的毫秒 */
        var nowTime = new Date().getTime();
        /* 3.获取他们之间的差 */
        var gapTime = endTime - nowTime;
        /* 4.将他们的差转换为时分秒 */
        var seconds = Math.floor(gapTime/1000);
        var hours = handleTime(Math.floor(seconds/3600));
        seconds = seconds%3600;
        var minutes = handleTime(Math.floor(seconds/60));
        seconds = handleTime(seconds%60);
        var sum = hours+":"+minutes+":"+seconds;
        app.innerHTML = sum;
    }
        showTime();
        setInterval(function(){
            showTime()
        },1000)
    </script>

7.3.2、动态时钟

 <div id="app">
        <img scr="images/0.png" alt="">
        <img scr="images/0.png" alt="">
        <span>:</span>
        <img scr="images/0.png" alt="">
        <img scr="images/0.png" alt="">
        <span>:</span>
        <img scr="images/0.png" alt="">
        <img scr="images/0.png" alt="">
    </div>
    <script>
         function handleTime(value){
            if(value<10){
                return "0"+value;
            }
            return ""+value;
        }
     function showTime(){
        var imgs = document.querySelectorAll("#app img");
        var d = new Date();
        var hours = handleTime(d.getHours());
        var minutes = handleTime(d.getMinutes());
        var seconds = handleTime(d.getSeconds());
        var sum = hours+minutes+seconds;
        for(var i=0;i<imgs.length;i++){
            imgs[i].src = "images/"+sum[i]+".png";
        }
        setTimeout(function(){
            showTime()
        },1000)
    }
    showTime()
    </script>

/