setInterval定時器設定開關
阿新 • • 發佈：2017-12-20
box 方案 pan speed style current 給定 dst interval
今天簡單寫一個小案例：點擊按鈕，讓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"); varoBox=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在等於一定值的情況下停下來的話，一定要想清楚它移動的單位長度能否被這個值除盡，若不能，那麽就要先判斷當其大於這個值的時候要它先等於設定的這個值，然後再去賦值，給加條件讓其停止。
好了，上面的例子備註也很清楚了，當然這只是一個很簡單的小例子，若遇到類似的問題，一定要想到這些細節！希望對大家有幫助！今天就到這裏！
setInterval定時器設定開關