javascript - react - Temporizador de cuenta regresiva usando Moment js
moment to date (5)
Estoy haciendo un temporizador de cuenta regresiva para una página de evento, usé el momento js para esto.
Aquí está el fiddle para esto.
Estoy calculando la diferencia de fecha entre la fecha del evento y la fecha actual (marca de tiempo), luego uso el método de "duración" desde el momento js. Pero el tiempo que queda no viene como se esperaba.
Esperado - 00: 30m: 00s
Actual - 5h: 59m: 00s
Código:
<script>
$(document).ready(function(){
var eventTime = ''1366549200'';
var currentTime = ''1366547400'';
var time = eventTime - currentTime;
var duration = moment.duration(time*1000, ''milliseconds'');
var interval = 1000;
setInterval(function(){
duration = moment.duration(duration.asMilliseconds() - interval, ''milliseconds'');
$(''.countdown'').text(moment(duration.asMilliseconds()).format(''H[h]:mm[m]:ss[s]''));
}, interval);
});
</script>
Leí la documentación del momento para resolver el problema, pero no tuve suerte.
Gracias por tu tiempo.
Actualización:
Termino haciendo así:
<script>
$(document).ready(function(){
var eventTime = ''1366549200'';
var currentTime = ''1366547400'';
var leftTime = eventTime - currentTime;//Now i am passing the left time from controller itself which handles timezone stuff (UTC), just to simply question i used harcoded values.
var duration = moment.duration(leftTime, ''seconds'');
var interval = 1000;
setInterval(function(){
// Time Out check
if (duration.asSeconds() <= 0) {
clearInterval(intervalId);
window.location.reload(true); #skip the cache and reload the page from the server
}
//Otherwise
duration = moment.duration(duration.asSeconds() - 1, ''seconds'');
$(''.countdown'').text(duration.days() + ''d:'' + duration.hours()+ ''h:'' + duration.minutes()+ ''m:'' + duration.seconds() + ''s'');
}, interval);
});
</script>
Aunque estoy seguro de que esto no será aceptado como la respuesta a esta pregunta tan antigua, vine aquí en busca de una forma de hacerlo y así es como resolví el problema.
He creado una demostración aquí en codepen.io .
El HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js" type="text/javascript"></script>
<script src="https://cdn.rawgit.com/mckamey/countdownjs/master/countdown.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-3.0.0.min.js" type="text/javascript"></script>
<div>
The time is now: <span class="now"></span>, a timer will go off <span class="duration"></span> at <span class="then"></span>
</div>
<div class="difference">The timer is set to go off <span></span></div>
<div class="countdown"></div>
El Javascript:
var now = moment(); // new Date().getTime();
var then = moment().add(60, ''seconds''); // new Date(now + 60 * 1000);
$(".now").text(moment(now).format(''h:mm:ss a''));
$(".then").text(moment(then).format(''h:mm:ss a''));
$(".duration").text(moment(now).to(then));
(function timerLoop() {
$(".difference > span").text(moment().to(then));
$(".countdown").text(countdown(then).toString());
requestAnimationFrame(timerLoop);
})();
Salida:
The time is now: 5:29:35 pm, a timer will go off in a minute at 5:30:35 pm
The timer is set to go off in a minute
1 minute
Nota: la segunda línea anterior se actualiza según moment.js y la tercera línea anterior se actualiza según Countdown.js y todo esto está animado a aproximadamente 60 FPS debido a requestAnimationFrame()
Fragmento de código:
Alternativamente, puede simplemente mirar este fragmento de código:
var now = moment(); // new Date().getTime();
var then = moment().add(60, ''seconds''); // new Date(now + 60 * 1000);
$(".now").text(moment(now).format(''h:mm:ss a''));
$(".then").text(moment(then).format(''h:mm:ss a''));
$(".duration").text(moment(now).to(then));
(function timerLoop() {
$(".difference > span").text(moment().to(then));
$(".countdown").text(countdown(then).toString());
requestAnimationFrame(timerLoop);
})();
// CountdownJS: http://countdownjs.org/
// Rawgit: http://rawgit.com/
// MomentJS: http://momentjs.com/
// jQuery: https://jquery.com/
// Light reading about the requestAnimationFrame pattern:
// http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
// https://css-tricks.com/using-requestanimationframe/
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js" type="text/javascript"></script>
<script src="https://cdn.rawgit.com/mckamey/countdownjs/master/countdown.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-3.0.0.min.js" type="text/javascript"></script>
<div>
The time is now: <span class="now"></span>,
</div>
<div>
a timer will go off <span class="duration"></span> at <span class="then"></span>
</div>
<div class="difference">The timer is set to go off <span></span></div>
<div class="countdown"></div>
Requisitos:
- CountdownJS: Countdown.js (y Rawgit para poder usar countdownjs)
- MomentJS: moment.js
-
requestAnimationFrame(): use esto para la animación en lugar desetInterval().
Requisitos opcionales:
- jQuery: https://jquery.com/
Además, aquí hay una ligera lectura sobre el patrón requestAnimationFrame() :
- http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
- https://css-tricks.com/using-requestanimationframe/
Encontré que el patrón requestAnimationFrame() es una solución mucho más elegante que el patrón setInterval() .
Echa un vistazo a este plugin:
github.com/icambron/moment-countdown
moment-countdown es un pequeño complemento de moment.js que se integra con Countdown.js . El archivo está here .
¿Cómo funciona?
//from then until now
moment("1982-5-25").countdown().toString(); //=> ''30 years, 10 months, 14 days, 1 hour, 8 minutes, and 14 seconds''
//accepts a moment, JS Date, or anything parsable by the Date constructor
moment("1955-8-21").countdown("1982-5-25").toString(); //=> ''26 years, 9 months, and 4 days''
//also works with the args flipped, like diff()
moment("1982-5-25").countdown("1955-8-21").toString(); //=> ''26 years, 9 months, and 4 days''
//accepts all of countdown''s options
moment().countdown("1982-5-25", countdown.MONTHS|countdown.WEEKS, NaN, 2).toString(); //=> ''370 months, and 2.01 weeks''
En la última declaración, está convirtiendo la duración en tiempo que también considera la zona horaria. Supongo que su zona horaria es +530, por lo que 5 horas y 30 minutos se agregan a 30 minutos. Usted puede hacer lo que se indica a continuación.
var eventTime= 1366549200; // Timestamp - Sun, 21 Apr 2013 13:00:00 GMT
var currentTime = 1366547400; // Timestamp - Sun, 21 Apr 2013 12:30:00 GMT
var diffTime = eventTime - currentTime;
var duration = moment.duration(diffTime*1000, ''milliseconds'');
var interval = 1000;
setInterval(function(){
duration = moment.duration(duration - interval, ''milliseconds'');
$(''.countdown'').text(duration.hours() + ":" + duration.minutes() + ":" + duration.seconds())
}, interval);
Lo siguiente también requiere el complemento de formato de duración del momento :
$.fn.countdown = function ( options ) {
var $target = $(this);
var defaults = {
seconds: 0,
format: ''hh:mm:ss'',
stopAtZero: true
};
var settings = $.extend(defaults, options);
var eventTime = Date.now() + ( settings.seconds * 1000 );
var diffTime = eventTime - Date.now();
var duration = moment.duration( diffTime, ''milliseconds'' );
var interval = 0;
$target.text( duration.format( settings.format, { trim: false }) );
var counter = setInterval(function () {
$target.text( moment.duration( duration.asSeconds() - ++interval, ''seconds'' ).format( settings.format, { trim: false }) );
if( settings.stopAtZero && interval >= settings.seconds ) clearInterval( counter );
}, 1000);
};
Ejemplo de uso:
$(''#someDiv'').countdown({
seconds: 30*60,
format: ''mm:ss''
});
Zonas horarias. Tienes que lidiar con ellos, usando getTimezoneOffset() si quieres que tus visitantes de todo el mundo obtengan el mismo tiempo.
Prueba este http://jsfiddle.net/cxyms/2/ , funciona para mí, pero no estoy seguro de que funcione con otras zonas horarias.
var eventTimeStamp = ''1366549200''; // Timestamp - Sun, 21 Apr 2013 13:00:00 GMT
var currentTimeStamp = ''1366547400''; // Timestamp - Sun, 21 Apr 2013 12:30:00 GMT
var eventTime = new Date();
eventTime.setTime(366549200);
var Offset = new Date(eventTime.getTimezoneOffset()*60000)
var Diff = eventTimeStamp - currentTimeStamp + (Offset.getTime() / 2);
var duration = moment.duration(Diff, ''milliseconds'');
var interval = 1000;
setInterval(function(){
duration = moment.duration(duration.asMilliseconds() - interval, ''milliseconds'');
$(''.countdown'').text(moment(duration.asMilliseconds()).format(''H[h]:mm[m]:ss[s]''));
}, interval);