定时器

定时器在JavaScript中的作用

制作动画
异步操作
函数缓冲与节流

定时器类型及语法

setTimeout(函数名或匿名函数,延迟时间(单位ms)) ：只执行一次的定时器
clearTimeout(定时器名)：关闭只执行一次的定时器
setInterval(函数名或匿名函数,延迟时间(单位ms))：反复执行的定时器
clearInterval(定时器名)：关闭反复执行的定时器
注：不需要写单位

练习

制作反复移动动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移动动画</title>
    <style>
        div{
            position: fixed;
            width: 200px;
            height: 200px;
            background-color: chocolate;
            top: 100px;
            left: 0;
        }
    </style>
    <script>
        window.onload = function(){
            var sBox = document.getElementById('box');
            var box_left = sBox.style.left;
            var left_num = 0;
            var speed = 50;
            //只执行一次向左移动
            // var Once_move = setTimeout(function(){
            //     sBox.style.left = '200px';
            // },1000);
        //     clearTimeout(Once_move);//放在Once_move后面，Once_move不执行，放在前面则仍会执行。
        // }
            var More_move = setInterval(function(){
                left_num+= speed;
                sBox.style.left = left_num + 'px';
                if(left_num>1336){
                    speed = -50;
                }
                else if(left_num<0){
                    speed = 50;
                }
            },200);
            // clearInterval(More_move);//放在More_move后面，More_move不执行，放在前面则仍会执行。
        }
    </script>
</head>
<body>
    <div id="box"></div>
</body>
</html>

最终盒子左右往返运动
注： // clearTimeout(Once_move);//放在Once_move后面，Once_move不执行，放在前面则仍会执行。 // clearInterval(More_move);//放在More_move后面，More_move不执行，放在前面则仍会执行。

定时器制作图片无缝往返滚动播放

实现的功能有：
1. 图片的无缝循环播放。
2. 鼠标移上图片，会在当前位置停下。移开后会在当前位置开始与之前一样的方向播放图片。
3. 左右有向左向右箭头，点击后分别想对应的方向循环播放图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_3233091_vbj8k8jhtk.css">
    <style>
        .clearfix::after{
            content: "";
            display: block;
            clear: both;
        }

        h1{
            text-align: center;
            color: pink;
        }


        #box{
            position: fixed;
            overflow: hidden;
            width: 400px;
            height: 500px;
            box-sizing: content-box;
            border: 20px solid pink;
            border-radius: 5px;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }

        .iconfont{
            color: pink;
            font-size: 50px;
            font-weight: bold;
        }

        .icon-xiangyou1{
            position: fixed;
            top: 350px;
            right: 490px;

        }

        .icon-xiangzuo1{
            position: fixed;
            top: 350px;
            left: 490px;
        }

        #container{
            position: absolute;
            width: 3200px;
        }

        img{
            float: left;
            width: 400px;
        }
    </style>
    <script>
        window.onload = function(){
            var sContainer = document.getElementById('container');
            var sLeft_move = document.getElementById('left_move');
            var sRight_move = document.getElementById('right_move');
            var left_num = 0;
            var preSpeed = 0;
            var Speed = 1;
            sContainer.innerHTML = sContainer.innerHTML + sContainer.innerHTML;
            var img_move = setInterval(function(){
                left_num -= Speed;
                if(left_num < -1600){
                    left_num = 0;
                }

                else if(left_num>0){
                    left_num = -1600;
                }
                sContainer.style.left = left_num + 'px';
            },15)
            sLeft_move.onclick = function(){
                Speed = 1;
            }

            sRight_move.onclick = function(){
                Speed = -1;
            }

            sContainer.onmouseover =function(){
                preSpeed = Speed;
                Speed = 0;
            }

            sContainer.onmouseout =function(){
                Speed = preSpeed;
            }

            // clearInterval(img_move);
        }
    </script>
</head>
<body>
    <h1>最美女神jisoo</h1>
    <i class="iconfont icon-xiangzuo1" id="left_move"></i>
    <div id="box">
        <div id="container" class="clearfix">
            <img src="./img/img1.jpg" alt="">
            <img src="./img/img2.jpg" alt="">
            <img src="./img/img3.jpg" alt="">
            <img src="./img/img4.jpg" alt="">
        </div>
    </div>
    <i class="iconfont icon-xiangyou1" id="right_move"></i>
</body>
</html>

效果图：
在这里插入图片描述
注：这是gif图实际效果更顺滑。

关键在于图片内容的整体复制sContainer.innerHTML = sContainer.innerHTML + sContainer.innerHTML;，然后再拉回if(left_num == -1600){ left_num = 0; }；这才实现了无缝滚动。

总结：
1.Speed的设置非常关键，为了不同事件的触发。
2. 使用onmousemove和onmouseleave事件无法实现移开后，继续播放，仍有疑问，不懂原理。

