JavaScript 定时器 setTimeout、setInterval

Devops海洋的渔夫

发布于 2019-05-30 22:01:51

9380

发布于 2019-05-30 22:01:51

文章被收录于专栏：Devops专栏Devops专栏

定时器在javascript中的作用

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!');
}

下面再演示一下，如下：

延迟2秒后，打印一次hello

每个2秒，循环打印hello 。当打印3次，就终止。

练习

1、定时器制作移动动画

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript">
        window.onload = function(){
            var oDiv = document.getElementsByTagName('div')[0];
            // oDiv.style.marginLeft = '50px';

            // 设置定时增加marginLeft的值
            var iLeft = 50;

            if (iLeft > 0 && iLeft < 500) {
                var time1 = setInterval(function(){
                    iLeft += 50;
                    oDiv.style.marginLeft = iLeft + 'px';
                    if ( iLeft >= 500) {
                        clearInterval(time1);
                    }
                },100);
            }
        }
    </script>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            background-color: gold;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

2、定时器制作时钟

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <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);
                // alert(sTr);
                // oDiv.style.backgroundColor = 'gold';
                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>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

3、定时器制作倒计时

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript">
        window.onload = function(){
            var oDiv = document.getElementById('div1');
            function timeleft(){
                var now = new Date();
                var future = new Date(2022,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 = '距离2022年9月12日晚24点还剩下'+day+'天'+hour+'时'+min+'分'+sec+'秒';
                oDiv.innerHTML = str; 
            }
            timeleft();
            setInterval(timeleft,1000);        
        }
            
    </script>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2019.03.27 ，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript