Cuenta Atras Java Script

Hoy te explicamos como crear una cuenta atras en Java Script utilizando PHP para que el usuario introduzca los segundos que va a durar la cuenta atras, primero realizamos el formulario HTML con los segundos que durara la cuenta atras

<div id="reloj">
    
		<form action ="index.php" method="POST">
			Segundos:<input type="number" name="tiempo"/><br><br/>
			<input type="submit" value="Enviar"><br><br/>
		</form> 
	</div>	
	<?php
		if($_POST){
			$segundos=$_POST["tiempo"];
        ?>

Luego creamos el script de manera que creamos una variable con la fecha actual y le sumamos los segundos que nos pasó el usuario para la cuenta atrás para calcular el final de la cuenta atras y luego restamos el final(end) del ahora(now) y nos da los milisegundos que quedan para la cuenta atras los descomponemos en dias, horas, minutos y segundos y obtenemos los datasw para mostrar

<?php
echo"<div id=\"countdown\"></div>";
echo "<script>
var end1 = new Date();
var seg =end1.getSeconds();
var end = end1.setSeconds(seg+".$segundos.");
    var _second = 1000;
    var _minute = _second * 60;
    var _hour = _minute * 60;
    var _day = _hour * 24;
    var timer;

    function showRemaining() {
        var now = new Date();
        var distance = end - now;
        console.log(distance);
        if (distance &lt; 0) {

            clearInterval(timer);
            document.getElementById('countdown').innerHTML = 'EXPIRED!';

            return;
        }
        var days = Math.floor(distance / _day);
        var hours = Math.floor((distance % _day) / _hour);
        var minutes = Math.floor((distance % _hour) / _minute);
        var seconds = Math.floor((distance % _minute) / _second);

		document.getElementById('countdown').innerHTML =  'Tiempo para que finalice la cuenta atras:   ';
        document.getElementById('countdown').innerHTML += days + ' dias, ';
        document.getElementById('countdown').innerHTML += hours + ' horas, ';
        document.getElementById('countdown').innerHTML += minutes + ' minutos y ';
        document.getElementById('countdown').innerHTML += seconds + ' segundos';
    }

    timer = setInterval(showRemaining, 1000);
</script>";
?>

Se puede probar en el siguiente enlace temporizador donde aparte del JavaScript hay algun otro cambio pero de poca importancia.
Espero que te haya gustado 😉