Develop Reference

How to make countdown time after 0 0 0 0 back to countdown again in javascript?

I just want to know how to make countdown after 0 0 0 0 its directly back to 23:59:59 so i have a problem when i try to create countdown function when its expired it will go to -0d -0h -0m -1s , -0d -0h -0m -2s but when i refresh it back to 23.59.58 , 23,59,57. i just want to know after clear interval it direcy go to 23.59.59 not -0d -0h -0m -0s . this is my script
countdown.js
function warTime2(countDownDate) {
var countDownDate = new Date();
countDownDate.setHours(14);
countDownDate.setMinutes(0);
countDownDate.setSeconds(0);
var now = new Date();
if (now.getHours() < countDownDate.getHours()) {
countDownDate = countDownDate;
} else if (countDownDate.getHours() <= now.getHours()) {
countDownDate.setDate(countDownDate.getDate() + 1);
}
var x = setInterval(function () {
var now = new Date();
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
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);
if (hours < 10) {
hours = "0" + hours;
}
if (minutes < 10) {
minutes = "0" + minutes;
}
if (seconds < 10) {
seconds = "0" + seconds;
}
document.getElementById("second_chip_war").innerHTML =
"02:00 PM War Start in " + hours + ":" + minutes + ":" + seconds;
if (distance < 0) {
clearInterval(x);
let newDate = countDownDate + 8 * 3600 * 1000;
warTime2(newDate);
}
}, 1000);
}
Thank you, glad to hear if you want to help me

You need to check whether distance is less than 0 when you first assign it, and if so, increase countDownDate by a day before recomputing distance and continuing the function:
function warTime2(countDownDate) {
var countDownDate = new Date();
countDownDate.setHours(14);
countDownDate.setMinutes(0);
countDownDate.setSeconds(0);
var now = new Date();
if (now.getHours() < countDownDate.getHours()) {
countDownDate = countDownDate;
} else
if (countDownDate.getHours() <= now.getHours()) {
countDownDate.setDate(countDownDate.getDate() + 1);
}
var x = setInterval(function() {
var now = new Date();
var distance = countDownDate - now;
if (distance < 0) {
// countdown complete, add a day to countDownDate and restart
countDownDate.setDate(countDownDate.getDate() + 1);
distance = countDownDate - now;
}
// Time calculations for days, hours, minutes and seconds
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);
if (hours < 10) {
hours = "0" + hours;
}
if (minutes < 10) {
minutes = "0" + minutes;
}
if (seconds < 10) {
seconds = "0" + seconds;
}
document.getElementById("second_chip_war").innerHTML = "02:00 PM War Start in " + hours + ":" +
minutes + ":" + seconds;
}, 1000);
}
warTime2('2020-06-21');
<div id="second_chip_war"></div>

Set a GMT on a countdown script

How can I set a GMT to date.Now()?
var countDownDate = getNextDayOfWeek(new Date(),0,21);
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now an 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)).toString();
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)).toString();
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)).toString();
var seconds = Math.floor((distance % (1000 * 60)) / 1000).toString();
// Add 0 when value are < 10
hours = (hours < 10) ? "0"+hours : hours;
minutes = (minutes < 10) ? "0"+minutes : minutes;
seconds = (seconds < 10) ? "0"+seconds : seconds;
var grb = jq("#grb");
// Display the result in the element with id="grb"
grb.html(days + "d " + hours + "h " + minutes + "m " + seconds + "s");
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
var one_hour = -60 * -60 * -1000;
if(distance < one_hour){
grb.html("GRB is finished!");
}else{
grb.html("GRB is open!");
}
}
}, 1000);
});
It keeps using the time of your computer, and I want to use a timezone to be stored everytime.
I have tried TimeZoneOffset, didn't worked, any help would be appreciated.

please see this
var now = new Date();
var nowUTC = new Date(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate(), now.getUTCHours(), now.getUTCMinutes(), now.getUTCSeconds());
var distance = end - nowUTC;

How can i add the exact time to the date on countdown timer?

