regresivo - cuenta regresiva javascript horas minutos segundos
cómo cuenta regresiva a una fecha (2)
Me pregunto si alguien puede ayudarme. Después de horas buscando incansablemente aquí y en la web, parece que no puedo encontrar una cuenta regresiva simple usando jquery. No quiero usar ningún tipo de complemento, solo un código jquery simple para la cuenta atrás de una fecha. He logrado encontrar este código a continuación. Pero incluso con este código que lo coloca en mi sitio web no aparece nada. Agregué el archivo jquery de jquery.com y agregué los divs adecuados con la ID del counter y nada. Si alguien puede explicarme o mostrarme cómo hacer una cuenta regresiva simple en una función que toma un formato de fecha y devuelve una cuenta atrás, agradecería la ayuda.
var end = new Date(''02/19/2012 10:1 AM'');
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;
if (distance < 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 = days + ''days '';
document.getElementById(''countdown'').innerHTML += hours + ''hrs '';
document.getElementById(''countdown'').innerHTML += minutes + ''mins '';
document.getElementById(''countdown'').innerHTML += seconds + ''secs'';
}
timer = setInterval(showRemaining, 1000);
Eso no es jQuery, eso es JavaScript. Pero de cualquier manera...
Casi lo tienes. El único problema es var distance = end-now; . Debería ser:
var distance = end.getTime()-now.getTime();
Además, no debe usar += en innerHTML . En su lugar, use una variable (ejemplo: var output = "" ) y agregue a eso, luego asigne al innerHTML al final.
Finalmente, verifique que la ID del div coincida con la ID que tiene en getElementById .
Esto funciona bien como un javascript normal.
<script>
var end = new Date(''02/19/2012 10:1 AM'');
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;
if (distance < 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 = days + ''days '';
document.getElementById(''countdown'').innerHTML += hours + ''hrs '';
document.getElementById(''countdown'').innerHTML += minutes + ''mins '';
document.getElementById(''countdown'').innerHTML += seconds + ''secs'';
}
timer = setInterval(showRemaining, 1000);
</script>
<div id="countdown"></div>
Su salida está apareciendo de la siguiente manera:
1days 9hrs 3mins 22secs
ACTUALIZAR
Usando funciones:
<script>
CountDownTimer(''02/19/2012 10:1 AM'', ''countdown'');
CountDownTimer(''02/20/2012 10:1 AM'', ''newcountdown'');
function CountDownTimer(dt, id)
{
var end = new Date(dt);
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;
if (distance < 0) {
clearInterval(timer);
document.getElementById(id).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(id).innerHTML = days + ''days '';
document.getElementById(id).innerHTML += hours + ''hrs '';
document.getElementById(id).innerHTML += minutes + ''mins '';
document.getElementById(id).innerHTML += seconds + ''secs'';
}
timer = setInterval(showRemaining, 1000);
}
</script>
<div id="countdown"></div>
<div id="newcountdown"></div>
La salida aparecerá de la siguiente manera: