setInterval定时器设定开关
今天简单写一个小案例:点击按钮,让div“走”起来。主要是为了说明给定时器设定开关时需要注意的几个问题。需求是:当点击按钮,让div向右一直移动,当移动到500像素时,停下来。好了那么简单的布局代码看一下:
css代码 <style> #box{width:50px;height:50px;background:#ff6b0e;position: absolute;top:50px;left:50px;} </style> html代码 <body> <input id="btn" type="button" value="按钮"/> <div id="box"></div> </body>
那么简单的js效果是这样的:
<script> //兼容不同浏览器获取行间样式 function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; } window.onload=function(){ var aBtn=document.getElementById("btn"); var oBox=document.getElementById("box"); var timer=null; aBtn.onclick=function(){ clearInterval(timer);//这里先要清除一下定时器是为了防止一直点击按钮,div一直加速 //开启定时器,假定让其等于500的时候,停止下来 timer=setInterval(function(){ var speed=parseInt(getStyle(oBox,"left"))+18; if( speed > 500){//所以这里一定要让其要大于500的时候等于500,这样的话在给div赋值 speed = 500 } oBox.style.left= speed +"px"; //这里不能是大于500,否则有可能结果是508停下了,就不是要求的500 if( speed == 500){ clearInterval(timer) } },50) }; }; </script>
这里需要注意的几个问题是:
第一,就是获取div的样式一定要用到getStyle,而它存在一定兼容性,其解决方案上面案例有写到,这是通用的简单写法;
第二,就是若是让div在等于一定值的情况下停下来的话,一定要想清楚它移动的单位长度能否被这个值除尽,若不能,那么就要先判断当其大于这个值的时候要它先等于设定的这个值,然后再去赋值,给加条件让其停止。
好了,上面的例子备注也很清楚了,当然这只是一个很简单的小例子,若遇到类似的问题,一定要想到这些细节!希望对大家有帮助!今天就到这里!