How can i add the exact time like "19:30" to the counter and still show "Tomorrow", "Today" and "Expired" messages?
Because when i add "19:30:00" the counter is not accurate.
When i use "Math.floor" instead of "Math.ceil" the counter is accurate but the messages not showen at the time they should.
<!DOCTYPE HTML>
<html>
<head>
<style>
p {
text-align: center;
font-size: 60px;
}
</style>
</head>
<body>
<p id="demo"></p>
<script>
// Set the date we're counting down to
var countDownDate = new Date("Dec 18, 2017 19:30:00").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now an the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.ceil(distance / (1000 * 60 * 60 * 24));
var hours = Math.ceil((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.ceil((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.ceil((distance % (1000 * 60)) / 1000);
// Output the result in an element with id="demo"
document.getElementById("demo").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
// If the count down is over, write some text
console.log(days);
if (days === 1) {
clearInterval(x);
document.getElementById("demo").innerHTML = "TOMORROW";
}
if (days === 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "TODAY";
}
if (days < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
</script>
</body>
</html>

This should work
// Set the date we're counting down to
var countDownDate = new Date("Dec 3, 2017 19:30:00");
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time
var now = new Date();
// Find the distance between now an the count down date
var distance = countDownDate.getTime() - now.getTime();
// 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);
// Output the result in an element with id="demo"
document.getElementById("demo").innerHTML = days + "d " + hours + "h " +
minutes + "m " + seconds + "s ";
// If the count down is over, write some text
console.log(days);
var tomorrow = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1);
if (tomorrow.getFullYear() == countDownDate.getFullYear() && tomorrow.getMonth() == countDownDate.getMonth() && tomorrow.getDate() == countDownDate.getDate()) {
clearInterval(x);
document.getElementById("demo").innerHTML = "TOMORROW";
} else if (now.getFullYear() == countDownDate.getFullYear() && now.getMonth() == countDownDate.getMonth() && now.getDate() == countDownDate.getDate()) {
clearInterval(x);
document.getElementById("demo").innerHTML = "TODAY";
} else if (countDownDate.getTime() < now.getTime()) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
p {
text-align: center;
font-size: 60px;
}
<p id="demo"></p>

Dynamic JavaScript time counter

I'm trying to make a dynamic time counter/timer in JavaScript.
Why dynamic? Well I would like to display days/hours/minutes/seconds if the time stamp is bigger enough to display days or hours and so on.
In case the timestamp is less than a day I would like that the script dynamically displays only the hours.
1D 0H 59M 59S
23H 59M 59S
59M 59S
59S
MESSAGE
Here is the code I try to make it work.
<center>
<script>
var countDownDate = new Date("2017-11-17T20:10:30Z").getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var distance = countDownDate - now;
// Seconds
if (distance < 1000){
document.getElementById("count1").innerHTML = seconds + "s ";
}
// Minutes
if (distance < 60000){
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("count1").innerHTML = minutes + "m " + seconds + "s ";
}
// Hours
if (distance < 3600000){
var hours = Math.floor(distance / (1000 * 60 * 60 * 1));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("count1").innerHTML = hours + "h " + minutes + "m " + seconds + "s ";
}
// Days
if(distance > 3600001){
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);
document.getElementById("count1").innerHTML = days + "d " + hours + "h " + minutes + "m " $
}
if (distance < 0) {
clearInterval(x);
document.getElementById("count1").innerHTML = "You will be redirected now";
}
}, 1000);
</script>
<p id="count1"></p>
</center>
I think that my problem is related with math confusion in milliseconds but I can't find out what is wrong.

These changes made it work for me:
<center>
<script>
var countDownDate = new Date("2017-11-17T21:30:30Z").getTime();
var x = setInterval(function () {
var now = new Date().getTime();
var distance = countDownDate - now;
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);
// Seconds
if (distance <= 60000) {
document.getElementById("count1").innerHTML = seconds + "s ";
}
// Minutes
else if (distance <= 3600000) {
document.getElementById("count1").innerHTML = minutes + "m " + seconds + "s ";
}
// Hours
else if (distance <= 86400000) {
document.getElementById("count1").innerHTML = hours + "h " + minutes + "m " + seconds + "s ";
}
// Days
else if (distance > 86400000) {
document.getElementById("count1").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
}
if (distance < 0) {
clearInterval(x);
document.getElementById("count1").innerHTML = "You will be redirected now";
}
}, 1000);
</script>
<p id="count1"></p>
I changed the milliseconds accordingly, and in your days you had a "$" so i changed that.
I changed the date around and got the effect I think you were going for.

It looks like you're doing this the absolute hardest way possible, and also reinventing the wheel. There are a lot of great references to built in javascript functions (like MDN) that you should really take a look at.
If you're doing this as an intellectual exercise think about restructuring your code into something like this (obviously just psuedocode):
let dateHTML = "";
if (time1.seconds - time2.seconds > 0) {
dateHTML = (time1.seconds - time2.seconds) + "s";
}
if (time1.minutes-time2.minutes > 0) {
dateHTML = (time1.minutes-time2.minutes) + "m " + dateHTML;
}
//So on and so forth for the maximum interval you want to account for.
document.getElementById("count1").innerHTML = dateHTML;
You can probably get really clever with null operators, putting the time unit distances into an array to clean up the syntax and avoid doing calculations twice etc. but this should cut down on what you're doing significantly.
Do keep in mind that there are JS libraries built to do this exact sort of thing really well, so if you're working on a "real" project consider that.

