Получение разницы между двумя датами в Javascript в часах, минутах, секундах с UTC

Как говорится в заголовке, мне нужно получить разницу между двумя датами и отобразить часы, минуты, секунды, которые отсчитываются до даты окончания. У меня есть это:

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). Как мне исправить мой код?


javascript date countdown
person Community    schedule 25.02.2017    source источник
comment
(a) Посмотрите на функцию Date.UTC. (b) Спросите себя, разумен ли вообще ваш расчет секунд, минут, часов. Я, как пользователь, не ожидал бы, что результат будет равен 3 часам равно 180 минутам равно 10 800 секундам (это не дает мне никакой ценной информации), а скорее кумулятивному результату, такому как как 1 час 50 минут 20 секунд. В этом случае вам нужно переосмыслить свой расчет.   -  person qqilihq    schedule 25.02.2017
comment
Это действительно дубликат Как получить количество дней между двумя датами в JavaScript? или Как рассчитать разницу дат в javascript. Единственная разница заключается в разрешении разницы во времени, а не в днях.   -  person RobG    schedule 25.02.2017

Ответы (2)


arrow_upward
12
arrow_downward

В вашем коде у вас есть:

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

Теперь вы можете получить разницу между тогда и сейчас, используя:

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

Здесь много вопросов и ответов о таймерах и разнице в датах, поищите.

person RobG    schedule 25.02.2017

arrow_upward
0
arrow_downward

Вы действительно должны использовать 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"
person Ang    schedule 25.02.2017
comment
Назначение OP заключается не в том, как использовать moment.js, а в том, как вычислить разницу между двумя датами. - person RobG; 25.02.2017