如何使用 JavaScript 创建一个移动的 div？

在这篇文章中，我们将学习 使用 JavaScript 创建一个移动的 HTML div 。 div将使用 HTML、CSS 和 JavaScript 从左向右移动。

方法：

1. 我们必须创建一个 HTML div并使用类ball将一些 CSS 添加到div中。
2.  在 CSS 中，我们为 body 添加一些背景颜色，并为div赋予一些高度、宽度和颜色。
3. 现在我们将使用 JavaScript 将margin-left添加到div中。所以它会从左向右移动。
4. 在 JavaScript 中，我们使用 id 名称获取div 。一段时间后，我们将向div添加margin-left 。

HTML 代码：

HTML

  
    
    
    
  
    
      body {
        background-color: aqua;
        display: flex;
        align-items: center;
      }
  
      .ball {
        height: 12rem;
        width: 12rem;
        background-color: white;
        border-radius: 50%;
        margin-top: 20rem;
      }
    
  
  
    
      
    
    
      let ball = document.getElementById("ballID");
  
      var myVar = setInterval(spostaDiv, 90);
      var margin = 0;
  
      let l = window.screen.width;
      let w = 1300;
  
      function spostaDiv() {
        console.log(w);
        if (margin == w) {
          margin = 0 + "px";
        } else {
          ball.style.marginLeft = margin + "px";
        }
        margin += 10;
      }
    
  

输出：