[SOLUCIONADO] Cuenta atrás hasta una fecha javascript

[El_Astur]

Buenas,

he realizado una cuenta atrás con javascript hasta una fecha. El problema es que al llegar a esa fecha el contador sigue contando en negativo, no para en 0 ni logro hacer que salga un mensaje que diga, por ejemplo, 'finalizado'. Alguien sabría cómo se puede enfocar esto? Dejo mi código:

Html:

Código:

   <span id="countdown"></span>

Javascript:

Código:

<script tyoe="text/javascript">
// fecha a la que llega la cuenta
var target_date = new Date("Mar 15, 2016").getTime();
 
// variables para las unidades de tiempo
var days, hours, minutes, seconds;
 
// agrego etiquetas
var countdown =  document.getElementById("countdown");
var days_span = document.createElement("span");
days_span.className = 'days';
countdown.appendChild(days_span);
var hours_span = document.createElement("span");
hours_span.className = 'hours';
countdown.appendChild(hours_span);
var minutes_span = document.createElement("span");
minutes_span.className = 'minutes';
countdown.appendChild(minutes_span);
var secs_span = document.createElement("span");
secs_span.className = 'secs';
countdown.appendChild(secs_span);
 
// actualizar el tiempo
setInterval(function () {
 
    var current_date = new Date().getTime();
    var seconds_left = (target_date - current_date) / 1000;
 
    days = parseInt(seconds_left / 86400);
    seconds_left = seconds_left % 86400;
     
    hours = parseInt(seconds_left / 3600);
    seconds_left = seconds_left % 3600;
     
    minutes = parseInt(seconds_left / 60);
    seconds = parseInt(seconds_left % 60);
     
  
    days_span.innerHTML = '<span>' + days + '</span>' + 'Days';
    hours_span.innerHTML = '<span>' + hours + '</span>' + 'Hours';
    minutes_span.innerHTML = '<span>' + minutes + '</span>' + 'Minutes';
    secs_span.innerHTML = '<span>' + seconds + '</span>' + 'Seconds';
  
    //countdown.innerHTML = days + "d, " + hours + "h, "
   // + minutes + "m, " + seconds + "s"; 
}, 1000);
</script>

[ZedGe1505]

Primero asignale una variable a tu setInterval

Código Javascript:

var timerId = setInterval(function () {......})
 

Luego dentro de ella pon esta validación

Código Javascript:

if(seconds <= 0 && minutes <= 0 && hours <= 0 && days <= 0)         
        clearInterval(timerId)
 

Ahora si quieres puedes hacer que dentro de ese IF te muestre el span en 0, ya que si ingresas cuando la hora ya pasó te mostrará el tiempo en negativo

[El_Astur]

Buenas Zed,

con lo que me has comentado me funciona correctamente, le he agregado un texto que aparece al final de la cuenta atrás. Mil gracias!!! Dejo el código por si le pudiera interesar a alguien:

Código:

<script tyoe="text/javascript">
// set the date we're counting down to
var target_date = new Date("Apr 20, 2016").getTime();
 
// variables for time units
var days, hours, minutes, seconds;
 
// get tag element
var countdown =  document.getElementById("countdown");
var days_span = document.createElement("SPAN");
days_span.className = 'days';
countdown.appendChild(days_span);
var hours_span = document.createElement("SPAN");
hours_span.className = 'hours';
countdown.appendChild(hours_span);
var minutes_span = document.createElement("SPAN");
minutes_span.className = 'minutes';
countdown.appendChild(minutes_span);
var secs_span = document.createElement("SPAN");
secs_span.className = 'secs';
countdown.appendChild(secs_span);
 
// update the tag with id "countdown" every 1 second
var timerId = setInterval(function () {
 
    // find the amount of "seconds" between now and target
    var current_date = new Date().getTime();
    var seconds_left = (target_date - current_date) / 1000;
 
    // do some time calculations
    days = parseInt(seconds_left / 86400);
    seconds_left = seconds_left % 86400;
     
    hours = parseInt(seconds_left / 3600);
    seconds_left = seconds_left % 3600;
     
    minutes = parseInt(seconds_left / 60);
    seconds = parseInt(seconds_left % 60);
     
    // format countdown string + set tag value.
  
    days_span.innerHTML = '<span>' + days + '</span>' + 'Days';
    hours_span.innerHTML = '<span>' + hours + '</span>' + 'Hours';
    minutes_span.innerHTML = '<span>' + minutes + '</span>' + 'Minutes';
    secs_span.innerHTML = '<span>' + seconds + '</span>' + 'Seconds';

    if(seconds <= 0 && minutes <= 0 && hours <= 0 && days <= 0){
      countdown.innerHTML = "<span class='final'>" + "finalizado" +   "</span>";
    }
    clearInterval(timerId); 
 
}, 1000);
</script>