JSFiddle - React, Tailwind, and code Playground
by sprugman
HTML
Interval:
<select id="speed">
<option value=0>0</option>
<option value=10>10</option>
<option value=20>20</option>
<option value=50>50</option>
<option value=100 selected>100</option>
<option value=200>200</option>
<option value=500>500</option>
<option value=1000>1000</option>
</select>
<div id="box"></div>
CSS
#box {
height: 40px;
width: 40px;
position: absolute;
background: red;
left: 0;
}
JavaScript
var $box = $('#box');
var $speed = $('#speed');
var interval;
var setupInterval = function() {
var speed = $speed.val();
if (interval) clearInterval(interval);
interval = setInterval(function() {
var l = $box.offset().left;
if (l === 0) l = 50;
else l = 0;
$box.css('left', l + 'px');
}, speed);
};
$speed.change(setupInterval);
setupInterval();