使用UTC以小时,分钟,秒为单位获取JavaScript中两个日期之间的时差

就像标题所说的那样,我需要获取两个日期之间的时差,并显示倒数到完成日期的小时,分​​钟,秒.我有这个:

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和创建适当的倒计时有些迷惑?我什至不确定自己是否做对了(我才刚刚开始学习j.s).我应该如何修正我的代码?

解决方法:

在您的代码中,您具有:

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

在这种情况下,无需使用getTime.但是使用有意义的变量名称会有所帮助:

var now = new Date();

然后是:

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

不要使用Date构造函数(或Date.parse)来分析字符串,因为它主要取决于实现且不一致.如果您有特定的日期,则将值直接传递给构造函数.

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

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

现在,您可以使用来获得与现在之间的区别:

var diff = endDate - now; 

尝试获取小时,分钟和秒时,您有:

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

它将整个时差转换为小时,分钟和秒,因此总时间约为应有的三倍.您需要的只是组件,因此:

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()

这里有很多有关计时器和日期差的问题和答案,请进行一些搜索.

上一篇:javascript – 刷新浏览器时如何使倒数计时器不重置?


下一篇:javascript – 一页上有多个倒计时器