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! 🙂
JavaScript
x
181
181
1
<head> 2
<title>3
TITLE TEXT4
</title>5
<meta charset="utf-8">6
<meta name="Description" CONTENT="Text">7
<link rel="icon" type="image/png" href="" />8
<style> 9
.dropdown {10
width: 600px;11
padding: 0px;12
padding-top:100px;13
padding-bottom:150px;14
}15
16
table {17
border-width: 70px;18
border-color: black;19
background-color: #DCF5F1;20
}21
22
.dropdown {23
margin: auto;24
}25
26
th {27
border: 2px solid black;28
}29
td {30
border: 2px groove black;31
32
}33
34
a {35
text-decoration: none;36
color:black;37
38
}39
40
a:hover {41
color: grey;42
text-decoration: underline;43
}44
45
46
table {47
width: 600px;48
table-layout: fixed;49
font-size: 20px;50
}51
52
table td {53
padding: 20px;54
font-weight: bold;55
font-family: arial;56
}57
58
59
60
61
62
#timer .endsoon {63
color: red;64
}65
66
67
68
69
70
</style> 71
</head> 72
73
<body> 74
<div class="dropdown">75
<table id="timer">76
<tbody>77
<tr>78
<td class="headtext">TITLE</td>79
<td class="headtext">TIMER</td>80
81
</tr>82
</tbody>83
</table>84
</div>85
</body> 86
87
<script>88
var arr = [89
// Date...................Link..............Title90
['Dec 16, 2020 01:00:00', 'www.google.com', 'text'],91
['Dec 16, 2020 01:00:00', 'www.google.com', 'text'],92
['Dec 16, 2020 05:00:00', 'www.google.com', 'text'],93
['Dec 16, 2020 05:00:00', 'www.google.com', 'text'],94
['Dec 16, 2020 05:00:00', 'www.google.com', 'text'],95
['Dec 16, 2020 05:00:00', 'www.google.com', 'text'],96
['Dec 16, 2020 05:00:00', 'www.google.com', 'text'],97
['Dec 16, 2020 05:00:00', 'www.google.com', 'text'],98
['Dec 16, 2020 05:00:00', 'www.google.com', 'text'],99
['Dec 16, 2020 05:00:00', 'www.google.com', 'text'],100
['Dec 16, 2020 05:00:00', 'www.google.com', 'text'],101
['Dec 16, 2020 05:00:00', 'www.google.com', 'text'],102
['Dec 16, 2020 03:10:25', 'www.google.com', 'text'],103
['Dec 16, 2020 03:10:25', 'www.google.com', 'text'],104
['Dec 16, 2020 03:10:25', 'www.google.com', 'text'],105
['Dec 16, 2020 03:10:25', 'www.google.com', 'text'],106
['Dec 16, 2020 03:10:25', 'www.google.com', 'text'],107
108
];109
110
// Remove after 5min111
var remAft = 10;112
113
// Get element with ID "timer"114
var wrap = document.querySelector('#timer tbody');115
// For loop Array "arr"116
for (var i = 0; i < arr.length; i++) {117
if (checkDate(arr[i][0])) {118
// Adds the elements of the table with filled in information119
wrap.innerHTML += '<tr><td><a href="' + arr[i][1] + '">' + arr[i][2] + '</a></td><td id="' + 'demo' + (i + 1) + '"></td></tr>'120
// Invokes the function by passing as arguments Date and ID121
new myTimers(arr[i][0], 'demo' + (i + 1));122
}123
}124
125
function checkDate(tim) {126
var countDownDate = new Date(tim).getTime();127
var now = new Date().getTime();128
var distance = countDownDate - now;129
if (distance > -60 * 1000 * remAft) { return true; } else { return false; }130
}131
132
function myTimers(tim, ele) {133
// Set the date we're counting down to134
var countDownDate = new Date(tim).getTime();135
136
// Update the count down every 1 second137
var x = setInterval(function () {138
139
// Get today's date and time140
var now = new Date().getTime();141
142
// Find the distance between now and the count down date143
var distance = countDownDate - now;144
145
// Time calculations for days, hours, minutes and seconds146
var days = Math.floor(distance / (1000 * 60 * 60 * 24));147
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));148
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));149
var seconds = Math.floor((distance % (1000 * 60)) / 1000);150
151
// Display the result in the element with id="demo"152
document.getElementById(ele).innerHTML = days + "d " + hours + "h "153
+ minutes + "m " + seconds + "s ";154
155
// If the count down is finished, write some text156
if (distance < 0) {157
if (distance > -60 * 1000 * remAft) {158
document.getElementById(ele).innerHTML = "DONE";159
document.getElementById(ele).classList.add('dropped');160
document.getElementById(ele).style.color = 'tomato';161
document.getElementById(ele).style.textDecoration = "line-through";162
} else {163
clearInterval(x);164
var chekEl = document.getElementById(ele);165
if (chekEl) {166
chekEl.parentElement.remove();167
}168
}169
}170
171
// If days is 0 add class 'endsoon'172
if (days === 0) {173
document.getElementById(ele).classList.add('endsoon');174
}175
176
}, 1000);177
178
}179
</script>180
</html>```181
Advertisement
Answer
You are essentially building your target time as:
JavaScript
1
2
1
new Date("Dec 16, 2020 03:10:25")2
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:
JavaScript
1
2
1
new Date("2020-12-16T02:10:25Z")2
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:
JavaScript
1
2
1
new Date("2020-12-16T03:10:25+01:00")2
You can use either form, depending on which is easier for you.