JavaScript倒数计时器时区问题 [英] Javascript countdown timer timezone problem
问题描述
是否有可能使所有人的倒数计时器相同，而不管他们的时区如何，当我输入日期时，计时器会根据时区显示不同，我希望他们同步起来，以便每个人都获得相同的时间，因为现在完成"将根据国家/地区显示在不同的时间.
is it possible to have the countdown timer same for all people regardless of their timezone, when i put a date now the timer will show different depending on the timezone, and i want them to sync up so everyone get the same time, because now the "DONE" will display at different times depending on the country.
此处是代码感谢您的帮助！:)
heres the code Thanks for any help! :)
<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>```
推荐答案
您实际上将目标时间构建为:
You are essentially building your target time as:
new Date("Dec 16, 2020 03:10:25")
这是一种非标准格式，大多数浏览器都会以当地时间来解释.
That's a non-standard format, and is going to be interpreted in terms of local time by most browsers.
相反，选择一个基于UTC的时间点，并以ISO 8601/RFC 3339格式传递它.
Instead, pick a UTC-based point in time, and pass it in ISO 8601 / RFC 3339 format.
例如，如果您在某个带有UTC + 1偏移量的时区中表示3:10:25，则减去1小时即可得到2:10:25 UTC，如下所示:
For example, if you meant 3:10:25 in a time zone with a UTC+1 offset, subtract 1 hour to get 2:10:25 UTC, represented like this:
new Date("2020-12-16T02:10:25Z")
在源数组中使用该格式的值，每个人的倒计时目标都相同.请记住，最后的 Z 表示UTC，因此请不要忘记将其包括在内.:)
Use values in that format in your source array and everyone will have the same target for the countdown. Keep in mind that the Z at the end means UTC, so don't forget to include that. :)
或者，您可以使用本地时间和对该时间有效的本地偏移量，而不是减去.看起来像这样:
Alternatively, you could use local time and the local offset that's in effect for that time, rather than subtracting. That looks like this:
new Date("2020-12-16T03:10:25+01:00")
您可以使用任一种形式，具体取决于哪种形式更容易.
You can use either form, depending on which is easier for you.
这篇关于JavaScript倒数计时器时区问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
