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

定时器作用

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;

    }

}

定时器制作时钟

<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 = '当前时间是:'+ year + '年'+month+'月'+date+'日 '+toweek(week)+'      

               '+todou(hour)+':'+todou(minute)+':'+todou(second);

            oDiv.innerHTML = str;

              }

                timego();

         setInterval(timego,1000);

        }

      function toweek(n){

        if(n==0)        {

            return '星期日';

        }        else if(n==1)        {

            return '星期一';

        }        else if(n==2)        {

            return '星期二';

        }        else if(n==3)        {

            return '星期三';

        }        else if(n==4)        {

            return '星期四';

        }        else if(n==5)        {

            return '星期五';

        }        else        {

            return '星期六';

        }

    }

    function todou(n){

        if(n<10)        {

            return '0'+n;

        }        else        {

            return n;

        }

    }

</script>

.....

.<divid="div1"></div>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 【未知】首先是一名教师,才得以成为一名青椒。 2017年夏季有幸成为彭水教育的一份子。在这之前,作为一名重...
    彭水081赵陈阅读 1,209评论 0 0
  • 贾乃亮首谈离婚:“感谢她放我一条生路”。 曾经的他,眼里只有家庭。为了博得李小璐的欢心,不断地改变自己,不断地变成...
    94美酱阅读 3,555评论 6 4
  • 临武威汉简!
    莉芙文轩阅读 3,775评论 0 1
  • 去年夏天,她有一头黑黑的长发,爱笑。她有自己喜欢的男生,每天上下学她都会偷偷的跟在那个男生身后。她有很多朋友,...
    她是妖孽阅读 2,744评论 0 0
  • 超微主板机箱跳线接线图 主机面板上面的指示灯,如果不亮的话,可以参考一下图片哦!
    Demon_yang阅读 1,124评论 0 1