We Keep Coding

Countdown timer - Hide variables as they expire

looking for help with a countdown timer I have to reveal a container the page at a specific time. I'd like the "days" "hours" "minutes" to disappear when they reach zero.
Can anyone help?
<h3 id="demo"></h3>
<script>
// Set the date we're counting down to
var countDownDate = new Date("1/21/2022 11: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 + " day " + hours + " hours " + minutes + " min " + seconds + " sec ";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "Reserve Tickets";
}
}, 1000);
</script>

Update variables only if distance > 0
<h3 id="demo"></h3>
<script>
// Set the date we're counting down to
var countDownDate = new Date("1/21/2022 11:00:00").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get today's date and time
let now = new Date().getTime();
// Find the distance between now and the count down date
let distance = countDownDate - now;
// If the count down is over, write some text
if (distance >= 0) {
// Time calculations for days, hours, minutes and seconds
let days = Math.floor(distance / (1000 * 60 * 60 * 24));
let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
let seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Output the result in an element with id="demo"
document.getElementById("demo").innerHTML = days + " day " + hours + " hours " + minutes + " min " + seconds + " sec ";
} else {
clearInterval(x);
document.getElementById("demo").innerHTML = "Reserve Tickets";
}
}, 1000);
</script>

JavaScript and content change after load - countdown timer from date

I'm trying to have a simple countdown timer that converts a time given on a page to a countdown.
It works, but my current issue is how the normal date is shown and then later it's parsed by the JavaScript. I want it parsed by JS right away so a user doesn't see it flicking between the date and the countdown timer.
It converts this to the countdown:
<span class="countdown">12/10/20 13:10:00</span>
This is the code:
if ($('.countdown').length)
{
$.each( $('.countdown'), function( key, value )
{
var time_listed = $(value).text();
var countdown_object = $(value);
// Set the date we're counting down to
var countDownDate = new Date(time_listed).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"
countdown_object.text (days + " days " + hours + "h "
+ minutes + "m " + seconds + "s ");
// If the count down is finished, write some text
if (distance < 0)
{
clearInterval(x);
countdown_object.text("EXPIRED");
}
}, 1000);
});
}
What I am asking for, is suggestions on how to get around this problem. Is the only way to have it loaded before the HTML or what? I'm confused on the best practices for this. Everywhere keeps telling me to defer JavaScript loading...but what about stuff like this that changes the content?
In cases like this, is it a good idea to have a "core" file for content-changing stuff that loads right away, then the rest after the content or what?

The problems comes from setInterval not executing automatically , which is normal. Here's a work around it:
if ($('.countdown').length)
{
$.each( $('.countdown'), function( key, value )
{
var time_listed = $(value).text();
var countdown_object = $(value);
// Set the date we're counting down to
var countDownDate = new Date(time_listed).getTime();
var counterFunction = 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"
countdown_object.text (days + " days " + hours + "h "
+ minutes + "m " + seconds + "s ");
// If the count down is finished, write some text
if (distance < 0)
{
clearInterval(x);
countdown_object.text("EXPIRED");
}
return counterFunction;
}
// Update the count down every 1 second
var x = setInterval(counterFunction(), 1000);
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="countdown">12/10/20 13:10:00</span>

I suggest to put the date in data-date attr, like this:
<span data-date="12/10/20 13:10:00" class="countdown"></span>
than the script:
if ($('.countdown').length)
{
$.each( $('.countdown'), function( key, value )
{
var time_listed = $(value).attr("data-date");
var countdown_object = $(value);
// Set the date we're counting down to
var countDownDate = new Date(time_listed).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"
countdown_object.text (days + " days " + hours + "h "
+ minutes + "m " + seconds + "s ");
// If the count down is finished, write some text
if (distance < 0)
{
clearInterval(x);
countdown_object.text("EXPIRED");
}
}, 1000);
});
}
https://jsfiddle.net/750o1neh/

JavaScript timer stuck when adding PHP script to footer

I'm trying to convert the 0 in stock text on my website (held within a <p> tag) to a countdown timer, once the stock level hits 0. So I've added this code to the footer - however it seems to just stick, and not count down at all. It also takes a few seconds to replace the 0 in stock text - can I make this quicker/instant? Here's the code so far:
// Set the count down date
var countDownDate = new Date("Feb 21, 2021 15:26:00").getTime();
// Update the count every 1 second
var x = setInterval(function() {
// Get today's date and time
var now = new Date().getTime();
// 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 if stock = 0
list = document.getElementsByClassName("stock in-stock");
if (list[0].innerHTML == "0 in stock") {
list[0].innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
}
// If the count down is finished, write text
if (distance < 0) {
clearInterval(x);
list = document.getElementsByClassName("stock in-stock");
list[0].innerHTML = "Item expired!";
}
}, 1000);
<p class="stock in-stock">1 in stock</p>

