首页 > 代码库 > 简单说说定时器

简单说说定时器

2024-08-16 17:20:13   211人阅读

1.概念

　定时器：间隔一定的时间，执行一些事

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

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

 

2.方法

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

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

 

　　设一个只发生一次的定时器：setTimeout（fn ,t）;

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

　　

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

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

     技术分享

 　　

 
  1 <script>  2 window.onload= 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>
 
简单说说定时器






























        

            
                
                  
                
                

                    联系

                    我们