JavaScript 定时器 setTimeout、setInterval

定时器在javascript中的作用

1、制作动画 2、异步操作 3、函数缓冲与节流

定时器类型及语法

示例代码如下：

代码语言：javascript复制

/*
    定时器：
    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、定时器制作移动动画

代码语言：javascript复制

<!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、定时器制作时钟

代码语言：javascript复制

<!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、定时器制作倒计时

代码语言：javascript复制

<!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�400/3600);
                var min = parseInt(lefts�400600/60);
                var sec = lefts`;
                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>

javascript 定时器动画异步语法

0 人点赞