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>```
Advertisement
Answer
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.
Instead, pick a UTC-based point in time, and pass it in ISO 8601 / RFC 3339 format.
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")
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.