定时器的认识

• 定时器：就是可以不断地自动的重复某一个操作的东西。
• 定时的分类：
  • 1.多次定时器：setInterval（）
  • 2.一次定时器：setTimeout（）
  • 第一个参数：表示执行的操作，一般就是事件指令
  • 第二个参数表示间隔的时间，但是注意这个时间是毫秒 1s = 1000ms；
• 定时器的特点：
  对于一般的变量以及函数当使用完成后，系统会自动回收对应的内存，但是定时器当使用完成后系统不会自动回收对应的内存，所以我们需要手动回收。
• 清空定时器：clearTimeout（）
  因为清空定时器的时候，我们不知道是哪一个，但是一个页面中可能有多个定时器，所以我们一般在设置定时器的时候，给定时器制定名称,清空的时候直接清空对应名称的定时器就可以。

定时器的匀速动画

• 动画原理：就是让实现动画的标签距离某个方向的位置不断地变化，可以通过多次定时器实现不断地变化

  window.onload = function () {
 1.1获取标签
        var btn = document.getElementById('btn');
        var box = document.getElementById('box');
        
        var timer = null;
//        var begin = 0;//用来记录距离左边的间距
//        var target = 800;//用来记录动画的目标值
2.点击按钮
        btn.onclick = function () {
2.3调用下面抽取的匀速动画
            constant(0,40,800);
        }
抽取匀速动画
        function constant(begin,speed,target) {
定时器会叠加，如果我们上次没有清空，当点击按钮的时候，会再次创建一个新的定时器和原来的定时器叠加所以会越来越快，所以我们需要在点击的时候，清空上一次定时器
            clearInterval(timer);
2.1实现动画,使用定时器
            timer = setInterval(function () {
                begin += speed;
2.11判断终止值
                if(begin >= target){
                    clearInterval(timer);
                    begin = target;
                }
2.2设置距离左边的间距
                box.style.left = begin + 'px';
            },10)
        }
    }

定时器的减速动画

 window.onload = function () {
1.获取标签
        var box = document.getElementById('box');
        var btn = document.getElementById('btn');
        var timer = null;
        var begin = 0;//用来记录距离左边的间距
        var target = 800;//用来记录动画的目标值
2.点击按钮
        btn.onclick = function () {
2.1清空定时器
            clearInterval(timer);
            timer = setInterval(function () {
 //ceil：向上取整，如果是1.1，取出来的是2
//计算出速度
                var speed = Math.ceil((target - begin)*0.2);
 //我们的速度需要向上取整
                begin += speed;
                if (begin >= target){
                    clearInterval(timer);
                    begin = target;
                }
2.2设置距离
                box.style.left = begin + 'px';
            },100)
        }
    }

一次定时器执行多次操作

 window.onload  = function () {
        // 就是使用一次定时器执行多次操作
        var timer = null;
        var count = 5;//用来记录秒数
        var box = document.getElementById('box')
        timer = setTimeout(jumpPage,1000);
        //用来执行定时器的操作的函数
        function jumpPage() {
            clearInterval(timer);
            box.innerHTML = '要在'+count+'秒后跳转'
            count --;
            if(count >= 0){
                timer = setInterval(arguments.callee,1000);
                //函数中调用函数自己，叫做递归函数
                //arguments.callee:相当自己本身。

            }else {//小于0,跳转,清空最后一次定时器
                window.location.href = 'http://baidu.com';
                clearInterval(timer);
            }
        }
    }

随机数

• Math.random():可以随机生成一个大于等于0但是需要小于1的数字，不能等于1

使用Js设置值

• 获取box的样式
• 如果直接设置我们获取的是行内样式的值,但是有时候我们需要获取在页内设置的值。
• 在不同的浏览器使用不同的方法获取：
• 如果是ie或者opera：

• 如果是普通的浏览器：

• 综合写法一般是:

function getCssAttr(obj,attr) {
          if(obj.currentStyle){
              return obj.currentStyle[attr];
          }else {
              return window.getComputedStyle(obj,null)[attr];
          }
      }
   如果当我们使用.语法访问不到值,我们可以采用[]来访问.
        alert(getCssAttr(box,'width'));
    }

简单的无限轮播

  window.onload = function () {
        //1.获取标签
        var oul = document.getElementById('oul');
        //2.设置距离左边的间距不断变化，需要时定时器
        var timer = null;
        var begin = 0;//设置距离左边的间距
        timer = setInterval(setLeft,20);
        function  setLeft() {
            begin -= 4;
            if(begin <= -1200){
                begin = 0;
            }
            oul.style.left = begin + 'px';
        }
    }