javascript - 使用JS移动div内的div

Question

我正在尝试制作一个与 csgoempire.com 非常相似的“微调器”，但我遇到了一些问题(我几乎完全不熟悉 JS，而且我不擅长 HTML)。我已经尝试了很多东西，比如为每张图片制作一个 div，并为每张图片都有一个单独的 JS 函数，但经过一番思考后我意识到它根本没有效率，而且以后很难改变东西。然后我决定为每张照片制作单独的 div，但将它们全部放在另一个 div 中，该 div 将由 JS 函数移动。这将使它比以前更有效率，但我似乎无法让它工作，并且有(希望)更好的方法来做到这一点。我非常感谢有关如何提高效率的一些提示，以及解决我当前问题的方法:)

这里是代码的全部荣耀:

console.log("Connected to server.")



function spin() {
  console.log("Starting Spin.");
  var boxElement = document.getElementById('allBoxes');
  var pos = 900;
  var id = id;
  setInterval(frame, 1);

  function frame() {
    if (pos == 100) {
      clearInterval(id)
    } else {
      pos--;
      boxElement.style.left = pos + 'px';
    }
  }
}

  <div id="allBoxes">

    <div id="box2" style="position:absolute; left:712pt; top:150pt; width:50px; height:50px;"><img src="http://www.theaa.ie/winterhub/wp-content/uploads/2015/12/AA-logo-50x50.png" /></div>
    <div id="box1" style="position:absolute; left:675pt; top:150pt; width:50px; height:50px;"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAALVBMVEXGAA4fHx////98fHz8/Pzy8vItLS1xcXFnZ2eIiIhdXV2PCxQtHR64Aw9XFRmYSViLAAAAnklEQVRIie2UyQ6DMAxEyZAd2v//3JolAuWQdKyqAok5WDn4ZRQvGYZHj0SmqTsivs71PSS7KBEwJUaX24h3sOGMBAvn2y7RAuOBjICNvbcEAKkgckDoV0wuRkGwWH5R5HRGUr/I2FWff4toun9V5G8VY1upGRh+LPnh16wYv8ia70LR/SsilaaZSN71etNIMaKQzYhDViMWESMauZE+q+cGCDwyhBUAAAAASUVORK5CYII="
      /></div>

  </div>



  <button onclick="spin()"> Click Me! </button>

这是通过四处搜索和测试东西制作的，所以我确定它非常糟糕且效率低下:P(我什至不知道是否可以用这种方式做我想做的事..)

问题是微调器不会再旋转了。当我分别移动它们时它会旋转，但当它们都在一个 div 内并且我移动所述 div 时它不会旋转。有没有办法只移动其中一个来移动多个 div？如果您知道更好的方法，更..动态，您能推荐另一种方法吗？

最终目标是从 Steam 中获取每个用户的图像并在“微调器”中使用这些图像，制作一个指向中间的箭头，该箭头将输出它登陆的人的用户名并启动“微调器”一旦计时器达到 0，但现在我只是想学习，我认为最好的学习方法是有一个元素可以继续……(虽然可能选择了一些困难的元素……)

Answer 1

你没有保存间隔所以你可以停止它:

...
var pos = 900;
var id = setInterval(frame, 1);
function frame() {
...

用解决方案制作了一个 jsFiddle:https://jsfiddle.net/bfrhw7rf/1/

---

考虑使用 css 创建微调器，如下所示:https://projects.lukehaas.me/css-loaders/

由于您使用的间隔非常短，因此您用完了运行 javascript 的单个线程，而使用 css 则不会阻塞其余代码。