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:

Detailed explanation of JavaScript timers
JavaScript Timer Details
JavaScript timer to achieve limited time flash sale function
Several ways to implement 0ms delay timer in js
JavaScript timer to achieve seamless scrolling of pictures
Detailed explanation of the JavaScript timer principle

<<: Analysis and description of network configuration files under Ubuntu system

>>: Implementation code for operating mysql database in golang

Example of using CASE WHEN in MySQL sorting

Using JS timer to move elements

Example of using CASE WHEN in MySQL sorting

Set the input to read-only via disabled and readonly

Introduction to setting up Tomcat to start automatically on Linux system

What you need to understand about MySQL locks

vue+elementui implements the complete code of adding and modifying a shared bullet box

Detailed explanation of MySQL Truncate usage

Analysis of several situations where MySQL index fails

Analyze how to automatically generate Vue component documentation

MySQL 5.7.13 installation and configuration method graphic tutorial (win10 64 bit)

MySQL 5.7.20 installation and configuration method graphic tutorial (win10)

Recommend

How to use html css to control div or table to be fixed in a specified position

How to use Vue3 to achieve a magnifying glass effect example

mysql 5.7.18 winx64 password change

JavaScript implements Tab bar switching effects

Detailed explanation of Nginx's rewrite module

MySQL 8.0.15 winx64 installation and configuration method graphic tutorial

Vue3 gets the current routing address

vmware installation error VMware Workstation failed to start VMware Authorization Service

WeChat applet implementation anchor positioning function example

Listen directive example analysis in nginx

Basic knowledge of MySQL learning notes

HTML small tag usage tips

Vue realizes the palace grid rotation lottery

Example of how to automatically start an application service in a Docker container

A simple way to implement Vue's drag screenshot function