This code basically puts out a countdown. The problem is, i would like it to be put out as D/HH/MM/SS as for example 1 day 05 hours 20 minutes 02 seconds, but i'm pretty new to coding, so i wonder if somebody could show/help me what is the right way to do it.
Thanks in advance!
Blockquote
<p id="demo"></p>
<script>
// Set the date we're counting down to
var countDownDate = new Date("Sep 5, 2018 15:37:25").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);
// 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>
Sorry, I did not read your answer carefully enough the 1st time.
Details here about padStart
a new language feature and an old work around (repeated below).
function pad(num, size) {
//num, string to be padded with leading zeros
//size, size of result after padding
//pads up to 10 characters
var s = "000000000" + num;
return s.substr(s.length-size);
}
var test='1';
console.log(pad('123456789',10)); //pads up to 10 char, result '0123456789'
console.log(pad(test,2)); //pads up to 2 char, result '01'
Related
I took some JS code from w3 to create a countdown. (https://www.w3schools.com/howto/howto_js_countdown.asp)
Because I want to display the countdown multiple times on one page I changed the getElementById("demo") to > getElementsByClassName("demo")
Unfortunately, this doesn't work. Nothing shows up. Why is that and how can I display the same counter multiple times? I tried some things but nothing worked out. This is my code:
html
<p class="demo"></p>
js
// 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);
// Output the result in an element with id="demo"
document.getElementsByClassName("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.getElementsByClassName("demo").innerHTML = "EXPIRED";
}
}, 1000);
As #ShanieMoonlight mentioned you need to iterate over the HTMLCollection. You can easily do it with minimal adjustments. E.g. when you use the spread-operator the forEach-function will be available.
// 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);
// Output the result in an element with id="demo"
[...document.getElementsByClassName("demo")].forEach(e => e.innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ");
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
[...document.getElementsByClassName("demo")].forEach(e=>e.innerHTML = "EXPIRED");
}
}, 1000);
<p class="demo"></p>
<p class="demo"></p>
<p class="demo"></p>
The goal is to have the countdown timer to count down to a specific time in NYC (EST).
So the the timer goes to zero at 12:00 in NYC but in LA it would go to zero at 09:00
This is the code I use from W3Schools. But I don't have enough knowledge to add the timezone.
Can anyone help please :)
<script>
// Set the date we're counting down to
var countDownDate = new Date("Dec, 2019 12:00:00 GMT-0500").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 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 = 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);
</script>
I have implemented the code below in my site, to display a running timer. The site is running on Wordpress. At the moment the date is input in the code (so it applied site wide). I am looking to have a running timer on each post.
I need to change the code below so that I can use a custom field on each post called "expiry" as the date, instead of the hardwired date below (newDate("Jan 5, 2021 15:37:25).getTime()
<!-- Display the countdown timer in an element -->
<p id="demo"></p>
<script>
// Set the date we're counting down to
var countDownDate = new Date("Jan 5, 2021 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>
The above code is sourced from here
My site is here
Thanks in advance
below steps is your requirements:
1) in custom field expiry set return format as custom "F j, Y g:i:s"
example link (https://prnt.sc/pqg79l)
2) add this function in functions.php
function functionname() {
global $post;
$field= get_field('expiry_date', $post->ID);
echo '<input type="hidden" id="date" value="'.$field.'">';
}
add_action( 'template_redirect', 'functionname' );
3) in your js file add below script
var $= jQuery;
var d = $("#date").val();
console.log(d);
// Set the date we're counting down to
var countDownDate = new Date(d).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);
make sure you have to add <p id="demo"></p> where you want to show in post
I have tried this code..It's totally working fine..I hope i have helped you by this
I'm using a countdown timer script that I've come across online and modified slightly to suit my website. This works perfectly for counting down to a set date/time but I need the timer to pause for about 1 hour and continue counting for 7 days. For example, when it reaches its end which is Wednesday 00:00:00, it should wait for an hour and then starts counting again till next Wednesday and so on and so fort.
-please i need help!
-here is the code i use
function teus(){
// Set the date we're counting down to
var countDownDate = new Date("Apr 3, 2018 18:00: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.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("teu").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("teu").innerHTML = "Service Time";
}
}, 1000);
}
teus()
function countDown(){
// Set the date we're counting down to
var countDownDate = new Date("july 11, 2017 10:19: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.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) {
countDownDate = new Date("july 18, 2017 10:19:00").getTime();
}
}, 1000);
}
countDown();
what I want to reach is the every week the timer will start count to the next week.
I have something that start every week in the same day and in the same hour.
I don't want to rewrite the code every week :/
Thank you.
so why so much calculation is needed just to calculate how many seconds are remaining to start of next week? for example I am writing a sample code to calculate it.
function distranceToNextWeekStartInSeconds() {
var now = new Date()
var dayDiff = 7 - now.getDay();
var startOfNextWeek = new Date(now.valueOf());
startOfNextWeek.setDate(now.getDate() + dayDiff);
startOfNextWeek.setHours(0);
startOfNextWeek.setMinutes(0);
startOfNextWeek.setSeconds(0);
return Math.floor((startOfNextWeek - now) / 1000);
}
console.log('Seconds remaining to next week start: ' + distranceToNextWeekStartInSeconds())
and you can simply call this function inside your timer for a live calculation and display purpose, That's It.
I assumed you wanted to count down to every next tuesday at 10:19:00.
I'm too lazy right now to test every cases, ut I think it should work.
function getNextTuesday() {
// Get the date from now
var date = new Date();
// Set target hour/minute/seconds
date.setHours(10);
date.setMinutes(19);
date.setSeconds(0);
// Seek for the next tuesday
var actualDay = date.getDay();
var targetDay = 2; //Tuesday
// diff will give us the day span between today and the next tuesday
var diff = targetDay - actualDay;
// If the diff is less than 0 (we're sunday or monday, or we fall on the exact day, minutes after the target hour) then add a week
if (diff < 0 || (date.getTime() - new Date().getTime()) <= 0) {
diff += 7;
}
// Finally add the day span to the current date
date.setDate(date.getDate() + diff);
return date;
}
function countDown() {
// Set the date we're counting down to
var countDownDate = getNextTuesday();
// 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);
if (distance < 0) {
// If the count down is over, write some text
document.getElementById("demo").innerHTML = 'IT\'S HAPPENING !';
countDownDate = getNextTuesday();
} else {
// Output the result in an element with id="demo"
document.getElementById("demo").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
}
}, 1000);
}
countDown();
<div id="demo"></div>