Проблема с часовым поясом таймера обратного отсчета Javascript
возможно ли, чтобы таймер обратного отсчета был одинаковым для всех людей, независимо от их часового пояса, когда я устанавливаю дату, таймер будет показывать разные значения в зависимости от часового пояса, и я хочу, чтобы они синхронизировались, чтобы все получали одинаковое время, потому что теперь «ГОТОВО» будет отображаться в разное время в зависимости от страны.
Вот код Спасибо за любую помощь! :)
<head>
<title>
TITLE TEXT
</title>
<meta charset = "utf-8">
<meta name = "Description" CONTENT = "Text">
<link rel = "icon" type = "image/png" href = "" />
<style>
.dropdown {
width: 600px;
padding: 0px;
padding-top:100px;
padding-bottom:150px;
}
table {
border-width: 70px;
border-color: black;
background-color: #DCF5F1;
}
.dropdown {
margin: auto;
}
th {
border: 2px solid black;
}
td {
border: 2px groove black;
}
a {
text-decoration: none;
color:black;
}
a:hover {
color: grey;
text-decoration: underline;
}
table {
width: 600px;
table-layout: fixed;
font-size: 20px;
}
table td {
padding: 20px;
font-weight: bold;
font-family: arial;
}
#timer .endsoon {
color: red;
}
</style>
</head>
<body>
<div class = "dropdown">
<table id = "timer">
<tbody>
<tr>
<td class = "headtext">TITLE</td>
<td class = "headtext">TIMER</td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
var arr = [
// Date...................Link..............Title
['Dec 16, 2020 01:00:00', 'www.google.com', 'text'],
['Dec 16, 2020 01:00:00', 'www.google.com', 'text'],
['Dec 16, 2020 05:00:00', 'www.google.com', 'text'],
['Dec 16, 2020 05:00:00', 'www.google.com', 'text'],
['Dec 16, 2020 05:00:00', 'www.google.com', 'text'],
['Dec 16, 2020 05:00:00', 'www.google.com', 'text'],
['Dec 16, 2020 05:00:00', 'www.google.com', 'text'],
['Dec 16, 2020 05:00:00', 'www.google.com', 'text'],
['Dec 16, 2020 05:00:00', 'www.google.com', 'text'],
['Dec 16, 2020 05:00:00', 'www.google.com', 'text'],
['Dec 16, 2020 05:00:00', 'www.google.com', 'text'],
['Dec 16, 2020 05:00:00', 'www.google.com', 'text'],
['Dec 16, 2020 03:10:25', 'www.google.com', 'text'],
['Dec 16, 2020 03:10:25', 'www.google.com', 'text'],
['Dec 16, 2020 03:10:25', 'www.google.com', 'text'],
['Dec 16, 2020 03:10:25', 'www.google.com', 'text'],
['Dec 16, 2020 03:10:25', 'www.google.com', 'text'],
];
// Remove after 5min
var remAft = 10;
// Get element with ID "timer"
var wrap = document.querySelector('#timer tbody');
// For loop Array "arr"
for (var i = 0; i < arr.length; i++) {
if (checkDate(arr[i][0])) {
// Adds the elements of the table with filled in information
wrap.innerHTML += '<tr><td><a href = "' + arr[i][1] + '">' + arr[i][2] + '</a></td><td id = "' + 'demo' + (i + 1) + '"></td></tr>'
// Invokes the function by passing as arguments Date and ID
new myTimers(arr[i][0], 'demo' + (i + 1));
}
}
function checkDate(tim) {
var countDownDate = new Date(tim).getTime();
var now = new Date().getTime();
var distance = countDownDate - now;
if (distance > -60 * 1000 * remAft) { return true; } else { return false; }
}
function myTimers(tim, ele) {
// Set the date we're counting down to
var countDownDate = new Date(tim).getTime();
// Update the count down every 1 second
var x = setInterval(function () {
// Get today's date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display the result in the element with id = "demo"
document.getElementById(ele).innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
// If the count down is finished, write some text
if (distance < 0) {
if (distance > -60 * 1000 * remAft) {
document.getElementById(ele).innerHTML = "DONE";
document.getElementById(ele).classList.add('dropped');
document.getElementById(ele).style.color = 'tomato';
document.getElementById(ele).style.textDecoration = "line-through";
} else {
clearInterval(x);
var chekEl = document.getElementById(ele);
if (chekEl) {
chekEl.parentElement.remove();
}
}
}
// If days is 0 add class 'endsoon'
if (days === 0) {
document.getElementById(ele).classList.add('endsoon');
}
}, 1000);
}
</script>
</html>```
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы можете использовать getTimezoneOffset для дальнейшей настройки времени, чтобы каждый мог использовать скажем время UTC. (Смещение часового пояса — это разница в минутах между UTC и местным временем.)
var offset = new Date().getTimezoneOffset();
console.info(offset);
По сути, вы строите свое целевое время как:
new Date("Dec 16, 2020 03:10:25")
Это нестандартный формат, и он будет интерпретироваться в терминах местного времени большинством браузеров.
Вместо этого выберите момент времени в формате UTC и передайте его в формате ISO 8601/RFC 3339.
Например, если вы имели в виду 3:10:25 в часовом поясе со смещением UTC+1, вычтите 1 час, чтобы получить 2:10:25 UTC, представленное следующим образом:
new Date("2020-12-16T02:10:25Z")
Используйте значения в этом формате в исходном массиве, и у всех будет одна и та же цель для обратного отсчета. Имейте в виду, что Z в конце означает UTC, поэтому не забудьте указать это. :)
В качестве альтернативы вы можете использовать местное время и локальное смещение, действующее для этого времени, вместо вычитания. Это выглядит так:
new Date("2020-12-16T03:10:25+01:00")
Вы можете использовать любую форму, в зависимости от того, что вам проще.
я не знаю, как реализовать это в моем исходном коде. Мой часовой пояс GMT +1, и мне нужно, чтобы таймеры обратного отсчета вели обратный отсчет до одного и того же времени независимо от часового пояса. Можете ли вы помочь мне добавить это в мой код?
Ваши значения даты в исходном коде, который вы показали, находятся в первом элементе массива arr. Если вы GMT+1, просто вычтите час и переформатируйте эти строки в формате YYYY-MM-DDTHH:MM:SSZ. Однако будьте осторожны в отношении изменений смещения из-за перехода на летнее время. Сейчас у вас может быть GMT+1, но это не имеет значения. Имеет значение только смещение заданной метки времени. Если вы находитесь по Гринвичу +2 или по Гринвичу +0 в какое-то другое время года, временные метки должны отражать это соответствующим образом.
Кроме того, вы можете использовать местное время и смещение местного времени. Я обновляю свой ответ, чтобы показать оба.
поэтому мне придется вручную проверять летнее время и соответствующим образом изменять смещения?
new Date("2020-12-16T03:10:25+01:00") также, эта строка кода ведет обратный отсчет до 04:10:25? так как это +01:00 ?
+01:00 — смещение от UTC. 03:10:25+01:00 означает 3:10:25 по местному времени со смещением UTC+1. Это не значит 4:10:25. Да, вам нужно будет указать правильное смещение.
привет! где в коде я могу реализовать это, чтобы он работал? часовой пояс, в котором я нахожусь, — GMT+1.