function moveDiv(div, fps) { var left = 0; var param = 1; function loop () { update(); draw(); } function update() { left += param * 2; if (left > 300) { left = 300; param = -1; } else if (left < 0) { left = 0; param = 1; } } function draw() { div.style.left = left + "px"; } setInterval(loop, 1000 / fps); } moveDiv(document.getElementById("div1"), 60); moveDiv(document.getElementById("div2"), 30); moveDiv(document.getElementById("div3"), 10);
<div class="title">60 fps:</div> <div class="div green" id="div1"></div> <div class="title">30 fps:</div> <div class="div red" id="div2"></div> <div class="title">10 fps:</div> <div class="div blue" id="div3"></div>
.div { width: 30px; height: 20px; position: relative; } .green { background-color: green; } .red { background-color: red; } .blue { background-color: blue; }