JavaScript 日期倒计时
JavaScript countdown until date
所以我正在尝试构建一个非常简约的倒计时计时器,直到特定日期(2015 年 7 月 31 日,18:00:00 GMT)包括到该日期的总 MS,以及到 D:H:M:S:MS日期。
到目前为止我得到的是这个代码笔:
http://codepen.io/svbeon/pen/MwBJNJ
有了这个 JS:
setInterval(times, 1);
function times() {
today = new Date();
July = new Date(Date.UTC(2015,06,31,18,0,0,0));
diffMs = ((July - today) - today.getTimezoneOffset() * 60000); // milliseconds between now & July 31
diffDays = (July.getDate() - today.getDate()); // days
diffHrs = (24 + ((July.getHours() - today.getHours()) + (today.getTimezoneOffset() / 60))); // hours
diffMins = (60 + (July.getMinutes() - today.getMinutes())); // minutes
diffSecs = (60 + (July.getSeconds() - today.getSeconds())); // seconds
diffMis = (1000 + (July.getMilliseconds() - today.getMilliseconds())); //milliseconds
if (diffMs <= 0) {
diffMs = 0;
diffDays = 0;
diffHrs = 0;
diffMins = 0;
diffSecs = 0;
diffMis = 0;
}
document.getElementById("timer").innerHTML = diffMs + " miliseconds";
document.getElementById("timer2").innerHTML = diffDays + " days " + diffHrs + " Hours " + diffMins + " Minutes " + diffSecs + " seconds " + diffMis + " milliseconds";
document.getElementById("date").innerHTML = "until " + July;
}
我在这里遇到的问题是它可以回显类似 14 days 24 hours 60 minutes 60 seconds 1000 milliseconds
的东西,而实际上它应该是 14 days 0 hours 0 minutes 0 seconds 0 milliseconds
以及在 18:00 UTC 之后它仍然说 14 days
而不是 13 days
直到午夜。
我不知道如何简单地解决这些问题
减一例如:
diffSecs = (59 + (July.getSeconds() - today.getSeconds())); // seconds
会导致计时器显示 0 而不是 60,但也会使计时器走错 1 秒(分钟或小时,如果他们有的话)
因此,如果您碰巧知道如何解决这个问题并帮助一个不太熟练的开发人员,我会非常高兴!!
我建议使用 Moment.js,因为它使 date/time 操作更简单,并且可能还会帮助您解决这个问题。
例如,以毫秒为单位获取两个日期之间的差异:
var a = moment([2007, 0, 29]);
var b = moment([2007, 0, 28]);
a.diff(b) // 86400000
然后根据毫秒差的结果创建一个duration
并使用milliseconds()
、seconds()
等函数以不同的单位显示duration
:
moment.duration(1500).milliseconds(); // 500
moment.duration(1500).seconds(); // 1
只需使用 mod:
day = day%24;
secs = secs%60;
等等
所以我正在尝试构建一个非常简约的倒计时计时器,直到特定日期(2015 年 7 月 31 日,18:00:00 GMT)包括到该日期的总 MS,以及到 D:H:M:S:MS日期。
到目前为止我得到的是这个代码笔: http://codepen.io/svbeon/pen/MwBJNJ 有了这个 JS:
setInterval(times, 1);
function times() {
today = new Date();
July = new Date(Date.UTC(2015,06,31,18,0,0,0));
diffMs = ((July - today) - today.getTimezoneOffset() * 60000); // milliseconds between now & July 31
diffDays = (July.getDate() - today.getDate()); // days
diffHrs = (24 + ((July.getHours() - today.getHours()) + (today.getTimezoneOffset() / 60))); // hours
diffMins = (60 + (July.getMinutes() - today.getMinutes())); // minutes
diffSecs = (60 + (July.getSeconds() - today.getSeconds())); // seconds
diffMis = (1000 + (July.getMilliseconds() - today.getMilliseconds())); //milliseconds
if (diffMs <= 0) {
diffMs = 0;
diffDays = 0;
diffHrs = 0;
diffMins = 0;
diffSecs = 0;
diffMis = 0;
}
document.getElementById("timer").innerHTML = diffMs + " miliseconds";
document.getElementById("timer2").innerHTML = diffDays + " days " + diffHrs + " Hours " + diffMins + " Minutes " + diffSecs + " seconds " + diffMis + " milliseconds";
document.getElementById("date").innerHTML = "until " + July;
}
我在这里遇到的问题是它可以回显类似 14 days 24 hours 60 minutes 60 seconds 1000 milliseconds
的东西,而实际上它应该是 14 days 0 hours 0 minutes 0 seconds 0 milliseconds
以及在 18:00 UTC 之后它仍然说 14 days
而不是 13 days
直到午夜。
我不知道如何简单地解决这些问题 减一例如:
diffSecs = (59 + (July.getSeconds() - today.getSeconds())); // seconds
会导致计时器显示 0 而不是 60,但也会使计时器走错 1 秒(分钟或小时,如果他们有的话)
因此,如果您碰巧知道如何解决这个问题并帮助一个不太熟练的开发人员,我会非常高兴!!
我建议使用 Moment.js,因为它使 date/time 操作更简单,并且可能还会帮助您解决这个问题。
例如,以毫秒为单位获取两个日期之间的差异:
var a = moment([2007, 0, 29]);
var b = moment([2007, 0, 28]);
a.diff(b) // 86400000
然后根据毫秒差的结果创建一个duration
并使用milliseconds()
、seconds()
等函数以不同的单位显示duration
:
moment.duration(1500).milliseconds(); // 500
moment.duration(1500).seconds(); // 1
只需使用 mod:
day = day%24;
secs = secs%60;
等等