How to create a moving div using JavaScript?

A mobile div is a web element that can automatically move around the screen or change its position on the screen. Change the position by adjusting the left and top style properties. Creating a mobile div using JavaScript is a relatively simple task. All it takes is a little HTML, CSS, and JavaScript code. In this tutorial, we'll show you how to create a mobile div using JavaScript.

HTML Code

The first thing we need is some HTML code. We will create an id as "MoveDiv". Inside this div we will place some content. This content can be anything from your Want, but for this example, let's just add some text.

<div id="movingDiv"> This is my moving div! </div>

Now that we have the HTML code, we need some CSS code.

CSS Code

The CSS code will make our div actually move. We will set the position of the div to "relatives." This will allow us to move the div using JavaScript. We will also set The width and height of the div.

#movingDiv { position: relative; width: 200px; height: 200px; }

Now that we have the HTML and CSS code, we need some JavaScript code.

JavaScript Code

The JavaScript code will actually make our div move. We will use the setInterval function to move the div every 1000 milliseconds (1 second). We will also use the CSS properties "top" and "left" to move the div.

var interval = setInterval(function() {
   var div = document.getElementById("movingDiv");
   div.style.top = div.offsetTop + 1 + "px";
   div.style.left = div.offsetLeft + 1 + "px"; },
   1000);

Example

This is the complete working code of this example -

   


   <div id="movingDiv"> This is my moving div! </div>
   <script>
      var interval = setInterval(function() {
      var div = document.getElementById("movingDiv");
      div.style.top = div.offsetTop + 1 + "px";
      div.style.left = div.offsetLeft + 1 + "px"; },
      1000);
   </script>

Line by line explanation of the above code -

• Line 1 - We first create an HTML document.

• Line 3 - We create a head element.

• Line 4 - We create a style element. Within this style element we will place our CSS code.

• Line 5 - We create a CSS rule for our div with the id "MoveDiv". We set the location to "relative". We also set the width and height of the div.

• Line 12 − We create a body element. Inside of this body element, we will put our HTML code.

• Line 13 − We create a div with an id of "movingDiv". Inside of this div, we put some text.

• Line 14 − We create a script element. Inside this script element, we will put our JavaScript code.

• Line 15 − We create a variable called "interval". We set this variable to the setInterval function . This function will move our div every 1000 milliseconds (1 second).

• Line 16 − We create a variable called "div". We set this variable to the HTML element with an id of "movingDiv".

• Line 17 − We use the CSS "top " property to move our div down 1 pixel.

• Line 18 − We use the CSS "left" property to move our div to the right 1 pixel.

• Line 22 − We end our HTML document.

In this tutorial, we went over how to create a moving div using JavaScript. We started off By creating some HTML code. Then we created some CSS code. Finally, we created some JavaScript code.

The above is the detailed content of How to create a moving div using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!