Using JS timer to move elements

Use JS timer to make an element to make a method with moving effect. The implementation idea is: first declare a variable to store the distance of the element from the left side, then declare a variable to store the distance the element needs to move each time, and then give this method a completion time. It should be noted that if the obtained value is not numeric data, it needs to be converted, otherwise it cannot be judged. Then determine that after the element moves to a certain position, give it a negative step value and the element will move back.

You can also think about how to achieve the turning effect when the element moves to the left or right side.

<!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;
    /* Here you can introduce a background image as the target of movement, */
    /* background: url(img/paobu_huaban.png) 0 0/100% 100%; */
   }
  </style>
 </head>
 <body>
  <button type="button" id="Button">Click me to move</button>
  <div id="box" style="left: 0px;"></div>
  
  <script type="text/javascript">
   var Button = document.getElementById("Button");
   var box = document.getElementById("box");
   //How many pixels to move each time, step represents the step length var step = 5;
   Button.onclick = function(){
    
    var timer = setInterval(function(){
     
     //Get the left value of the box and convert it into an integer. It must be converted into a numerical value before performing calculations.
     // parseInt means converting the obtained string into character type var o_left = parseInt(box.style.left);
     //If you want the element to move faster, you can increase the distance of each move or reduce the completion time. //But reducing the completion time will have a better effect. var n_left = o_left+step; //Move right 10px each time
     box.style.left = n_left+"px";
     if ( n_left>500) { //If the moving distance is greater than 400px, run back step = -5;
     }else if(n_left==0){
      step = 5;
     }; 
    },100);
   };
   
  </script>
 </body>
</html>

The results are as follows:

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: