定时器、倒计时和定时器制作时钟

定时器作用

1、制作动画

2、异步操作

3、函数缓冲与节流

定时器：

setTimeout  只执行一次的定时器

clearTimeout 关闭只执行一次的定时器

setInterval  反复执行的定时器

clearInterval 关闭反复执行的定时器

语法

var time1 = setTimeout(myalert,2000);

var time2 = setInterval(myalert,2000);

/*

clearTimeout(time1);

clearInterval(time2);

*/

function myalert(){

    alert('ok!');

}

倒计时

    var oDiv = document.getElementById('div1');

    functiontimeLeft(){

    //实际开发中此时间从服务器获取，避免客户端调整时间

        var now = newDate();

        var future = newDate(2018,5,20,16,30,20);

        // alert(future - now);//弹出与当前时间相差的毫秒数：12469935436

        var milli = parseInt((future-now)/1000);

        //活动当天页面下线，避免倒计时到点后继续计负时

            // if(milli <= 0){

            //  //页面跳转，不执行下面的代码了

            //window.location.href = "http://www.baidu.com";

            // }

        var day = parseInt(milli/86400);

        var hour = parseInt(milli%86400/3600);

        var minute = parseInt(((milli%86400)%3600)/60);

        var second = milli%60;

        oDiv.innerHTML = '距离2018年11月12日00时00分00秒还有'+day+'天'+toDouble(hour)+'时'+toDouble(minute)+'分'+toDouble(second)+'秒';

    }

    timeLeft();

    setInterval(timeLeft,1000);

}

functiontoDouble(num){

    if( num < 10){

        return '0' + num;

    }else{

        return num;

    }

}

定时器制作时钟

.....

.