JavaScript IV (timer case, clock and countdown)

Posted by summoner on Tue, 31 Dec 2019 08:22:42 +0100

This article is mainly about timers, because timers are very important. We use them in many places.

12: Timer setting
13: Type conversion
14: closure
15: Built in objects
16: Object oriented

Directory twelve

Timer setting

The function of timer in javascript

1: Animating
2: Asynchronous operation
3: Function buffering and throttling

Timer type and syntax
/*
    Timer:
    setTimeout  Timer that only executes once 
    clearTimeout Turn off once timer
    setInterval  Repeated timer
    clearInterval Turn off the repeatedly executed timer
*/

var time1 = setTimeout(myalert,2000);
var time2 = setInterval(myalert,2000);
/*
clearTimeout(time1);
clearInterval(time2);
*/
function myalert(){
    alert('ok!');
}

Timer making clock

<script type="text/javascript">
    window.onload = function(){    
        var oDiv = document.getElementById('div1');
        function timego(){
            var now = new Date();
            var year = now.getFullYear();
            var month = now.getMonth()+1;
            var date = now.getDate();
            var week = now.getDay();
            var hour = now.getHours();
            var minute = now.getMinutes();
            var second = now.getSeconds();
            var str = 'The current time is:'+ year + 'year'+month+'month'+date+'day '+toweek(week)+' '+todou(hour)+':'+todou(minute)+':'+todou(second);
            oDiv.innerHTML = str;
        }
        timego();
        setInterval(timego,1000);
    }

    function toweek(n){
        if(n==0)
        {
            return 'Sunday';
        }
        else if(n==1)
        {
            return 'Monday';
        }
        else if(n==2)
        {
            return 'Tuesday';
        }
        else if(n==3)
        {
            return 'Wednesday';
        }
        else if(n==4)
        {
            return 'Thursday';
        }
        else if(n==5)
        {
            return 'Friday';
        }
        else
        {
            return 'Saturday';
        }
    }


    function todou(n){
        if(n<10)
        {
            return '0'+n;
        }
        else
        {
            return n;
        }
    }
</script>
......
<div id="div1"></div>

The renderings are as follows

Timer making countdown

<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
        function timeleft(){
            var now = new Date();
            var future = new Date(2016,8,12,24,0,0);
            var lefts = parseInt((future-now)/1000);
            var day = parseInt(lefts/86400);
            var hour = parseInt(lefts%86400/3600);
            var min = parseInt(lefts%86400%3600/60);
            var sec = lefts%60;
            str = '24:00 PM, September 12, 2016'+day+'day'+hour+'Time'+min+'branch'+sec+'second';
            oDiv.innerHTML = str; 
        }
        timeleft();
        setInterval(timeleft,1000);        
    }

</script>
......
<div id="div1"></div>

The renderings are as follows

Topics: Javascript