You were trying to populate the P with new data and somehow trying to read out the old data, I've just separated that into 2 spans so you can work with each one individually and updated your JS to reflect the new structure.
To speed up the first call, extract the function:
Please note that we're treating "stock" and "countdown" as 2 different things now.
// Set the count down date
var countDownDate = new Date("Feb 21, 2021 15:26:00").getTime();
function ctd() {
// Get today's date and time
var now = new Date().getTime();
// 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);
//console.log(days + " " + hours + " " + minutes + " " + seconds);
// Display the result if stock = 0
countdown = document.getElementsByClassName("countdown");
stock = document.getElementsByClassName("stock-level");
if (stock[0].innerHTML == "1") {
countdown[0].innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
}
// If the count down is finished, write text
if (distance < 0) {
clearInterval(x);
countdown.innerHTML = "Item expired!";
}
}
ctd(); // run now
// Update the count every 1 second
var x = setInterval(ctd, 1000);
<p class="stock-level" style="display:none">1</p>
<p class="countdown"></p>

I got it to work. Here's the code:
<script>
//Set the count down date
var countDownDate = new Date("Feb 20, 2019 18:26:00").getTime();
var startTimer=false;
list = document.getElementsByClassName("stock in-stock");
if(list[0].innerHTML=='1 in stock') {
startTimer=true;
}
//Check if 1 left
list = document.getElementsByClassName("stock in-stock");
//Update the count every 1 second
var x = setInterval(function() {
//Get today's date and time
var now = new Date().getTime();
//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);
//Update the counter
if(startTimer) {
list[0].innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
}
//If the count down is finished, write text
if (distance < 0) {
clearInterval(x);
list = document.getElementsByClassName("stock in-stock");
list[0].innerHTML = "Item expired!";
}
}, 1000);
</script>

Why does the countdown stop when I set the time zone?

I have used a countdown to get the difference between two times. When I use the special time the timer stops despite time gets the difference when refreshing the browser I find it already counts but it doesn't show counting seconds.
<p id="demo"></p>
<script>
// given the city's UTC offset
function calcTime(city, offset) {
// create Date object for current location
d = new Date();
// convert to msec
// add local time zone offset
// get UTC time in msec
utc = d.getTime() + (d.getTimezoneOffset() * 60000);
// create new Date object for different city
// using supplied offset
nd = new Date(utc + (3600000*offset));
// return time as a string
return nd;
}
var xx = calcTime('country1', '+3');
var x1 = calcTime('country2', '-1');
// Set the date we're counting down to
var countDownDate = new Date(xx).getTime();
var now = new Date(x1).getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time //1527885631789
//var now2 = new Date().getTime(); //1527871237519
// 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 = 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>
When I use var now = new Date().getTime(); the countdown works. What is the problem in my code ?

Although I'm still not clear on what you want, I believe the following code behaves how you want. The trick is that you need to update now at every interval.
// given the city's UTC offset
function calcTime(city, offset) { .. unchanged ..}
var xx = calcTime('country1', '+3');
// Set the date we're counting down to
var countDownDate = new Date(xx).getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// calculate the current time
var now = new Date(calcTime('country2', '-1')).getTime();
// Get todays date and time //1527885631789
//var now2 = new Date().getTime(); //1527871237519
// 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"
console.log(hours + "h " + minutes + "m " + seconds + "s ");
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
console.log("EXPIRED");
}
}, 1000);

Timer countdown runs only once not following while loop?

Each time while loop run it create another table row and show related data, i want to show countdown timer in column of each row(to show time elapsing). My below script run only once. Do you have another idea how to do it or do something with this?? i wrote below code within the php while loop but runs only once. Please help
<script>
counter=0;
</script>
<?php
$count=0;
while($rowp = $resultp->fetch_assoc()) {
echo <td><p id='demo",$count,"'></p></td>
?>
<script>
var countDownDate = new Date("<?php echo $enterytime1; ?>").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 = now - countDownDate;
// 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" + counter).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>
<?php }
?>

yes you have to create new countdown for all column

Probably your if condition is true - countDownDate > now - and it terminates interval.

I am guessing it goes directly to EXPIRED right? You have the wrong order. It should be the other way around:
var distance = countDownDate - now;

I replaced the php code to the date and i changed the distance calculation. Try this if there is any change then let me know
var countDownDate = new Date(2017, 2, 10, 12, 9, 40, 0).getTime();
counter = 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 the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
// 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);
counter++;
// Output the result in an element with id="demo"
var newDiv = document.createElement("div");
newDiv.setAttribute("id", "demo" + counter);
var node = document.createTextNode(days + "days " + hours + "h " + minutes + "m " + seconds + "s ");
newDiv.appendChild(node);
if (document.getElementById("demo" + counter) != null) {
document.getElementById("demo" + counter).innerHTML = days + "days " + hours + "h " + minutes + "m " + seconds + "s ";
} else {
document.body.appendChild(newDiv);
}
if (counter > 10)
counter = 0;
}, 1000);
div {
border: 1px black solid;
}
<div id='demo'></div>