Countdown Hours Minutes Seconds - javascript

I'd like to create a countdown that count every hours, minutes, seconds remaining to 00:00:00 on July 13th at 12AM Miami time.
I'd like to addapt that code snippet and i struggle with calculs.
How shoud i adapt that code snippet for me to display hours, minutes, seconds instead of days, hours, minutes, seconds ?
How should i write the date for it to be 00:00:00 on July 13th at 12AM Miami time ?
What should i try next ?
Thanks.
<p id="demo"></p>
<script>
// Set the date we're counting down to
var countDownDate = new Date("Jan 5, 2022 15:37:25").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("demo").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
</script>
-- WayneOS code snipped modification
// Format output-string
var outputHours = (hours < 10 ? '0' + hours : hours);
var outputMinutes = (minutes < 10 ? '0' + minutes : minutes);
var outputSeconds = (seconds < 10 ? '0' + seconds : seconds);
// Display the result in the element with id="demo"
if (distance > 0)
document.getElementById("hours").innerHTML = outputHours;
document.getElementById("minutes").innerHTML = outputMinutes;
document.getElementById("seconds").innerHTML = outputSeconds;
else
document.getElementById("hours").innerHTML = "EXPIRED";
}, 1000);
```

You could use a loop to calculate the hours, minutes and seconds until distance is smaller than 1000. For it to end on Jul 13 12:00:00 use new Date("Jul 13, 2021 12:00:00 GMT-4") Here is an example.
// Set the date we're counting down to
var countDownDate = new Date("Jul 13, 2021 12:00:00 GMT-4").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 hours, minutes and seconds
var hours = 0;
var minutes = 0;
var seconds = 0;
while (true)
if (distance >= (1000*60*60)) {
hours++;
distance -= (1000*60*60);
} else
if (distance >= (1000*60)) {
minutes++;
distance -= (1000*60);
} else
if (distance >= 1000) {
seconds++;
distance -= 1000;
} else
break;
// Format output-string
var hours = (hours < 10 ? '0' + hours : hours);
minutes = (minutes < 10 ? '0' + minutes : minutes);
seconds = (seconds < 10 ? '0' + seconds : seconds);
// Display the result in the element with id="demo"
if (distance > 0) {
document.getElementById("hours").innerHTML = hours;
document.getElementById("minutes").innerHTML = minutes;
document.getElementById("seconds").innerHTML = seconds;
} else
document.getElementById("hours").innerHTML = "EXPIRED";
}, 1000);
<div id="hours"></div>
<div id="minutes"></div>
<div id="seconds"></div>

If you have days, you can calculate the hours (days * 24 plus remaining hours). Here a little refactoring of your code. It uses setTimeout (more control and counting starts instantly) and a separate function to calculate the time units. See also.
Concerning the Miami time zone, you can create the date using timezone 'America/New_York'.
const getNextJuly13 = () => {
const now = new Date();
const miamiTime = new Date(`${
+(now.getMonth() > 6 && now.getDate() >= 13) + now.getFullYear()}/07/13 00:00`)
.toLocaleString('en', {timeZone: 'America/New_York'});
return new Date( miamiTime );
};
countDown(getNextJuly13(), document.querySelector("#demo"));
function countDown(until, writeTo) {
const distance = until - new Date();
const diffs = dateDiffCalc(distance);
const timeInfo4Demo = `\n\n=> Until ${
until.toLocaleString()} (your TZ: ${
Intl.DateTimeFormat().resolvedOptions().timeZone})\n${
JSON.stringify(diffs, null, 2)}`;
writeTo.textContent = `${diffs.totalHours}h ${
diffs.minutes}m ${diffs.seconds}s${timeInfo4Demo}`;
return distance >= 0
? setTimeout(() => countDown(until, writeTo), 1000)
: writeTo.textContent = "EXPIRED";
};
function dateDiffCalc(milliseconds) {
const secs = Math.floor(milliseconds / 1000);
const mins = Math.floor(secs / 60);
const hours = Math.floor(mins / 60);
const days = Math.floor(hours / 24);
return {
days,
hours: hours % 24,
totalHours: (days * 24) + (hours % 24),
minutes: mins % 60,
seconds: secs % 60,
};
}
<pre id="demo"></pre>

Related

How to make countdown start every eight hours?

I wonder how to make countdown start every 8 hours? for example
the puzzle starts at 10 pm next is 6 am, and next 2 pm.
I have javascript like this
<script>
var countDownDate = new Date("May 31 2020 22:00:00");
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 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 and start new countdown
if (distance < 0) {
clearInterval(x);
}
}, 1000);
</script>
and how to make that countDown date every 8 hours? like 10 pm, 6 am and 2 pm? Thank you.
How about wrapping it in a function that takes in a date (in ms, in this case) (countdown(date)) and then calling the function with 8+ hours once the timer is up:
// Set the date we're counting down to
var countDownDate = new Date("May 31, 2020 22:00:00").getTime();
function countdown(date) {
// 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 = date - 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);
// 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 and start new countdown
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
let newDate = date + (8 * 3600 * 1000);
countdown(newDate);
}
}, 1000);
}
countdown(countDownDate);
DEMO using initial countdown set to 3 seconds from now.
Code Explanation:
take in the initial date - can be set to anything.
Countdown until the initial date is reached.
Start a new 8-hour timer.
Example case starting date = "May 31, 2020 19:37:35".
First countdown will countdown 5 hours (from now to 19:37:35).
Second countdown will countdown 8 hours (from 19:37:35 until
03:37:35).
Third countdown will countdown 8 hours (from 3:37:35 to 11:37:35).
Try to evaluate the starting countdown time by current time, then set the start of countdown time to that time.
Something like:
var countDownDate = new Date("May 31, 2020 22:00:00");
var currentHour = countDownDate.getHours();
// 10 pm to 6 am
if(currentHour >= 22 && currentHour < 6) {
// set countdown startTime to 10 pm
countDownDate.setHours(22);
}
// 6 am to 2 pm
else if(currentHour >= 6 && currentHour < 14) {
// set countdown startTime to 6 am
countDownDate.setHours(6);
} else {
// set countdown startTime to 2 pm
countDownDate.setHours(14);
}

Javascript countdown timer not working correctly

I'm creating a javascript function to countdown a user selected value. This is my code so far.
function countdownTimeStart() {
var time = document.getElementById("test").value;
time = time.split(':');
var date = new Date();
var countDownDate = date.setHours(time[0], time[1], time[2]);
var x = setInterval(function () {
// Get to days date and time
var now = new Date().getTime();
// Find the distance between now an the count down date
/* var distance = countDownDate;*/
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);
// Output the result in an element with id="demo"
document.getElementById("demo1").innerHTML = hours + ": "
+ minutes + ": " + seconds + " ";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo1").innerHTML = "00:00:00";
}
}, 200);
}
document.querySelector("button").addEventListener(
"click",
countdownTimeStart
)
<input type = "test" id = "test" value="20:12:40">
<div id="demo1"></div>
<button>start</button>
The problem is countdown is not working properly. The count down time start from another time instead of start from 20:12:40 which comes from input tag.
Please help me to solve this.
if you would like to count down a given time the following should work:
var time = document.getElementById("test").value;
time = time.split(':');
var date = new Date();
var countDownDate = date.setHours(time[0], time[1], time[2]);
function countdownTimeStart() {
var x = setInterval(function () {
// set hours, minutes and seconds, decrease seconds
var hours = time[0];
var minutes = time[1];
var seconds = time[2]--;
// if seconds are negative, set them to 59 and reduce minutes
if (time[2] == -1) {
time[1]--;
time[2] = 59
}
// if minutes are negative, set them to 59 and reduce hours
if (time[1] == -1) {
time[0]--;
time[1] = 59
}
// Output the result in an element with id="demo"
// add leading zero for seconds if seconds lower than 10
if (seconds < 10) {
document.getElementById("demo").innerHTML = hours + ": " + minutes + ": " + "0" + seconds + " ";
} else {
document.getElementById("demo").innerHTML = hours + ": " + minutes + ": " + seconds + " ";
}
}, 1000);
}
document.querySelector("button").addEventListener(
"click",
countdownTimeStart
)
<input type = "text" id = "test" value="20:00:01">
<div id="demo"></div>
<button>start</button>
Just set the countDownDate to the current time plus the number of hours, minutes, and seconds into the future you require.
var countDownDate = new Date( date.getTime()
+ parseInt(time[0])*(1000 * 60 * 60) //hours
+ parseInt(time[1])*(1000 * 60) //minutes
+ parseInt(time[2])*1000 ); //seconds

jQuery Countdown get time until 10:00 am today or tomorrow

I need a little script and I am a little confused.
I want to use this plugin: http://keith-wood.name/countdown.html
Goal: Have a Countdown, that counts from now to 10:00 am - if it's 0-9:59:59 am count to 10 o'clock today if it's after 10:00:00 count to 10:00 tomorrow.
Is that understandable?
Here's what I need with javascript / jquery (this will not work, i know):
var currentDate = new Date(new Date().getTime());
var hours = currentDate.getHours();
var endTime;
if(hours >= 10){
endTime = give me next day 10:00
} else {
endTime = give me this day 10:00
}
$("#countdown").countdown({until: endTime, format: 'HMS'});
The following should work (console.log() was added for testing purposes). Beware that it will use the timezone of the browser instead of UTC time.
var currentDate = new Date(new Date().getTime());
var hours = currentDate.getHours();
var endTime = new Date(currentDate);
endTime.setMinutes(0);
endTime.setSeconds(0);
endTime.setHours(10);
if(hours >= 10){
endTime.setDate(endTime.getDate() + 1);
}
console.log(endTime);
$("#countdown").countdown({until: endTime, format: 'HMS'});
You can handle it this way.
currentDate.setHours(10,00,00);
if(hours >= 10){
endTime = currentDate.AddDays(1);
}
This is the function I use for my website:
function countDown(id, date = "Jan 5 2018") {
var int = setInterval(function() {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now an the count down date
var distance = date - 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(id).innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById(id).innerHTML = "00d 00h 00m 00s";
}
}, 1000);
return int;
}
In the date parameter, you need to enter your date and hour (ex. Jan 1, 2018 00:00:00) and in the id parameter the id selector (not '#myid' but only the name 'myid').
I hope this can be useful.
You can see it in action here
If you need the next day then increment the current date, then pass year, month, day and hours (static 10) to create the end date.
$(function() {
var currentDate = new Date();
var hours = currentDate.getHours();
var day;
if(hours >= 10){
day = currentDate.getDate() + 1;
} else {
day = currentDate.getDate();
}
var endTime = new Date(currentDate.getFullYear(), currentDate.getMonth(), day, 10);
$("#countdown").countdown({until: endTime, format: 'HMS'});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-countdown/2.0.2/jquery.plugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-countdown/2.0.2/jquery.countdown.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-countdown/2.0.2/jquery.countdown.min.css" />
<div id='countdown'></div>

Countdown Timer Problems

I have been looking for a count down timer on google and can't seem to find one.
I was just wondering if anyone would be able to help.
I got given one but it displays the wrong times.
I want it to display days, hours, minutes and seconds left.
heres what I need the timer on
http://pastebin.com/fQjyRFXw
It already has the timer code there but it's all wrong, any help would be great, thank you
If it's helps here's a snippet of the Java code
var count = <?= $time['a_time'] ?>;
var counter = setInterval(timer, 1000); //1000 will* run it every 1 second
function timer() {
count = count - 1;
if(count == -1) {
clearInterval(counter);
return;
}
var seconds = count % 60;
var minutes = Math.floor(count / 60);
var hours = Math.floor(minutes / 60);
minutes %= 60;
hours %= 60;
document.getElementById("clock").innerHTML = hours + "hours " + minutes + "minutes and " + seconds + " seconds left";
}
Ok I see your problem. The a_time stored in database is an Unix timestamp, thus when you are counting down, you need to know how long is between now and a_time instead of only a_time.
Try this:
var count = <?= $time['a_time'] ?>;
var now = Math.floor(new Date().getTime() / 1000);
count = count - now;
var counter = setInterval(timer, 1000); //1000 will* run it every 1 second
function timer() {
count = count - 1;
if(count == -1) {
clearInterval(counter);
return;
}
var seconds = count % 60;
var minutes = Math.floor(count / 60);
var hours = Math.floor(minutes / 60);
var days = Math.floor(hours / 24);
minutes %= 60;
hours %= 24;
document.getElementById("clock").innerHTML = days + "days " + hours + "hours " + minutes + "minutes and " + seconds + " seconds left";
}
Why not use one of the man examples on codepen such as this beautiful one
http://codepen.io/anon/pen/VeLWdz ?
(function (e) {
e.fn.countdown = function (t, n) {
function i() {
eventDate = Date.parse(r.date) / 1e3;
currentDate = Math.floor(e.now() / 1e3);
if (eventDate <= currentDate) {
n.call(this);
clearInterval(interval)
}
seconds = eventDate - currentDate;
days = Math.floor(seconds / 86400);
seconds -= days * 60 * 60 * 24;
hours = Math.floor(seconds / 3600);
seconds -= hours * 60 * 60;
minutes = Math.floor(seconds / 60);
seconds -= minutes * 60;
days == 1 ? thisEl.find(".timeRefDays").text("day") : thisEl.find(".timeRefDays").text("days");
hours == 1 ? thisEl.find(".timeRefHours").text("hour") : thisEl.find(".timeRefHours").text("hours");
minutes == 1 ? thisEl.find(".timeRefMinutes").text("minute") : thisEl.find(".timeRefMinutes").text("minutes");
seconds == 1 ? thisEl.find(".timeRefSeconds").text("second") : thisEl.find(".timeRefSeconds").text("seconds");
if (r["format"] == "on") {
days = String(days).length >= 2 ? days : "0" + days;
hours = String(hours).length >= 2 ? hours : "0" + hours;
minutes = String(minutes).length >= 2 ? minutes : "0" + minutes;
seconds = String(seconds).length >= 2 ? seconds : "0" + seconds
}
if (!isNaN(eventDate)) {
thisEl.find(".days").text(days);
thisEl.find(".hours").text(hours);
thisEl.find(".minutes").text(minutes);
thisEl.find(".seconds").text(seconds)
} else {
alert("Invalid date. Example: 30 Tuesday 2013 15:50:00");
clearInterval(interval)
}
}
var thisEl = e(this);
var r = {
date: null,
format: null
};
t && e.extend(r, t);
i();
interval = setInterval(i, 1e3)
}
})(jQuery);
$(document).ready(function () {
function e() {
var e = new Date;
e.setDate(e.getDate() + 60);
dd = e.getDate();
mm = e.getMonth() + 1;
y = e.getFullYear();
futureFormattedDate = mm + "/" + dd + "/" + y;
return futureFormattedDate
}
$("#countdown").countdown({
date: "1 April 2017 09:00:00", // Change this to your desired date to countdown to
format: "on"
});
});

JavaScript timer to count down from a certain time for a number of hours

I have created a countdown timer. The problem is, I am wanting it to count down from midnight clock 00:00:00 until clock 17:00:00.
I have made the timer count down starting at 17 hours 00 minutes 00 seconds and it works a treat, but I need a way to take off the time from 00:00:00 to present from the 17 hours.
Here is my JS code
function startTimer(duration, display) {
var start = Date.now(),
diff,
hours,
minutes,
seconds;
function timer() {
// get the number of seconds that have elapsed since
// startTimer() was called
diff = duration - (((Date.now() - start) / 1000) | 0);
// Setting and displaying hours, minutes, seconds
hours = (diff / 360) | 0;
minutes = (diff / 60) | 0;
seconds = (diff % 60) | 0;
hours = hours < 10 ? "0" + hours : hours;
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = hours + ":" + minutes + ":" + seconds;
if (diff <= 0) {
// add one second so that the count down starts at the full duration
// example 17:00:00 not 16:59:59
start = Date.now() + 1000;
}
};
// don't want to wait a full second before the timer starts
timer();
setInterval(timer, 1000);
}
window.onload = function () {
var timeLeft = 3600 * 17,
display = document.querySelector('#time');
startTimer(timeLeft, display);
};
Here is my HTML code:
<div>Order by: <span id="time"></span> for Next Day Delivery.</div>
My thoughts were to get the timeLeft = 3600 * 17 and take off the diff.
Here is your corrected code : it was easier to save the timestamp of 17h of the current day (next day if we are after 17h) and compare it to the current timestamp. And to calculate the number of hours left, you have to divide the number of seconds by 3600 (60*60) and not 360
function startTimer(display) {
var date = new Date();
var h17 = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 17);
if(date.getHours() >= 17) {
h17.setDate(h17.getDate()+1);
}
h17 = h17.getTime();
var diff,
hours,
minutes,
seconds;
function timer() {
diff = (((h17 - Date.now()) / 1000) | 0);
// Setting and displaying hours, minutes, seconds
hours = (diff / 3600) | 0;
minutes = ((diff % 3600) / 60) | 0;
seconds = (diff % 60) | 0;
hours = hours < 10 ? "0" + hours : hours;
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = hours + ":" + minutes + ":" + seconds;
};
timer();
setInterval(timer, 1000);
}
window.onload = function () {
var timeLeft = 3600 * 17,
display = document.querySelector('#time');
startTimer(display);
};
<div>Order by: <span id="time"></span> for Next Day Delivery.</div>
jsFiddle
PS : I didn't test if the function work correctly after 17h but it should

Categories