使用 UTC 在 Javascript 中以小时、分钟、秒为单位获取 2 个日期之间的差异答案

【问题标题】：Getting the difference between 2 dates in Javascript in hours, minutes, seconds with UTC使用 UTC 在 Javascript 中以小时、分钟、秒为单位获取 2 个日期之间的差异
【发布时间】：2017-07-16 05:24:44
【问题描述】：

正如标题所说，我需要获取两个日期之间的差异并显示倒计时到结束日期的小时、分钟、秒。我有这个：

function timer(){
	
	'use strict'
	
	var date1 = new Date().getTime();
	var date2 = new Date("05/29/2017").getTime();
	
	var diff = date2 - date1;
	
	var seconds = diff / 1000;
	var minutes = (diff / 1000) / 60;
	var hours = minutes / 60;

	var message = 'Hours: ' + Math.floor(hours) + " Minutes: " + Math.floor(minutes) + " Seconds: " + Math.floor(seconds); 
	
	var output = document.getElementById('output');
	if (output.textContent !== undefined) {
		output.textContent = message;
	} else {
		output.innerText = message;
	}
}
setInterval("timer()", 1000);
window.onload = timer;

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>hi</title>
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="css/form.css">
</head>
<body>
    <!-- auction.html -->
    <form action="#" method="post" id="theForm">
        <fieldset><legend>Auction ends on May 29, 2017</legend>
		    <p>Refresh page for updated times.</p>
			<div id="output"></div>
            <input type="submit" value="Refresh" id="submit">
        </fieldset>
    </form>
    <script src="js/auction.js"></script>
</body>
</html>

我的作业说明指出我需要：“选择未来的结束日期（作业到期后几周）并使用 UTC。显示距离拍卖结束还剩的小时、分钟和秒数。” 我对如何实施 UTC 并创建正确的倒计时有点迷茫？我什至不确定我是否做对了（我刚刚开始学习 js）。我应该如何修复我的代码？

【问题讨论】：

(a) 查看Date.UTC 函数。 (b) 问问自己，你的秒、分、小时计算是否合理。作为用户，我不会期望输出诸如“3 小时等于 180 分钟等于 10,800 秒”（这没有给我任何有价值的信息），而是累积的输出如“1 小时 50 分 20 秒”。在这种情况下，您需要重新考虑计算。
这确实是 How do I get the number of days between two dates in JavaScript? 或 How to calculate date difference in javascript 的副本。唯一的区别是将差异解决为时间而不是天数。

标签： javascript date countdown

【解决方案1】：

在您的代码中：

var date1 = new Date().getTime();

在这种情况下，不需要使用 getTime。但是使用有意义的变量名是有帮助的：

var now = new Date();

然后是：

var date2 = new Date("05/29/2017").getTime();

不要使用 Date 构造函数（或 Date.parse）来解析字符串，因为它主要依赖于实现且不一致。如果您有特定日期，请将值直接传递给构造函数。

关于“使用 UTC”，这有点令人困惑，因为 ECMAScript 日期对象是 UTC。他们使用主机时区偏移量来计算内部 UTC 时间值，并显示“本地”日期和时间值。我可以解释“使用 UTC”的唯一方法是使用 Date.UTC 创建一个日期实例，例如：

var endDate = new Date(Date.UTC(2017,4,29)); // 2017-05-29T00:00:00Z

现在你可以得到 then 和 now using 之间的区别：

var diff = endDate - now;

在尝试获取您拥有的小时、分钟和秒时：

var seconds = diff / 1000;
var minutes = (diff / 1000) / 60;
var hours = minutes / 60;

这会将整个差异转换为小时、分钟和秒，因此总时间约为应有的 3 倍。你需要的只是组件，所以：

var hours = Math.floor(diff / 3.6e5);
var minutes = Math.floor(diff % 3.6e5) / 6e4);
var seconds = Math.floor(diff % 6e4) / 1000;

将所有内容放在一个函数中：

function timeLeft() {
    var now = new Date();
    var endDate = new Date(Date.UTC(2017,4,29)); // 2017-05-29T00:00:00Z
    var diff = endDate - now; 

    var hours   = Math.floor(diff / 3.6e6);
    var minutes = Math.floor((diff % 3.6e6) / 6e4);
    var seconds = Math.floor((diff % 6e4) / 1000);
    console.log('Time remaining to ' + endDate.toISOString() + 
                ' or\n' + endDate.toString() + ' local is\n' +
                 hours + ' hours, ' +  minutes + ' minutes and ' + 
                 seconds + ' seconds');
}

timeLeft()

这里有很多很多关于计时器和日期差异的问题和答案，做一些搜索。

【讨论】：

【解决方案2】：

您真的应该使用momentjs 来进行javascript 中的任何日期时间操作

var now  = "04/09/2013 15:00:00";
var then = "04/09/2013 14:20:30";

moment.utc(moment(now,"DD/MM/YYYY HH:mm:ss").diff(moment(then,"DD/MM/YYYY HH:mm:ss"))).format("HH:mm:ss")

// outputs: "00:39:30"

【讨论】：

OP的任务不是如何使用moment.js，而是如何自己计算两个日期之间的差异。