定时器

setInterval()

定时调用

      可以将一个函数,每隔一段时间执行一次

      参数

          1. 回调函数,该函数每隔一段时间会被调用

          2. 每次调用间隔时间,单位是毫秒ms

      返回值:

        返回一个Number类型的数据

        返回这个数字作为定时器的唯一标识

clearInterval()取消定时器

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #box,
    #box2 {
      width: 100px;
      height: 100px;
      position: absolute;
    }

    #box {
      background-color: blueviolet;
      top: 100px;
    }

    #box2 {
      background-color: plum;
      top: 300px;
      
    }
  </style>
</head>

<body>
  <button id="btnLeft">向左移动</button>
  <button id="btnRight">向右移动</button>
  <div id="box"></div>
  <div id="box2" style="left: 1000px;"></div>

  <script>
    // 获取按钮和元素
    var box = document.getElementById("box");
    var box2 = document.getElementById("box2");
    var btnLeft = document.getElementById("btnLeft");
    var btnRight = document.getElementById("btnRight");

    // 为按钮绑定事件
    //宽度->高度- >向左
    btnLeft.onclick = function () {
      move(box,"width", 500, 10, function() {
        move(box,"height", 500, 10, function() {
          move(box,"left", 1000, 10, function() {
           alert("完成")
          });
        });
      });
    }

    // 为按钮绑定向右事件
    btnRight.onclick = function () {
      move(box2, "left", 8, 10, function() {
        // alert("wc")
      });
    }


    /* 
    定时器函数移动
      obj: 要执行动画的对象
      attr:要变化的属性
      target: 执行动画目标位置
      speed: 移动速度(右移动正数, 左移动负数)
      callback : 回调函数
     */

    function move(obj, attr, target, speed, callback) {
      //清除之前的定时器
      clearInterval(obj.timer);

      // 获取用户当前位置
      var currentPosition = parseInt(getStyle(obj, attr));
      console.log(currentPosition);
      // 判断速度
      if (currentPosition > target) {
        speed = -speed;
      }
      // 设置定时器
      obj.timer = setInterval(function () {

        //  获取原来位置
        var oldValue = parseInt(getStyle(obj, attr));
        // 设置新位置 
        var newValue = oldValue + speed;
        console.log(speed);
        console.log(newValue);
        // 判断位置
        if ((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
          newValue = target;
        }

        // 设置元素位置
        obj.style[attr] = newValue + "px";
        // 结束,关闭定时器
        if (newValue == target) {
          clearInterval(obj.timer)
          callback();
        }
      }, 30);


    }

    //获取样式简洁版
    function getStyle(obj, attr) {
      return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr];
    }
  </script>
</body>

</html>

setTimeout()

延时调用

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

posted @ 2020-09-22 16:10 CHUNYIN 阅读(104) 评论(0) 收藏举报

刷新页面返回顶部

CHUNYIN

定时器

setInterval()

clearInterval()取消定时器

setTimeout()

公告