使用 jquery 的两个日期时间之间的倒计时
Countdown of between two datetime using jquery
>我有两个日期,一个是2016-02-23 15:12:12,另一个是2016-02-29 18:16:42,然后如何显示hh:mm:ss倒计时以使用jquery减去这两个日期请帮忙提前谢谢
你试试这样
var timer;
var compareDate = new Date();
compareDate.setDate(compareDate.getDate() + 7); //just for this demo today + 7 days
timer = setInterval(function() {
timeBetweenDates(compareDate);
}, 1000);
function timeBetweenDates(toDate) {
var dateEntered = toDate;
var now = new Date();
var difference = dateEntered.getTime() - now.getTime();
if (difference <= 0) {
// Timer done
clearInterval(timer);
} else {
var seconds = Math.floor(difference / 1000);
var minutes = Math.floor(seconds / 60);
var hours = Math.floor(minutes / 60);
var days = Math.floor(hours / 24);
hours %= 24;
minutes %= 60;
seconds %= 60;
$("#days").text(days);
$("#hours").text(hours);
$("#minutes").text(minutes);
$("#seconds").text(seconds);
}
}
或
您可以使用countDownjs
http://countdownjs.org/demo.html
注意:最好使用第三方库,因为有人为此编写了代码,您最好插入它并开始使用 当您有一些资源时不要浪费时间。
这里有两个问题要解决。
- 你如何获得JavaScript中两个
Date
对象之间的区别 - 您如何以小时、分钟、秒为单位显示这种差异
获取 JavaScript 中两个Date
对象之间的差异
首先,您需要获取每个Date
对象的 Unix 时间戳,即从纪元开始经过的总秒数。然后,您可以减去这两个值以获得以秒为单位的总差。为此,我们依靠Date
的getTime()
方法,该方法在javascript中返回自纪元以来的毫秒数。
var start = new Date('2016-02-12 15:12:12');
var end = new Date('2016-02-22 18:16:42');
/* This gives us an integer value of the difference in seconds */
var diff = Math.round((end.getTime() - start.getTime()) / 1000);
以小时、分钟和秒为单位显示差异
第二部分需要执行一些基本的时钟算术,以从diff
值中获取小时数、分钟数和秒数。
由于一小时中有 3600 秒,因此此值中的总小时数为 Math.floor(diff / 3600)
。由于每分钟有 60 秒,因此此值中的总分钟数为 Math.floor((diff - (hours * 3600)) / 60)
,其中 diff
等于小时数乘以 3600
。随后,这个值中的总秒数只是diff
的余数,减去小时和分钟,从商 60 ((diff - hours * 3600) - (minutes * 60) % 60)
,我们从模运算符得到
function getClock(seconds) {
var hours = Math.floor(diff / 3600);
diff -= hours * 3600
var minutes = Math.floor(diff / 60);
diff -= minutes * 60;
var seconds = diff % 60;
return hours + ":" + minutes + ":" + seconds;
}
将一切整合在一起
如果你想显示这样的倒计时时钟,有一些漂亮的jquery插件jQuery倒计时,它使这个过程变得容易得多。但我觉得解释编程背后的细节很重要,无论如何。
var date1="2016-02-12 15:12:12";
var date2="2016-02-22 18:16:42";
var d1= date1.split(" ");
d1=d1[1];
var d2= date2.split(" ");
d2=d2[1];
d1=d1.split(":");
d2=d2.split(":");
var hours=d2[0]-d1[0];
var mins=d2[1]-d1[1];
var sec=d2[2]-d1[2];
var countdown=hours+":"+mins+":"+sec;
console.log(countdown);
这将为您提供剩余时间。有一些用于时间倒计时的库。您可以使用它们
- 更改angularjs中的日期-时间格式
- 将日期时间作为 JSON 发送将无法在我的视图中正确显示
- 将日期时间从json转换为可读格式
- 使用时刻.js从日期时间中提取时间
- 两个日期时间选择器
- Javascript:如何在onChange事件期间更改日期时间值
- .Net webApi ISO日期时间和IE8
- Javascript-如何使用bootstrap日期时间选择器自动计算两个时间输入之间的差异
- 转换日期时间格式
- 在JavaScript中转换日期/时间格式
- JavaScript JSON关联对象键和值都作为日期时间戳
- 将日期时间javascript绑定到表列
- 将JS日期解析为C#日期时间
- 使用JavaScript将客户端日期/时间字符串转换为JSON日期/时间串
- 从javascript数组获取php的日期时间
- 格式化momentjs日期时间
- 这个正则表达式的日期/时间有什么问题
- Mongoose查询在两个日期时间之间提取数据
- 当转换为Python日期时间时,Node的时间戳落后3分钟
- 自定义angularjs过滤器日期时间格式额外字符