JSFiddle - React, Tailwind, and code Playground
HTML
Timer: <span id="countup1"><span class="value_timer">00</span></span>
CSS
span.digit {
background: black;
color: white;
padding: 1px 3px;
margin: 1px;
font-family: var(--mainFontFamily);
font-size: var(--mainFontSize);
}
JavaScript
// TIMER Styling START
function styleChars(targetEl) {
const val = targetEl.textContent;
const chars = val.split('');
targetEl.innerHTML = chars.map(c => `<span class="digit">${c}</span>`).join('');
}
const target = document.querySelector('.value_timer');
console.log(target);
styleChars(target);
// TIMER Styling END
// TIMER START
var timerDate = "January 01, 2020 14:00:00";
function setTimer() {
// Month Day, Year Hour:Minute:Second, id-of-element-container.
countUpFromTime(timerDate, 'countup1');
};
window.onload = setTimer();
function countUpFromTime(countFrom, id) {
let countDate = new Date(countFrom);
let now = new Date();
let timeDifference = (now.getTime() - countDate.getTime());
let value_timer = Math.floor(timeDifference / 1000 / 60 / 60);
let idEl = document.getElementById(id);
idEl.innerHTML = value_timer;
styleChars(idEl); // Pass element to styling function.
clearTimeout(countUpFromTime.interval);
countUpFromTime.interval = setTimeout(function () {
countUpFromTime(countFrom, id);
}, 1000);
}
// TIMER END