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获取每个用户的图像并在“spinner”中使用这些图像，制作一个指向中间的箭头，该箭头将输出它所登陆的人的用户名并让“spinner”启动一旦计时器达到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则不会阻止其余的代码。

使用JS

1 个答案: