使用JS移动div内的div

Question

Im trying to make a "spinner" much like on csgoempire.com, but I'm having some issues (I'm almost totally new to JS and I'm not good at HTML). I have tried a bunch of stuff like making one div for each picture, and having a separate JS function for each, but after some thinking I realised that it wouldn't be efficient at all and it would make it hard to change stuff later. I then decided to make separate divs for each photo, but placing them all in another div which would be moved by the JS function. This would make it a lot more efficient than before, but I can't seem to get it to work, and there are (hopefully) better ways of doing it. Id really appreciate some tips on how I can make it more efficient, and a fix for my current problem :)

Here is the code in all its glory:

 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> 

This was made by just googling around, and testing stuff, so I'm sure its insanely bad and inefficient :P (I dont even know if its possible to do what I want to do this way.. )

The issue is that the spinner won't spin anymore.. It does when I move them separately, but not when they are both inside a div, and I move said div. Is there a way to move multiple divs by only moving one of them? Can you recommend another way of doing this if you know a better way that is more.. dynamic?

The end goal is to fetch each user's image from steam and use those images in the "spinner", make an arrow that points to the middle that will output the username of the person it lands on and have the "spinner" start once a timer reaches 0, but for now I'm just trying to learn, and I figured that the best way to learn is to have a project to work on.. (may have picked a bit of a difficult project though..)

Answer 1

You didn't save the interval so you can stop it:

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

Made a jsFiddle with the solution: https://jsfiddle.net/bfrhw7rf/1/

---

Consider using css to create the spinner, like here: https://projects.lukehaas.me/css-loaders/

Since you are using a very short interval you are using up the single thread that runs your javascript, with css you are not blocking the rest of your code.