hope somebody can help me with this one.
And before this comes up: I did check Google, other questions and a lot of other places, but still couldn't find a solution for me - total coding noob.
That's what I'm struggling with
I have an event series with a few dates.
Now I wanted to display a countdown timer for the first date.
After this countdown reaching 0 I'd like it to start the next countdown for the next date.
Of course there will be future dates as well so I'd like to have a possibility to expand it individually.
I hoped this wouldn't be such a pain in the ... but unfortunately I already spend over 5 hours looking and searching for an already finished solution I could just copy and use. But didn't find anything, that works for me OR that I could understand and use.
So really hoping for help here and please remember - I'm a total noob and have ~ 0.0001% knowledge about coding.
So do you know a solution?
Can you point me to it?
Can you show me how I could do this?
Thanks in advance!
Set an array of dates and loop over the array checking if date is in the future, then update countdown timer and break loop. Example
<!-- HTML element where to show countdown timer -->
<p id="demo"></p>
<script>
// Target dates
let countdown_dates = [
'Jan 5, 2021 15:00:00',
'Apr 1, 2021 15:00:00',
'Jan 5, 2022 15:00:00',
]
// Currency number of milliseconds - Unix
var now = new Date().getTime();
// Loop dates
for (i = 0; i < countdown_dates.length; i++) {
// Target date in Unix
var countDownDate = new Date( countdown_dates[i] ).getTime();
// Check is in the future
if ( countDownDate > now ){
// Update the count down every 1 second
var x = setInterval(function() {
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and secondsa
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 ";
}, 1000);
// Exit loop as we only want to target next date.
break;
}
};
</script>
Related
This question already has answers here:
How to write a countdown timer in JavaScript? [closed]
(3 answers)
Closed 7 months ago.
I'm currently working on a flight entertainment system project that contains a timer that specifies how long is left in the flight.
I want to write a function that specifies a certain time such as "3 hours 20mins" and countdown from that.
I need it to run from when I open the page and reset it automatically whenever it hits 0. Its really just there for aesthetics. It can be seen in the top right of the image I attached.
Right now I just have regular text in my HTML file :
<div class="flighttime">
3H 20M
</div>
function addTime(hours, minutes, date = new Date()) {
date.setTime(date.getTime() + hours * 3600000 + minutes * 60000);
return date.getTime();
}
const time = document.getElementById('time');
const [hours, minutes] = time.textContent.split(' ').map(i => parseFloat(i));
console.log(hours, minutes)
var countDownDate = addTime(hours, minutes)
// 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 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"
time.innerHTML = hours + "H "
+ minutes + "M " + seconds + "S";
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
time.innerHTML = "EXPIRED";
}
}, 1000);
<div id="time">3H 30M</div>
I have a countdown timer that I'd like to show the exact same amount of remaining hours and minutes for every user regardless of timezone or location (days aren't important).
I'm assuming I need to target and output UTC somehow. Will I have any daylight-saving problems with this? The actual end time is not very important. Everyone seeing the same remaining time is.
I've researched similar posts here but they're a few years old and didn't find answers. Hoping a solution or newer approach is available. All programming languages considered.
// Set the date we're counting down to
var countDownDate = new Date("May 10, 2022 24:00:00").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);
// 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
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
#demo {
font: normal 20px arial
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="demo"></div>
https://jsfiddle.net/r64zp93c/
It seems Date.UTC() is what you're looking for. From the docs:
The Date.UTC() method accepts parameters similar to the Date
constructor, but treats them as UTC. It returns the number of
milliseconds since January 1, 1970, 00:00:00 UTC.
So instead of
var countDownDate = new Date("May 10, 2022 24:00:00").getTime();
You should be able to do
var countDownDate = Date.UTC(2022, 4, 10, 24, 0, 0);
(But maybe adjust the hours/day to UTC to match the specific time you need)
I am I want to select a and back date a time, add 8 hours to the timer and start a countdown based on the calculated remaining time. Basic Webpage in HTML/CSS/JS to monitor curing time of a product. I need to set the timer of 8 hours after I have mixed the resin which can be a random start time.
I can hard code the deadline time from the newDate and getTime but I'm struggling to understand how to manually enter the time and to calculate then deadline time. The actual calculation is easy enough for variable t to then start the countdown, it is the backdated start time then adding 8 hours that stumps me.
<script>
var deadline = new Date("March 25, 2021 12:34:00").getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var t = deadline - now;
var hours = Math.floor((t%(1000 * 60 * 60 * 24))/(1000 * 60 * 60));
var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((t % (1000 * 60)) / 1000);
document.getElementById("demo").innerHTML = hours + "h " + minutes + "m " + seconds + "s ";
if (t < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "Rotate";
}
}, 1000);
</script>
I want to build a webpage with some JavaScript which will count the days, hours, minutes and seconds between two events (now and LastTime). My issue is: I'm using this line var now = new Date().getTime(); to get the present time, and it looks like this method uses your machine settings to get the now variable, which is undesired because if a person outside my region access the page, the counter won't show the real time past since my JavaScript is getting theirs time zone.
I found some piece of code on the internet that actually gets the time from a given region, but I'm struggling to integrate into my code.
var now = new Date().toLocaleString("pt-BR", {timeZone: "America/Sao_Paulo"});
now = new Date(now);
<h1>Time past since the last event: </h1>
<h2 id="demo"></h2>
<script>
var lastTime = new Date("July 27, 2019 00:00:00").getTime();
setInterval(function() {
var now = new Date().getTime();
var distance = now - lastTime;
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("demo").innerHTML = days + " days, " + hours + " hours, " + minutes + " minutes and " + seconds + " seconds ";
}, 1000);
</script>
What I want is my now variable to get a especific region time ('America/New_York' for example) and make the counter do right math wherever region my page is accessed. Here's some codepen to make it easier.
Thanks in advance.
You can use moment.js functions for all your problems.
If your event times in any specific timezone(s), first of all convert them to utc value. moment.utc()
When user connect to your page, get his/her time in utc. moment.valueOf()
Calculate duration between 2 dates. moment.duration, moment.diff
Format duration how do you want. duration-format
I want to show a countdown timer for upcoming posts. I am using JavaScript with PHP to achieve it. I am passing a PHP variable value in JavaScript function. Can you see the code and help me?
My Code:
<span><i class="fa fa-calendar-o"></i> <?php echo get_the_date();?></span>
<?php $dtimer = get_the_date(); ?>
<span><i class='fa fa-calendar-o'></i><p id='timer-diff'></p></span>
<script>
// Set the date we're counting down to
var countDownDate = new Date("<?php echo $dtimer; ?>").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.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="timer-diff"
document.getElementById("timer-diff").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("timer-diff").innerHTML = "EXPIRED";
}
}, 1000);
</script>
image attached
You weren't clear in your question as to how granular the countdown should be; Hours, days, etc.
If you can supply a standard date format, or a javascript timestamp (milliseconds since January 1st, 1970) you could use MomentJS to determine the "relative time". With this relative time you can determine the number of seconds, minutes, hours, days, weeks or months until the specified date. With this, it would be easy to prefix the string with "remaining". As in:
7 days remaining