定时器制作时钟

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时钟</title>
    <script>
        window.onload = function(){
            var sTime = document.getElementById('time');
            function timeGo(){
                // 获取当前时间
                var now_time = new Date();
                // 获取年
                var year = now_time.getFullYear();
                // 获取月份
                var Month = now_time.getMonth()+1;
                //获取日子
                var day = now_time.getDate();
                //获取星期
                var Weeeks = now_time.getDay();
                //获取时
                var Hours = now_time.getHours();
                //获取分
                var Minutes = now_time.getMinutes();
                //获取秒
                var Seconds = now_time.getSeconds();
                
                // var sTr = '当前时间是'+ year + '年' + Month + '月' + day + '日' + 
                // '星期' + Weeeks_change(Weeeks) + Hours + '时' + Minutes + '分' + Seconds + '秒';
                var sTr = '当前时间是'+ year + '年' + Month + '月' + day + '日' + 
                '星期' + Weeeks_change(Weeeks) + one_two(Hours) + ':' + one_two(Minutes) + ':' + one_two(Seconds);

                sTime.innerHTML = sTr;
            }

            function Weeeks_change(Weeeks){
                switch(Weeeks){
                    case 1:
                        return '一';
                    case 2:
                        return '二';
                    case 3:
                        return '三';
                    case 4:
                        return '四';
                    case 5:
                        return '五';
                    case 6:
                        return '六';
                    case 7:
                        return '天';
                }
            }

            function one_two(a){
                if(a<10){
                    return '0' + a;
                }
                return a;
            }

            timeGo();
            setInterval(timeGo,1000);

        }

    </script>
    <style>
        #time{
            color: lightcoral;
            font-size: 30px;
            font-weight: bold;
            text-align: center;
            margin-top: 300px;
        }
    </style>
</head>
<body>
    <div id="time">
    </div>
</body>
</html>

效果图：
在这里插入图片描述
注：时间会实时更新

总结：
1. new Date（）获取的时间时国际显示，因此需要清洗数据。
2. getMonth和getDay方法是0开始计算的，即：0~11 和 0~6。且getDay里的0代表星期天。
3. 执行定时器时会有一个空白期，因此要提前执行一次，来填补空白期。

定时器制作倒计时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>倒计时</title>
    <style>
        #countdown{
            color: lightcoral;
            font-size: 30px;
            font-weight: bold;
            text-align: center;
            margin-top: 300px;
        }
    </style>
    <script>
        window.onload = function(){
            var sCountTime = document.getElementById('countdown');
            function CountDown_Go(){
                //获取现在时间
                var now_time = new Date();
                // 设置未来时间
                var future_time = new Date(2022,4,1,0,0,0);
                //计算所需时间,单位s
                var Count = parseInt((future_time-now_time)/1000);
                //计算多少天
                var Days = parseInt(Count/86400);
                //计算多少小时
                var Hours = parseInt(Count%86400/3600);
                //计算多少分钟
                var Minutes = parseInt(Count%86400%3600/60);
                //计算还有多少秒
                var Seconds = parseInt(Count%86400%3600%60);

                var sTr = '距离五一小长假还有' + Days + '天' + Hours + '小时' + 
                one_two(Minutes) + '分' + one_two(Seconds) + '秒';
                
                sCountTime.innerHTML = sTr;
            }
            CountDown_Go();//提前执行一次，将定时器的空白期填上；
            setInterval(CountDown_Go,1000);
            function one_two(a){
                if(a<10){
                    return '0' + a;
                }
                return a;
            }
        }
        
    </script>
</head>
<body>
    <div id="countdown">

    </div>
</body>
</html>

效果图：
在这里插入图片描述

弹框

要求：

倒计时关闭弹框。
其中的倒计时通过多次执行的定时器来完成。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #tanchu{
            width: 350px;
            height: 450px;
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            margin: auto;
            text-align: center;
            border: 3px solid salmon;
            border-radius: 4px;
            display: none;
            background-color: #fff;
        }

        #tanchu p{
            color: red;
        }

        #muceng{
            position: fixed;
            background-color: black;
            opacity: 0.4;
            width:100%;
            height: 100%;
            display: none;
                }
    </style>
    <script>
        window.onload = function(){
            var sHaif_transparent = document.getElementById('muceng');
            var sPop_up = document.getElementById('tanchu');
            var iNum = document.getElementById('num');
            var i=5;
            setTimeout(function(){
                sHaif_transparent.style.display = 'block';
                sPop_up.style.display = 'block';
            },1000);

            var countdown_num = setInterval(function(){
                iNum.innerHTML = i;
                i--;
                if(i<0){
                    sHaif_transparent.style.display = 'none';
                    sPop_up.style.display = 'none';
                    clearInterval(countdown_num);
                }

            },1000);

        }
    </script>
</head>
<body>
    <div class="container">
        <div id="muceng"></div>
        <p>这是内容1</p>
        <p>这是内容2</p>
        <p>这是内容3</p>
        <p>这是内容4</p>
        <p>这是内容5</p>
        <div id="tanchu">
            <h1>这是个弹框</h1>
            <p>还有 <span id="num"></span>s弹窗关闭</p>
        </div>
    </div>
</body>
</html>