倒计时定时器使用Moment js
Countdown timer using Moment js
我正在为一个事件页面制作一个倒计时计时器,我使用了moment js。
这是小提琴。
我正在计算事件日期和当前日期(时间戳)之间的日期差,然后使用' duration ';方法从时刻js。但剩下的时间并没有像预期的那样到来。
预期 - 00:30:00
实际 - 5h:59m:00s
<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>
我读了momentjs的文档来找出问题,但是没有运气。
感谢您的宝贵时间。
更新:
我最后这样做:
<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>
JS小提琴。
在最后一个语句中,您将持续时间转换为考虑时区的时间。我假设你的时区是+530,所以5小时30分钟加到30分钟。你可以按照下面的方法做。
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);
查看这个插件:
moment-countdown
moment-countdown是一个小小的moment.js插件,它集成了Countdown.js。文件在这里。
它是如何工作的?
//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'
虽然我确信这不会被接受为这个非常古老的问题的答案,但我来这里寻找一种方法来做到这一点,这就是我解决问题的方法。
我在codependency .io创建了一个演示。
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>
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);
})();
输出: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
注意:上面的第二行是根据momentjs更新的,上面的第三行是根据countdownjs更新的,由于requestAnimationFrame()
代码片段:
或者,您可以查看以下代码片段:
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>
要求:
- CountdownJS: http://countdownjs.org/(和Rawgit能够使用CountdownJS)
- MomentJS: http://momentjs.com/
-
requestAnimationFrame()
-使用这个动画而不是setInterval()
。
可选要求:
- jQuery: https://jquery.com/
另外,这里有一些关于requestAnimationFrame()
模式的简单阅读:
- http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
- https://css-tricks.com/using-requestanimationframe/
我发现requestAnimationFrame()
模式是比setInterval()
模式更优雅的解决方案。
我想我也会把这个扔出去(没有插件)。它倒数10秒进入未来。
var countDownDate = moment().add(10, 'seconds');
var x = setInterval(function() {
diff = countDownDate.diff(moment());
if (diff <= 0) {
clearInterval(x);
// If the count down is finished, write some text
$('.countdown').text("EXPIRED");
} else
$('.countdown').text(moment.utc(diff).format("HH:mm:ss"));
}, 1000);
<script src="https://momentjs.com/downloads/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="countdown"></div>
时区。如果你想让来自世界各地的访问者获得相同的时间,你必须通过使用getTimezoneOffset()
来处理它们。
试试这个http://jsfiddle.net/cxyms/2/,它适用于我,但我不确定它是否适用于其他时区。
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);
这里有一些其他的解决方案。不需要使用额外的插件
代码段使用.subtract
API,需要力矩2.1.0+
片段也可以在这里获得https://jsfiddle.net/traBolic/ku5cyrev/
使用.format
API格式化:
const duration = moment.duration(9, 's');
const intervalId = setInterval(() => {
duration.subtract(1, "s");
const inMilliseconds = duration.asMilliseconds();
// "mm:ss:SS" will include milliseconds
console.log(moment.utc(inMilliseconds).format("HH[h]:mm[m]:ss[s]"));
if (inMilliseconds !== 0) return;
clearInterval(intervalId);
console.warn("Times up!");
}, 1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js"></script>
使用.hours
, .minutes
和.seconds
API在模板字符串中手动格式化
const duration = moment.duration(9, 's');
const intervalId = setInterval(() => {
duration.subtract(1, "s");
console.log(`${duration.hours()}h:${duration.minutes()}m:${duration.seconds()}s`);
// `:${duration.milliseconds()}` to add milliseconds
if (duration.asMilliseconds() !== 0) return;
clearInterval(intervalId);
console.warn("Times up!");
}, 1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js"></script>
下面还需要moment-duration-format插件:
$.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);
};
使用例子:
$('#someDiv').countdown({
seconds: 30*60,
format: 'mm:ss'
});
这是我的5分钟计时器:
var start = moment("5:00", "m:ss");
var seconds = start.minutes() * 60;
this.interval = setInterval(() => {
this.timerDisplay = start.subtract(1, "second").format("m:ss");
seconds--;
if (seconds === 0) clearInterval(this.interval);
}, 1000);
以上答案的组合对我来说很有效。
const moment = require('moment');
require("moment-countdown");
let timeRemaining = 2330;
console.log('moment', moment(moment().add(timeRemaining, 'seconds')).countdown().toString());
您没有使用react native或react,所以请原谅我这不是您的解决方案。-因为这是一个7年前的帖子,我很确定你现在已经明白了;)
但是我正在寻找类似的react-native的东西,这让我想到了这个问题。万一有人和我走同样的路,我想我应该分享我的use-moment-countdown
hook for react或react native: https://github.com/BrooklinJazz/use-moment-countdown.
例如,你可以像这样设置一个10分钟的计时器:
import React from 'react'
import { useCountdown } from 'use-moment-countdown'
const App = () => {
const {start, time} = useCountdown({m: 10})
return (
<div onClick={start}>
{time.format("hh:mm:ss")}
</div>
)
}
export default App
- Datetime格式为Friendly Time.Moment JS输出错误
- 问题用moment JS制作一个简单的时间表
- 针对重复发生的事件,使用moment.js防止DST偏移
- 如何在moment.js中只比较日期
- 如何用moment.js列出两个日期之间的所有月份
- 用Jquery map和moment js制作一个简单的时间线
- 如何使用Moment JS获得时间
- 如何获得一个只有时间的moment.js日期对象
- 使用moment.js获取时间分区的偏移日期对象
- Moment js and IOS
- moment.js在两个时区格式的日期之间存在差异
- moment js,将EST字符串转换为UTC
- Moment.js不接受变量作为参数
- Moment JS:忽略年份的天数差异
- 使用moment.js获取月份和年份中的所有日期
- moment.js年份/数字格式,阿拉伯语言环境
- 尝试设置时间时Moment JS Deprecation警告
- Moment.js与上午至下午的时间范围进行比较
- Moment.js unix时间戳,以分钟为单位显示以前的时间
- 补偿Moment.js中的utcOffset