JSFiddle - React, Tailwind, and code Playground

by Alexis López Espinoza

HTML

<div id="countdown" class="timer"></div>

JavaScript

function randomIntFromInterval(min,max){
	return Math.floor(Math.random()*(max-min+1)+min);
}

function x(){
	target_date = new Date(),
    base = 10 * 10 * 0.5,
    variable = randomIntFromInterval(0, base);
    
    target_date.setSeconds(target_date.getSeconds() + base + variable);
    
    // conseguir elemento
    countdown =  document.getElementById("countdown");
    hours_span = document.createElement("SPAN");
    
    hours_span.className = 'hours';
    countdown.innerHTML = "";
    countdown.appendChild(hours_span);
    
    minutes_span = document.createElement("SPAN");
    
    minutes_span.className = 'minutes';
    countdown.appendChild(minutes_span);
    
    secs_span = document.createElement("SPAN");
    
    secs_span.className = 'secs';
    countdown.appendChild(secs_span);
    
    //Ejecutamos al temporizador
    y();
}

function y(){
	// actualizar la etiqueta con el id countdown cada 1 seg.
    setInterval(function () {
		// encontrar la cantidad de segundos entre hoy el día final
        var current_date = new Date().getTime();
        var seconds_left = (target_date - current_date) / 1000;
        
        // cálculos de tiempo
		hours = parseInt(seconds_left / 3600);
        seconds_left = seconds_left % 3600;
 		minutes = parseInt(seconds_left / 60);
        seconds = parseInt(seconds_left % 60);
        
        // formato de string de cuenta atrás + valor de tag.
        hours_span.innerHTML = '<span>' + '0' + hours + '</span>' +  'Hours';
        minutes_span.innerHTML = '<span>' + '0' + minutes + '</span>' + 'Mins';
        secs_span.innerHTML = '<span>' + seconds + '</span>' + 'Secs';
 		
        //Si los tres valores son iguales a cero, se detiene al temporizador y se vuelve a ejecutar la función x()
        if (!hours && !minutes && !seconds){
            x();
        }
	}, 1000);
}

//Se ejecutará al carga la página
x();