Question

我想使代码中的“框”移至右侧，然后返回至左侧。我尝试使用2 setInterval，但是它不起作用（或者也许我不知道如何使用2 setInterval）。

var box = document.getElementById("box");
var pos = 0;
var toRight = setInterval(move, 10);

function move() {
  if (pos >= 150) {
    clearInterval(toRight);
  } else {
    pos++;
    box.style.left = pos + "px";
  }
}

#container {
  width: 200px;
  height: 200px;
  background-color: red;
  position: relative;
}

#box {
  width: 50px;
  height: 50px;
  background-color: blue;
  position: absolute;
}

<div id="container">
  <div id="box"></div>
</div>
<p id="demo"></p>

我尝试了很多方法，但是代码仍然无法运行，有人可以告诉我如何使“框”从右侧移回。谢谢。

Answer 1

您的代码是一个好的开始，@ j08691的注释是正确的选择。

使用1个间隔功能，但要跟踪框的移动方向，并在需要时进行切换。

let box = document.getElementById("box");
let pos = 0, right = true;
setInterval(() => {
  pos += right * 2 - 1;
  if (pos === 0 || pos === 150)
    right = !right;
  box.style.left = pos + "px";
}, 10);

#container {
    width: 200px;
    height: 200px;
    background-color: red;
    position: relative;
}

#box {
    width: 50px;
    height: 50px;
    background-color: blue;
    position: absolute;
}

<div id="container">
    <div id="box"></div>
</div>

Answer 2

您也可以使用css animations并完全跳过javascript部分：

@keyframes move {
  from { left: 0; }
  to { left: calc(100% - 50px); }
}

#container {
  width: 200px;
  height: 200px;
  background-color: red;
  position: relative;
}

#box {
  width: 50px;
  height: 50px;
  background-color: blue;
  position: absolute;
  animation: move 2s linear alternate infinite;
}

<div id="container">
  <div id="box"></div>
</div>
<p id="demo"></p>

如何使用多个setInterval（）？

2 个答案: