简单说说定时器

1.概念

 定时器:间隔一定的时间,执行一些事

   比如,半个小时 就要喝杯水;看一个小时书就要玩会手机......

 应用:每间隔30毫秒向左移动10像素,重复不断,形成滑动的效果

 

2.方法

  设一个定时器:setInterval( fn , t );  // fn:执行的函数 ;t 间隔时间(单位:毫秒)

  清除定时器:clearInterval( timer )  //要清楚的定时器名称

 

  设一个只发生一次的定时器:setTimeout(fn ,t);

  清除只发生一次的定时器:clearTimeout(timer);

  

3.定时器的应用小实例:

  实现功能:如下图所示,点击相应按钮能够使div能够做相应的滑动效果。

     

   

 
 

 

  1 <script>
  2 window.οnlοad= function ()
  3      //找到各种元素 
  4 
  5      var toTop = document.getElementById('btn1');
  6 
  7     var toBottom= document.getElementById('btn2'); 
  8 
  9     var toLeft= document.getElementById('btn3');
 10 
 11     var toRigth= document.getElementById('btn4');
 12 
 13     var toCircle= document.getElementById('btn5');
 14     
 15        var oDiv= document.getElementById('div1');
 16 
 17        
 18 
 19  
 20 
 21     toBottom.onclick =function (){
 22       doMove(oDiv,'top',19,500);
 23     }
 24     toTop .onclick =function (){ 
 25       doMove(oDiv,'top', -19,40);
 26     }
 27     toRigth.onclick =function (){ 
 28       doMove(oDiv,'left', -19,10);
 29     }
 30     toLeft.onclick =function (){ 
 31       doMove(oDiv,'left', 19,800);
 32     }
 33 
 34     toCircle.onclick = function(){
 35 
 36       doMove(oDiv,'left',19,800,function(){    //回调函数,执行doMove后让其做另外的事情
 37 
 38         doMove(oDiv,'top',19,500, function(){
 39 
 40           doMove(oDiv,'left', -19,10 function(){
 41 
 42             doMove(oDiv,'top', -19,40);
 44           });
 46         });
 48       });
 50     };
 51 
 52  
 53 
 54      //封装一个odMove函数,令函数能够通过传参,实现像各个方向滑动的功能
 55 
 56     function doMove(obj,attr,dir,target,endFn){//boj:执行对象;attr:方向;dir:移动单位;atrget:移动终点位置
 57 
 58       clearInterval(obj.timer);      //先清除定时器,避免重复设置
 59 
 60       obj.timer = setInterval (function( ){    //设置一个定时器
 61 
 62       var speed= parseInt(getStyle(obj,attr)) + dir;  //设置步长
 63 
 64       if(speed >target&&dir>0 || speed<target&&dir<0){    
 65 
 66         speed = target;                  //当运动到大于或小于终点位置的值时,令其等于终点值
 67 
 68       }
 69 
 70       obj.style[attr]= speed +'px';
 71 
 72       if(speed == target){
 73 
 74         clearInterval(obj.timer);
 76       }
 77 
 78       endFn&&endFn();  //如果传入了一个函数,则执行,没有,则不执行  
 79 
 80       } , 30)      
 82     }
 83 
 84  
 85 
 86  
 87 
 88     //封装一个getStyle函数,用于获取当前对象的样式(位置)
 89 
 90     function getStyle(obj , attr){
 91 
 92       if(obj.currentStyle){
 93 
 94         return obj.currentStyle[attr];    //IE 6 7 8
 95 
 96       }else{
 97 
 98         return getComputedStyle(obj)[attr];  //标准浏览器
 99 
100       }
101 
102     //还可以表示为 return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];;
103 
104     }
105 
106  
107 
108 };
109 </script>

 

转载于:https://www.cnblogs.com/shoulder11/p/5962274.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值