I have made a countdown that will be displayed in the table column, but it is repeating column instead of the change in the column.
The snippet will help for better understanding the question: (edited)
var countDownDate = new Date("Apr 29, 2019 23:56:26").getTime();
var table = document.getElementById("test");
// 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);
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
cell1.innerHTML = days + "d " + hours + "h "
if (distance < 0) {
clearInterval(x);
document.getElementById("timer").innerHTML = "EXPIRED";
}
}, 1000);
.timer_bg {
background-color: red;
color: white;
}
<table id="test" class="table table-bordered table-responsive">
</table>
The countdown works well, it is decreasing too, every second it is generating one more column, I don't want that.
UPDATE
Also how to add class timer_bg in that row?
Move row and cell creation outside the setInterval.
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
setInterval(...)
Add class to row as shown below:
row.className = 'timer_bg';
The simplest solution is to create a fixed table and just inject the changed time into a fixed element.
There is no need to create the table row and cell. You can just have it already in your original HTML.
Update 1
If you need really to create the element dynamically you should create this element outside of the setInterval function (Credits to https://stackoverflow.com/a/50089575/2735286 ). There you can also add your class name.
var countDownDate = new Date("Apr 29, 2019 23:56:26").getTime();
var table = document.getElementById("targetTable");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
// Create a "class" attribute
var att = document.createAttribute("class");
att.value = "timer_bg";
cell1.setAttributeNode(att);
// 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);
cell1.innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s"
if (distance < 0) {
clearInterval(x);
document.getElementById("timer").innerHTML = "EXPIRED";
}
}, 1000);
<table id="targetTable">
</table>
Related
I'm trying to display a countdown in several div tags with the same class.
But the problem is that only the last tag of the list contains the countdown.
Here is code:
const contentsDownDate = document.querySelectorAll(".countDown");
nbElement = contentsDownDate.length - 1;
for (var i = 0; i < nbElement; i++) {
var countDownDate = new Date("Jan 5, 2024 15:37:25").getTime();
// Update the count down every 1 second
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"
contentsDownDate[i].innerHTML = days + "d " + hours + "h " +
minutes + "m " + seconds + "s ";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
contentsDownDate[i].innerHTML = "EXPIRED";
}
}, 1000);
}
I did the same thing by calling ids but still the same result, only the last id displays the countdown.
What can I do to solve this problem?
Note that the countdown code is taken from this: w3schools
PS: I also read that innerHTML prints at the end of the loop so it only prints the last tag and so you have to stop/pause the loop to print, especially with setInterval, but I already did it.
Unless this one was to update the countdown time? But in that case where should I place the other setInterval?
The reason why this is not working is because you enter the infinite loop in a blocking state, meaning that the interval is never entered as the browser is busy looping. Imagine the browser can only do one thing at a time, as in a single thread, so the loop is it, and cannot do anything else until it's done, and in your case it never.
Basically, if you put a setInterval() inside loop without clear it then the setInterval never stop and that mean the loop is infinite so it never complete.
Instead of that, put the loop inside the setInterval() will do the job. Let try this:
const contentsDownDate = document.querySelectorAll(".countDown");
nbElement = contentsDownDate.length-1;
var countDownDate = new Date("Jan 5, 2024 15:37:25").getTime();
// Update the count down every 1 second
x = setInterval(function() {
for (i=0; i<=nbElement; i++){
// 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"
contentsDownDate[i].innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
contentsDownDate[i].innerHTML = "EXPIRED";
}
}
}, 1000);
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>
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 am making a countdown timer where the text for Days Hours Minutes Seconds is just below to their respective values. Also it must be responsive too. I have some code below:
// 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 todays 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("timer").innerHTML = "<h1>" + days + " <span> days </span>: " + hours + " <span>hours</span>: " + minutes + " <span>minutes </span>: <font color='red'>" + seconds + "<span> s</span></font> </h1>";
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("timer").innerHTML = "EXPIRED";
}
}, 1000);
<div align="center" id="timer"></div>
My code has a problem in the case that the day symbol D is on left of the Day value but I want it to be on right. I mean just like picture below
You can wrap the text in <div> to create a line break. Secondly create a function which takes text,value and color as parameter and return html string.
// Set the date we're counting down to
var countDownDate = new Date("Jan 5, 2021 15:37:25").getTime();
function timePart(val,text,color="black"){
return `<h1 class="timer" style="color:${color};">${val}<div>${text}</div></h1>`
}
// 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 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"
let res = timePart(days,'days') + timePart(hours,'hours') + timePart(minutes,'Mins') + timePart(seconds,'Seconds','red');
document.getElementById("timer").innerHTML = res
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("timer").innerHTML = "EXPIRED";
}
}, 1000);
.timer{
display:inline-block;
padding:10px;
}
<div align="center" id="timer"></div>
Okay so I fixed it according to your requirements. It's not exactly like the picture but I'm sure you can do a little bit of styling. Here is the snippet in action.
var countDownDate = new Date("Jan 5, 2021 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 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("dd").innerHTML = days
document.getElementById("hh").innerHTML = hours
document.getElementById("mm").innerHTML = minutes
document.getElementById("ss").innerHTML = seconds
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("timer").innerHTML = "EXPIRED";
}
}, 1000);
h1 span {
margin: 0px 10px;
}
p span {
margin: 0px 11px;
}
<div align="center">
<h1>
<span id="dd"></span>:
<span id="hh"></span>:
<span id="mm"></span>:
<span style="color:red;" id="ss"></span>
</h1>
<p>
<span>Days</span>
<span>Hours</span>
<span>Minutes</span>
<span>Seconds</span>
</p>
</div>
I am having a countdown in javascript and a button which will pause/stop the countdown.
{
"message": "Uncaught ReferenceError: x is not defined",
"filename": "https://stacksnippets.net/js",
"lineno": 57,
"colno": 17
}
function start() {
var table = document.getElementById("test");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
cell1.colSpan = 2;
var countDownDate = new Date("Apr 30, 2019 11:12:27").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);
cell1.innerHTML = seconds;
//document.getElementById("timer").innerHTML = days + "d " + hours + "h "
//+ minutes + "m " + seconds + "s ";
if (distance < 0) {
clearInterval(x);
cell1.innerHTML = "EXPIRED";
}
}, 1000);
}
function stop() {
clearInterval(x);
}
<table id="test" class="table table-bordered table-responsive">
</table>
<button onclick="start()">Start</button>
<button onclick="stop()">Stop</button>
I know it can be stopped in the same function, but it is just an example, in my real code, it has to be stopped outside the function.
How to set x so that it works outside the function too?
Variable x is not defined out the function start, so function stop don't see it.
Easy way to solve it, declare x global.
var x;
function start() {
var table = document.getElementById("test");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
cell1.colSpan = 2;
var countDownDate = new Date("Apr 30, 2019 11:12:27").getTime();
// Update the count down every 1 second
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);
cell1.innerHTML = seconds;
//document.getElementById("timer").innerHTML = days + "d " + hours + "h "
//+ minutes + "m " + seconds + "s ";
if (distance < 0) {
clearInterval(x);
cell1.innerHTML = "EXPIRED";
}
}, 1000);
}
function stop() {
clearInterval(x);
}
<table id="test" class="table table-bordered table-responsive">
</table>
<button onclick="start()">Start</button>
<button onclick="stop()">Stop</button>
Just declare it at the top of the script so that each function can reference it:
var x;
function start() {
var table = document.getElementById("test");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
cell1.colSpan = 2;
var countDownDate = new Date("Apr 30, 2019 11:12:27").getTime();
// Update the count down every 1 second
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);
cell1.innerHTML = seconds;
//document.getElementById("timer").innerHTML = days + "d " + hours + "h "
//+ minutes + "m " + seconds + "s ";
if (distance < 0) {
clearInterval(x);
cell1.innerHTML = "EXPIRED";
}
}, 1000);
}
function stop() {
clearInterval(x);
}
<table id="test" class="table table-bordered table-responsive">
</table>
<button onclick="start()">Start</button>
<button onclick="stop()">Stop</button>
But it would be better to avoid global namespace pollution, so you could achieve that by also wrapping the whole thing in an IIFE and attaching the listeners properly with Javascript rather than in the HTML: (inline event handlers are as bad as eval)
(() => {
let x;
const [startButton, stopButton] = [...document.querySelectorAll('button')];
startButton.onclick = start;
stopButton.onclick = stop;
function start() {
var table = document.getElementById("test");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
cell1.colSpan = 2;
var countDownDate = new Date("Apr 30, 2019 11:12:27").getTime();
// Update the count down every 1 second
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);
cell1.innerHTML = seconds;
//document.getElementById("timer").innerHTML = days + "d " + hours + "h "
//+ minutes + "m " + seconds + "s ";
if (distance < 0) {
clearInterval(x);
cell1.innerHTML = "EXPIRED";
}
}, 1000);
}
function stop() {
clearInterval(x);
}
})();
<table id="test" class="table table-bordered table-responsive">
</table>
<button>Start</button>
<button>Stop</button>