JSFiddle - React, Tailwind, and code Playground
HTML
<div id="cuenta1"></div>
<div id="cuenta2"></div>
<div id="cuenta3"></div>
<div id="cuenta4"></div>
CSS
div{
margin: 5px;
line-height: 2em;
background-color: #ddd;
width: 50px;
text-align: center;
}
JavaScript
function Range(start, end, step) {
this.start = start
this.end = end
this.step = step || 1
this.length = Math.abs(end-start) + 1
this.val = 0
}
Range.prototype.value = function() {
return (this.start + this.val) % this.length;
}
Range.prototype.next = function() {
this.val = (this.val + this.step) % this.length
if (this.val < 0) this.val += this.length
}
function Sequence(array, index) {
this.array = array
this.index = index || 0
this.length = array.length
}
Sequence.prototype.value = function() {
return this.array[this.index]
}
Sequence.prototype.next = function() {
++this.index;
this.index %= this.length
}
Sequence.prototype.push = function(value) {
this.array.push(value)
++this.length
}
function TimeCounter(list, time) {
this.list = list;
this.time = time;
}
TimeCounter.prototype.iterate = function (index, callback) {
var time = this.time[index] * 1000
var self = this
setTimeout(function() {
callback(self.list.value())
self.list.next()
self.iterate((index + 1) % self.time.length, callback)
}, time)
}
TimeCounter.prototype.start = function (callback) {
if(typeof this.time === "number") {
var self = this;
setInterval(function() {
callback(self.list.value())
self.list.next()
}, this.time * 1000)
} else if("length" in this.time){
this.iterate(0, callback)
}
}
function slice(list, n) {
return Array.prototype.slice.call(list, n);
}
var curry = function(funct) {
if (arguments.length<2) {
return funct;
}
var __method = funct
var args = slice(arguments, 1)
return function() {
return __method.apply(this, args.concat(slice(arguments)))
}
}
function setHTML(id, value) {
var elem = document.getElementById(id)
elem.innerHTML = value
}
var ids = ["cuenta1", "cuenta2", "cuenta3", "cuenta4"];
var functs = ids.map(function(id) {
...