Here is the whole script in working order in case somebody else need it:
The whole script is meant to be reused multiply times in a single page by changing the ID in the $FD['id'] array variable and copy pasting the function that prints/echoing the function content.
PHP FUNCTION INCLUDE FILE (count.php):
<?php
// JS Date format
// 2017-11-14T12:00:00Z
function counter($FD){
$date=$FD['date'];
$id=$FD['id'];
$display_start_1=$FD['display_start_1'];
$display_start_2=$FD['display_start_2'];
$display_end=$FD['display_end'];
echo $counter=<<<a
<center>
<script>
var countDownDate$id = new Date("$date").getTime();
var x$id = setInterval(function () {
var now$id = new Date().getTime();
var distance$id = countDownDate$id - now$id;
var days$id = Math.floor(distance$id / (1000 * 60 * 60 * 24));
var hours$id = Math.floor((distance$id % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes$id = Math.floor((distance$id % (1000 * 60 * 60)) / (1000 * 60));
var seconds$id = Math.floor((distance$id % (1000 * 60)) / 1000);
// Seconds
if (distance$id <= 60000) {
document.getElementById("count$id").innerHTML ="$display_start_1 " + seconds$id + "s " + " $display_start_2";
}
// Minutes
else if (distance$id <= 3600000) {
document.getElementById("count$id").innerHTML ="$display_start " + minutes$id + "m " + seconds$id + "s " + " $display_start_2";
}
// Hours
else if (distance$id <= 86400000) {
document.getElementById("count$id").innerHTML ="$display_start_1 " + hours$id + "h " + minutes$id + "m " + seconds$id + "s " + " $display_start_2";
}
// Days
else if (distance$id > 86400000) {
document.getElementById("count$id").innerHTML ="$display_start_1 " + days$id + "d " + hours$id + "h " + minutes$id + "m " + seconds$id + "s " + " $display_start_2";
}
if (distance$id < 0) {
clearInterval(x$id);
document.getElementById("count$id").innerHTML = "$display_end";
}
}, 1000);
</script>
<p id="count$id"></p>
a;
}
?>
PHP DISPLAY FILE (count_display.php):
<?php
$now = time();
// Simulation of utc time (-1 hour +1 minute)
// By modifying the amount of seconds you set/define the amount of seconds that will counted down
$timestamp_new=$now-3600+10;
// Time formattig for JavaScript code
$date_new=date('Y-m-d\TH:i:s\Z', $timestamp_new);
// Include the function file once only
include'count.php';
// Define variables for the first counter
$FD1['date']="$date_new";
$FD1['id']='1';
$FD1['display_start_1']="Please wait for another:<br >";
$FD1['display_start_2']="<br />We are preparing your playground for you.";
$FD1['display_end']="Your Playground is ready at:<br /><a href='http://555.555.555.555'>Game server 01</a>";
counter($FD1);
// Define variables for the second counter
$timestamp_new=$now-3600+15;
$date_new=date('Y-m-d\TH:i:s\Z', $timestamp_new);
// The second count down timer
$FD2['date']="$date_new";
$FD2['id']='2';
$FD2['display_start_1']="Please wait for another:<br >";
$FD2['display_start_2']="<br />We are preparing your playground for you.";
$FD2['display_end']="Your Playground is ready at:<br /><a href='http://100.100.100.100'>Game server 02</a>";
counter($FD2);
// And so on ....
?>
Hoping that this will save a lot of time to somebody else ;)
Have a great life (you who can and know how) ;)

JavaScript countdown timer recursive call for each day

