127-130 定时器的简介，切换图片练习，修改div移动练习，延时调用

定时器的简介

setInterval()

定时调用，可以将一个函数，每隔一段时间执行一次

参数：

回调函数，该函数会每隔一段时间被调用一次

每次调用间隔的时间，单位是毫秒

返回值：返回一个Number类型的数据，这个数字用来作为定时器的唯一标识。

clearInterval()

此方法需要一个定时器标识作为参数，这样来关闭对应的定时器

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时器简介</title>
    <script>
        window.onload = function () {
            var count = document.getElementById("count");
            var num = 1;
            var timer = setInterval(function () {
                count.innerHTML = num++;
                if (num == 11) {
                    clearInterval(timer)
                }
            }, 1000)
        };
    </script>
</head>
<body>
<h1 id="count"></h1>
</body>
</html>

切换图片练习

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时器练习</title>
    <script>
        window.onload =function (){
            //获取img1标签以便修改它的src属性，来达到换图片的效果
            var img1 =document.getElementById("img1");
            //将图片封装到数组里，方便我们切换图片
            var imgArr =["./img/1.jpg","./img/2.jpg","./img/3.jpg","./img/4.jpg","./img/5.jpg"];
            //数组下标索引
            var index =0;
            //定义定时器的标识，以便关闭定时器，
            // 如果你不在这里定义，而在按钮1中定义的话，按钮二范围内，它看不到这个标识
            var timer;
            //为butt1绑定单击响应函数
            var butt1 =document.getElementById("butt1");
            butt1.onclick =function (){
                /**
                 * 目前，我们每点一次按钮，就会开启一个定时器
                 * 点击多次就会开启多个定时器，这就导致图片切换的速度过快
                 * 并且我们只能关闭最后一次定时器
                 */
                //在开启定时器之前，需要将当前元素上的其他定时器关闭
                clearInterval(timer);
                //开启一个定时器来自动切换图片
                timer =setInterval(function (){
                    index++;
                    index =index%imgArr.length;//判断所以是否超过最大索引，将其置为0
                    //修改img1的src属性，达到切换效果
                    img1.src =imgArr[index];
                },1000);
            };

            var butt2 =document.getElementById("butt2");
            //为bttu2绑定一个单击响应函数
            butt2.onclick =function (){
                /*
                clearInterval()可以接受任意参数
                如果参数是一个有效的定时器的标识，则关闭该定时器
                如果参数不是一个有效的标识，则什么也不做，也不会报错
                 */
                clearInterval(timer);
            }
        }


    </script>
</head>
<body>
<img src="./img/1.jpg" alt="图片" id="img1">
<br/><br/>
<button id="butt1">开始</button>
<button id="butt2">暂停</button>
</body>
</html>

修改div移动练习

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>键盘移动div改进</title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: red;
            border: solid;
            position: absolute;
        }
    </style>
    <script>
        window.onload = function () {
            var speed =10;
            var dir =0;
            //开启一个定时器来控制它移动的速度，不管它的方向，让onkeydown来只控制方向
           setInterval(function (){
               switch (dir) {
                   case 37:
                       box.style.left = box.offsetLeft - speed + "px";
                       break;
                   case 38:
                       box.style.top = box.offsetTop - speed + "px";
                       break;
                   case 39:
                       box.style.left = box.offsetLeft + speed + "px";
                       break;
                   case 40:
                       box.style.top = box.offsetTop + speed + "px";
                       break;
               }
           },30)
            var box = document.getElementById("box");
            document.onkeydown = function (event) {
                event = event || window.event;
                var speed = 10;

                if (event.ctrlKey) {
                    speed = 50;
                }
                dir =event.keyCode;
            };
            document.onkeyup =function (){
                dir =0;
                speed =10;
            }
        };
    </script>
</head>
<body>
<div id="box"></div>
</body>
</html>

延时调用

延迟调用：setTimeout()

延迟调用一个函数不马上执行，而是隔一段时间后再执行，而且只会执行一次

延迟调用和定时调用的区别：

延迟调用只会执行一次，而定时调用会执行多次
延迟调用和定时调用实际上可以互相代替，在开发中可以根据自己的需求去选择

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>延迟调用</title>
    <script>
        window.onload =function (){
          var num =1;
          var timer =setTimeout(function (){
              console.log(num++);
          },5000)
            //使用clearTimeout来关闭一个延迟调用，因为这里关闭了，使用1不会出来
            clearTimeout(timer);
        };
    </script>
</head>
<body>
</body>
</html>