javascript5 定时器功能

定时器功能:

定时器功能是window对象方法，涉及到 定时器和延时器，具体 看代码

 定时器
  timer=setInterval(function (){},300)
 清除定时器：
   clearInterval(time1);
 延时器：
   setTimerout() 延时调用，不马上执行，间隔一段时间，才调用，只调用一次
 清除延时器：clearTimerout()

 <script type="text/javascript">
        window.onload=function () {
            //seInterval()
            //定时调用，可以将一个函数，没个一段被调用一次
            //参数：回调函数，给函数每个一段时间被调用一次
            //每次间隔时间单位毫秒级
            //clearInterval();可以关闭定时器，方法中需要一个定时器的标准

            var num = 1;
           //获取定时器的对象
            var time1 = setInterval(function () {
                count.innerHTML = num++;
                if (num > 100) {
                    clearInterval(time1);
                }
            }, 100);
            //setTimerout() 延时调用，不马上执行，间隔一段时间，才调用，只调用一次
            //clearTimerout()
            var timer=setInterval(function (){
               console.log(num++)
            },10);
        }
    </script>
开启一个定时器前，先关闭一个定时器

定时器功能开发：

1 需求1 图片自动切换功能

​ 1.1 首先定义一个数组，存储图片地址；

​ 1.2 开启一个定时器，进行图片自动切换；循环切换使用到取余运算；

   <script type="text/javascript">
        window.onload=function (){
            var img01=document.getElementById("img01")
            var btn01=document.getElementById("btn01")
            var btn02=document.getElementById("btn02")
              //创建一个数组
             var imgArr = ["img/001.jpg", "img/002.jpg", "img/003.jpg", "img/004.png", "img/005.png", "img/006.jpg"]
            var timer;

            var index=0;
            btn01.onclick=function () {
                //开启一定时器，先清除一个定时器
                clearInterval(timer)

                setInterval(function () {
                    index++;
                    index = index % imgArr.length;
                    img01.src = imgArr[index];
                }, 1000)
            };
            btn02.onclick=function (){
                clearInterval(timer);
            }
        }
    </script>

2 div控制上下移动功能；

2.1开启一个定时器，获取当前位置var oldPostion=parseInt(getStyle(obj,attr));

2.2 计算出移动后的位置 newPostion=oldPostion+speed(移动)

2.3 直接赋值给 对象obj.style[""]=newPosition+"px"

 <script type="text/javascript">
        //获取对象obj的当前样式的函数
        function getStyle(obj,name){
				if (window.getComputedStyle){
					return  getComputedStyle(obj,null)[name]
				}else{
				    //Ie8支持
					return  obj.currentStyle(name)
				}
			}

        function move(obj,attr,speed,target,callback){
             //  参数，传递要执行obj；attr：要执行动画的样式,
             //  移动速度speed;
             //  target:要执行到目标；
             //callback ：回调函数，这个函数最后执行
               var current_left= parseInt(getStyle(obj,attr))
               // 关闭一个定时器，
                if (current_left>target){
                    speed=-speed
                }
                clearInterval(obj.timer)
                //开启定时器，用来执行动画效果
                obj.timer=setInterval(function () {
                    //涉及获取当前样式的函数功能
                    var oldPosition=parseInt(getStyle(obj,attr));
                    var newPosition=oldPosition+speed;
                    if (speed>0&&newPosition>target || speed<0&&newPosition<target){
                        newPosition=target
                        clearInterval(obj.timer);
                        callback();
                    }
                    obj.style[attr] =newPosition+ "px";
                    // console.log(div01.style.left);
                },100);

        }
        window.onload=function (){
            var btn01= document.getElementById('btn01')
            var btn02= document.getElementById('btn02')
            var div01=document.getElementById('div01')
            var div02=document.getElementById('div02')
            // document.onkeydown=function (event){
            //    event=event ||window.event
            //     console.log(event.keyCode);
            //     switch (event.keyCode){
            //        case 37:
            //            move(div01,10,500);
            //            console.log(event.keyCode);
            //            break;
            //
            //
            //        case 39:
            //            move(div01,10,0);
            //            console.log(event.keyCode);
            //            break;
            //     }
            // }
            btn01.onclick=function (){
               // move(div01,"top",10,500);
               move(div01,"left",10,500,function (){

                   move(div02,"width",10,500,function (){
                       move(div02,"height",10,600,function (){
                          move(div02,"top",10,0,function (){
                               alert("执行完毕")
                          })
                       })

                                                        })
               });

            };
             btn02.onclick=function (){
               move(div01,-10,0)
            };

        }

    </script>

3 需求开发 div 用定时器控制速度；使用键盘事件控制方向

<script type="text/javascript">
    window.onload=function (){
        var dir=0;
       var box1= document.getElementById('box1')
           setInterval(function (){

                var speed = 10;
                  switch (dir){
                 case 37:

                     box1.style.left=box1.offsetLeft - speed + "px";
                     break;
                 case 38:

                       box1.style.top=box1.offsetTop - speed + "px";
                       break;

                 case 39:

                      box1.style.left=box1.offsetLeft + speed + "px";
                         break;
                 case 40:
                         box1.style.top=box1.offsetTop + speed + "px";
                      break;
             }

             },30)
        document.onkeydown=function (event){
           //浏览器兼容性问题
             event=event||window.event

             console.log(event.keyCode)
             if (event.ctrlKey){
                 speed=400;

             }
             dir=event.keyCode

           }

    }
</script>