I am trying to make a countdown timer which displays the amount of time remaining for a customer to purchase in order to receive same day shipping.
For example, if they purchase before 15:30 the timer will say something like order within 30 minutes for shipping today (if it was 15:00).
However, when it reaches 15:30, I want it to say order within 23 hours and 59 minutes to receive shipping tomorrow. Then obviously when it reaches midnight it will turn to today. Alternatively it can just display the day/date so today/tomorrow won't matter.
I know I need to call the function again looking at tomorrows date but I'm not very handy with javascript so cannot figure it out.
Can someone help?
// Set the date we're counting down to
var nowDate = new Date();
var countDownDate = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 15, 30, 0, 0);
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now an the count down date
var distance = countDownDate - now;
// Time calculations for 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"
if (hours >= 1) {
document.getElementById("shipping-countdown").innerHTML = "Order within " + hours + "h "
+ minutes + "m " + seconds + "s " + "to have your order shipped on " // date of shipment;
}
else if (hours < 1 && minutes < 1) {
document.getElementById("shipping-countdown").innerHTML = "Order within " + seconds + "s "
+ "to have your order shipped on " // date of shipment;
}
else {
document.getElementById("shipping-countdown").innerHTML = "Order within " + minutes + "m "
+ seconds + "s " + "to have your order shipped on " // date of shipment;
}
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
// Start again but looking at tomorrows date
}
// If the count down is finished, write some text
if (nowDate.getDay() == 0 || nowDate.getDay() == 6) {
clearInterval(x);
document.getElementById("shipping-countdown").innerHTML = "Order within " + days + "d "
+ hours + "h "
+ minutes + "m " + seconds + "s " + "to have your order shipped on " // Start of the week;
}
}, 1000);
<!-- Display the countdown timer in an element -->
<p id="shipping-countdown"></p>

You don't need to clear the setInterval function. Just reset the new target date while keeping it alive. You also had some issues with the countdown going into the negatives which I fixed by moving the distance check and resetting the distance if it is under 1 second.
// Set the date we're counting down to
var nowDate = new Date();
var countDownDate = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 11, 2, 50, 0);
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now an the count down date
var distance = countDownDate - now;
if (distance < 1) {
countDownDate = countDownDate.setDate(countDownDate.getDate()+1);
distance = countDownDate - now;
}
// Time calculations for 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"
if (hours >= 1) {
document.getElementById("shipping-countdown").innerHTML = "Order within " + hours + "h "
+ minutes + "m " + seconds + "s " + "to have your order shipped on " // date of shipment;
}
else if (hours < 1 && minutes < 1) {
document.getElementById("shipping-countdown").innerHTML = "Order within " + seconds + "s "
+ "to have your order shipped on " // date of shipment;
}
else {
document.getElementById("shipping-countdown").innerHTML = "Order within " + minutes + "m "
+ seconds + "s " + "to have your order shipped on " // date of shipment;
}
// If the count down is finished, write some text
if (nowDate.getDay() == 0 || nowDate.getDay() == 6) {
clearInterval(x);
document.getElementById("shipping-countdown").innerHTML = "Order within " + days + "d "
+ hours + "h "
+ minutes + "m " + seconds + "s " + "to have your order shipped on " // Start of the week;
}
}, 1000);
<!-- Display the countdown timer in an element -->
<p id="shipping-countdown"></p>

I have managed to achieve this with the following code, figured out I was along the wrong lines and could simply just adjust the countDownDate variable.
// Set the date we're counting down to
var nowDate = new Date();
var countDownDate = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 15, 30, 0, 0);
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now an the count down date
var distance = countDownDate - now;
// Time calculations for 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);
// If the count down is finished, write some text
if (countDownDate.getDay() == 6) {
countDownDate.setDate(countDownDate.getDate()+2);
}
if (days >= 1) {
document.getElementById("shipping-countdown").innerHTML = "Order within " + days + "d " + hours + "h "
+ minutes + "m " + seconds + "s " + "to have your order shipped on " + countDownDate;
}
else if (hours >= 1) {
document.getElementById("shipping-countdown").innerHTML = "Order within " + hours + "h "
+ minutes + "m " + seconds + "s " + "to have your order shipped on " + countDownDate.getDate() + "/"
+ (countDownDate.getMonth()+1) + "/" + countDownDate.getFullYear();
}
else if (minutes >= 1) {
document.getElementById("shipping-countdown").innerHTML = "Order within " + minutes + "m " + seconds + "s "
+ "to have your order shipped on " + countDownDate.getDate() + "/"
+ (countDownDate.getMonth()+1) + "/" + countDownDate.getFullYear();
}
else {
document.getElementById("shipping-countdown").innerHTML = "Order within " + seconds + "s "
+ "to have your order shipped on " + countDownDate.getDate() + "/"
+ (countDownDate.getMonth()+1) + "/" + countDownDate.getFullYear();
}
// If the count down is finished
if (distance < 0) {
countDownDate.setDate(countDownDate.getDate()+1);
}
}, 1000);
<!-- Display the countdown timer in an element -->
<p id="shipping-countdown"></p>