JSFiddle - React, Tailwind, and code Playground

by Nicolas PUJOL

HTML

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

CSS

.compteur-separateur {
  display: inline-block;
  width: 14px;
  height: 76px;
  font-size: 56px;
  line-height: 56px;
}
.compteur-espace {
  display: inline-block;
  width: 14px;
  height: 76px;
}
.compteur {
  display: inline-block;
  width: 53px;
  height: 76px;
  background-color: red;
  text-align: center;
  font-size: 76px;
  line-height: 76px;
}

JavaScript

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

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

function buildCompteur() {
  for (var i = 0; i < posCompteurs.length; i++) {
    $("#compteur").append("<div id='compteur" + i + "' class='compteur'>" + posCompteurs[i] + "</div>");
    if (i == compteurLength - 4) {
      $("#compteur").append("<div class='compteur-separateur'>,</div>");
    } else if (i == compteurLength - 7) {
      $("#compteur").append("<div class='compteur-espace'></div>");
    }
  }
  runCompteur();
}

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

buildCompteur();

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