Javascript 为什么我的<；部门>；当我试着移动它时，它开始摇晃？_Javascript_Html

Javascript 为什么我的<；部门>；当我试着移动它时，它开始摇晃？

javascript html

Javascript 为什么我的<；部门>；当我试着移动它时，它开始摇晃？,javascript,html,Javascript,Html,我不熟悉堆栈溢出。我有一个简单的网页，它试图来回移动一个彩色div元素。然而，当我运行它时，div元素开始正常运行，但几秒钟后，它开始疯狂地抖动，好像它的老板拒绝给它工资一样。这是我的密码： HTML: 请帮帮我谢谢您没有清除间隔，因为您没有向它传递变量，因此它没有做任何事情。如果将间隔设置为变量，则可以在切换方向时清除间隔参考：下面是一个例子：（函数（）{ var方向； var x=0； var-box=document.getElementById（“box”）； //设定初

我不熟悉堆栈溢出。我有一个简单的网页，它试图来回移动一个彩色div元素。然而，当我运行它时，div元素开始正常运行，但几秒钟后，它开始疯狂地抖动，好像它的老板拒绝给它工资一样。这是我的密码：

HTML:

请帮帮我

谢谢

您没有清除间隔，因为您没有向它传递变量，因此它没有做任何事情。如果将间隔设置为变量，则可以在切换方向时清除间隔

参考：

下面是一个例子：

（函数（）{
var方向；
var x=0；
var-box=document.getElementById（“box”）；
//设定初始方向
方向=设定间隔（向右移动，5）；
函数moveRight（）{
如果（x>=150）{
净距（方向）；
方向=设定间隔（向左移动，5）；
}否则{
x+=1；
box.style.left=x+“px”；
}
}
函数moveLeft（）{
如果（x）是您的解决方案的一部分，并且看起来很好，您必须提供更多详细信息。您可以只使用CSS
！clearInterval（）；
完全不做任何事情。请阅读关于如何正确使用clearInterval的说明。哇！非常感谢！我从未想到我的错误会如此简单。：D
<!DOCTYPE html>
<html>
    <head>
        <title>Move</title>
    <link rel="stylesheet" href="D:\Web\CSS\CSS.css"/>
    <script src="D:\Web\JS\JS.js">
    </script>
    </head>
    <body>
        <div id="container">
            <div id="box">
            </div>
        </div>
    </body>
</html>

window.onload = function() {

  var x = 0;

  var box = document.getElementById("box");
  setInterval(moveRight, 5);

  function moveRight() {
    if(x >= 150) {
      clearInterval();
      setInterval(moveLeft, 5);
    } else {
      x += 1;
      box.style.left = x + "px";
    }
  }

  function moveLeft() {
    if(x <= 0) {
      clearInterval();
      setInterval(moveRight, 5);
    } else {
      x -= 1;
      box.style.left = x + "px";
    }
  }

}

body {
  background-color: #246;
}

#container {
  width: 200px;
  height: 50px;
  background: #268;
  position: relative;
}

#box {
  width: 50px;
  height: 50px;
  background: #2ac;
  position: absolute;
}