function moveDivTimeBased(div, fps) { var left = 0; var current = +new Date; var previous = +new Date; var param = 1; function loop() { var current = +new Date; var dt = current - previous; previous = current; update(dt); draw() } function update(dt) { left += param * (dt * 0.12); 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); } moveDivTimeBased(document.getElementById("div4"), 60); moveDivTimeBased(document.getElementById("div5"), 30); moveDivTimeBased(document.getElementById("div6"), 10);
<div class="title">60 fps:</div> <div class="div green" id="div4"></div> <div class="title">30 fps:</div> <div class="div red" id="div5"></div> <div class="title">10 fps:</div> <div class="div blue" id="div6"></div>
.div { width: 30px; height: 20px; position: relative; } .green { background-color: green; } .red { background-color: red; } .blue { background-color: blue; }