JSFiddle - React, Tailwind, and code Playground
HTML
<div id="div_timer" style="text-align:center;">
CSS
#div_timer {
padding : 25px;
}
.timer_class
{
color:gray;
padding:5px 10px;
text-align:center;
background-color:rgba(0,0,0,0.1);
border-radius:5px;
}
.lbl_semi_class
{
color:gray;
}
JavaScript
(function ( $ ) {
$.fn.textChangeAnimate = function(val) {
val = "" + val;
return this.each(function() {
var $el = $(this);
if (val == $el.text()) return;
$el.slideUp("fast", function() {
$el.text(val);
}).slideDown("fast");
});
};
}( jQuery ));
function timer(element) {
var interval = 1;
var timer_day1 = 0;
var timer_day2 = 0;
var timer_hour1 = 0;
var timer_hour2 = 0;
var timer_min1 = 0;
var timer_min2 = 0;
var timer_sec1 = 0;
var timer_sec2 = 0;
var timer_day_text = 0;
var timer_hour_text = 0;
var timer_min_text = 0;
var timer_sec_text = 0;
var timer_text = 0;
$('<div id="div_append_timer">').appendTo("#" + element);
$('#div_append_timer').append('<label id="lbl_timer_hour2" class="timer_class"></label>');
$('#div_append_timer').append(' ');
$('#div_append_timer').append('<label id="lbl_timer_hour1" class="timer_class"></label>');
$('#div_append_timer').append(' ');
$('#div_append_timer').append('<label class="lbl_semi_class">:</label>');
$('#div_append_timer').append(' ');
$('#div_append_timer').append('<label id="lbl_timer_min2" class="timer_class"></label>');
$('#div_append_timer').append(' ');
$('#div_append_timer').append('<label id="lbl_timer_min1" class="timer_class"></label>');
$('#div_append_timer').append(' ');
$('#div_append_timer').append('<label class="lbl_semi_class">:</label>');
$('#div_append_timer').append(' ');
$('#div_append_timer').append('<label id="lbl_timer_sec2" class="timer_class"></label>');
$('#div_append_timer').append(' ');
$('#div_append_timer').append('<label id="lbl_timer_sec1" class="timer_class"></label>');
setInterval(function () {
timer_sec1 = timer_sec1 + interval;
if (parseInt(timer_sec1) > 9) {
...