简单说说定时器

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