js實現的元素運動程式碼例項

antzone發表於2017-03-22
JS

本章節分享一個能夠實現元素直線運動的程式碼例項，程式碼非常的簡單，僅供參考之用，希望能夠對初學者帶來一定的參考。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css"> 
*{
  margin:0px;
  padding:0px;
}
#run{ 
  border:5px red solid ; 
  display:inline-block; 
  width:40px; 
  height:20px; 
  font-size:20px; 
  text-align:center; 
} 
</style> 
<script type="text/javascript"> 
var timer=null; 
var maR=0;
var flag=0;
 
function moveright(){ 
  run.style.marginLeft=maR+"px"; 
  maR=maR+1; 
} 
 
function moveleft(){ 
  run.style.marginLeft=maR+"px"; 
  maR=maR-1; 
} 
 
function go(){ 
  start.disabled=true;
  pause.disabled=false;
  run.innerHTML=parseInt(run.innerHTML)+1; 
  timer=setTimeout(go,10); 
  if(flag==1){ 
    setTimeout(moveleft,10); 
  } 
  if(flag==0){ 
    setTimeout(moveright,10); 
  } 
  if(maR>(window.outerWidth-60)){ 
    flag=1; 
  } 
  if(maR<0){ 
    flag=0; 
  } 
} 
 
function stop(){ 
  start.disabled=false; 
  pause.disabled=true; 
  clearTimeout(timer); 
} 
 
window.onload=function(){
  var start=document.getElementById("start"); 
  var pause=document.getElementById("pause");
  start.onclick=function(){
    go();
  }
  pause.onclick=function(){
    stop()
  }
}
</script> 
</head> 
<body> 
<button id="start">開始運動</button> 
<button id="pause" disabled>暫停運動</button> 
<br/> 
<span id="run">0</span> 
</body> 
</html>

以上程式碼實現了簡單的執行效果，下面對實現原理做一下簡單介紹。

一.實現原理:

原理其實非常的簡單，當點按鈕的時候，就會執行註冊的事件處理函式，此函式可以利用定時器函式遞迴執行並動態設定元素的外邊距，這樣就實現了運動效果，至於運動具有折返的功能，就是通過判斷外邊距和是否小於0和大於介面的寬度。

二.相關閱讀:

1.動態設定外邊距可以參閱javascript style一章節。 

2.parseInt()函式可以參閱javascript parseInt()一章節。

3.setTimeout()函式可以參閱setTimeout()方法一章節。

4.outerWidth屬性可以參閱outerwidth一章節。

5.clearTimeout()函式可以參閱clearTimeout()方法一章節。   

相關文章