JSFiddle - React, Tailwind, and code Playground

by Nicolas PUJOL

HTML

<div id="compteur"></div>

CSS

.compteur {
  width: 53px;
  height: 103px;
  display: inline-block;
}

JavaScript

var startCompteur = 1234;
var endCompteur = 2000;
var compteurLength = 8;
var pasCompteur = 17;
var vitesseCompteur = 100;

var posCompteurs = arrayCompteur(startCompteur, compteurLength);
var actuelCompteur = startCompteur;
var t;

function arrayCompteur(str, length) {
  str = str.toString();
  while (str.length < length) str = '0' + str;
  return str.split("");
}

function buildCompteur() {
  for (var i = 0; i < posCompteurs.length; i++) {
    $("#compteur").append("<div id='compteur" + i + "' class='compteur'>" + posCompteurs[i] + "</div>");
  }
  runCompteur();
}

function runCompteur() {
  actuelCompteur += pasCompteur;
  if (actuelCompteur > endCompteur) {
    actuelCompteur = endCompteur;
  }
  var posCompteurs = arrayCompteur(actuelCompteur, compteurLength);
  for (var i = compteurLength; i > 0; i--) {
    $("#compteur" + i).text(posCompteurs[i]);
  }
  if (actuelCompteur < endCompteur) {
    t = setTimeout(runCompteur, vitesseCompteur);
  }
}
buildCompteur();