利用JS定時器實現(xiàn)元素移動

更新時間：2021年05月18日 10:50:12 作者：客官不愛喝酒

這篇文章主要為大家詳細介紹了利用JS定時器實現(xiàn)元素移動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

利用JS定時器做一個元素做一個有移動效果的方法，實現(xiàn)思路：首先聲明一個變量存放元素距離左側的邊距，然后我們在聲明一個變量存放每次元素需要移動的距離，然后再給這個方法一個完成時間就可以了。需要注意的是獲取到的值如果不是數(shù)值型的數(shù)據(jù)需要裝換，否則不能進行判斷。再判斷一下該元素移動到某個位置之后，步長給它一個負值，該元素就會往回跑了。

大家還可以想一想元素移動到左右側的時候如何實現(xiàn)轉身效果。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   *{margin: 0;padding: 0;}
   body{position: relative;}
   #box{
    width: 120px;height: 120px;background: green;
    position: absolute;top: 100px;
    /* 此處可以引入一個背景圖作為移動的目標, */
    /* background: url(img/paobu_huaban.png) 0 0/100% 100%; */
   }
  </style>
 </head>
 <body>
  <button type="button" id="Button">點我移動</button>
  <div id="box" style="left: 0px;"></div>
  
  <script type="text/javascript">
   var Button = document.getElementById("Button");
   var box = document.getElementById("box");
   // 每次移動多少像素，step表示步長
   var step = 5;
   Button.onclick = function(){
    
    var timer = setInterval(function(){
     
     //獲取box的left值,轉成整數(shù)，一定要轉化為數(shù)值行在做運算，
     // parseInt表示將獲取到的字符串轉化為字符型
     var o_left = parseInt(box.style.left);
     //想要元素走的更快可以改變加大每次移動的距離或者是減少完成時間也可以     
    //但是減少完成時間這樣的效果要好一點
     var n_left = o_left+step; //每次向右移動10px
     box.style.left = n_left+"px";
     if ( n_left>500) { //如果移動的距離大于400px就往回跑
      step = -5;
     }else if(n_left==0){
      step = 5;
     }; 
    },100);
   };
   
  </script>
 </body>
</html>

運行結果如下：