JSFiddle - React, Tailwind, and code Playground

by kimiliini

HTML

Array.length: <input type="text" id="arw1" />
Demanded length:<input type="text" id="arw2" />
<hr />
<label for="fps" id="fpsl">FPS</label>
<input id="fps_r" type="range" min="1" max="1000" value="300" />
<input id="fps_n" type="number" min="1" max="1000" value="300" />
<input id="fps_v" type="readonly" value="0" />
<input id="loop" type="checkbox" checked />
<label for="loop">Loop</label>

CSS

#arw1, #arw2 {
    width: 50px;
    text-align: right;
    padding: 0 3px;
}
#fps_r {
    width: 200px;
}
#fps_n, #fps_v {
    width: 90px;
    text-align: right;
    padding: 0 3px;
}
input {
    vertical-align: middle;
}
label, checkbox, input[type=range], input[type=checkbox] {
    cursor: pointer;
}

JavaScript

var fps_r = document.getElementById('fps_r'),
    fps_n = document.getElementById('fps_n'),
    fps_v = document.getElementById('fps_v'),
    arw1 = document.getElementById('arw1'),
    arw2 = document.getElementById('arw2'),
    loop = document.getElementById('loop'),
    doLoop = loop.checked^0,
    tt_loop = -1,
    fps = +fps_r.value,
    lastt = +new Date()
;

function arrMany(w, show) {
    var a = new Array(w);
    if (show) {
        arw1.value = a.length;
        arw2.value = w;
    }
}

function tick() {
    var now = +new Date();
    fps_v.value = (1000 / (now - lastt)).toFixed(2);
    lastt = now;
    arrMany(3);
    arrMany(4);
    arrMany(5);
    arrMany(10, true);
}
function setLoop() {
    clearInterval(tt_loop);
    if (doLoop) {
        tt_loop = setInterval(tick, 1000 / fps);
    }
}
loop.addEventListener('change', function() {
    doLoop = this.checked^0;
    setLoop();
});
fps_r.addEventListener('input', function() {
    fps = +this.value;
    fps_n.value = +this.value;
    setLoop();
});
fps_n.addEventListener('input', function() {
    fps = +this.value;
    fps_r.value = +this.value;
    setLoop();
});
/* Fix Chrome bug: */
fps_r.addEventListener('change', function() {
    fps = +this.value;
    fps_n.value = +this.value;
    setLoop();
});
fps_n.addEventListener('change', function() {
    fps = +this.value;
    fps_r.value = +this.value;
    setLoop();
});
setLoop();