I want to create countdown timer
But i want to get date from wordpress custom fields..
And i want to show countdown timer in element with id COUNTDWON
<p style="visibility: hidden; font-size: 0px;" id="time"><?php the_field('end_date');?></p>
<p id="countdown""></p>
and i want to use this script (below)
and my question is: how i can take the date from element
i don't want to put date manually to the script each time..
is it any way to do it?
var countDownDate = new Date("Sep 5, 2018 15:37:25").getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var distance = countDownDate - now;
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("countdown").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
if (distance < 0) {
clearInterval(x);
document.getElementById("countdown").innerHTML = "EXPIRED";
}
}, 1000);
After i tried this answer:
// Fetch here
var dateTime = document.getElementById("time").innerHTML;
// Use it here
var countDownDate = new Date(dateTime).getTime();
// .... rest of the code
It works only for first field, screenshot below:
screenshot
If the date given by PHP is in the same format then you can use document.getElementById()
// Fetch here
var dateTime = document.getElementById("time").innerHTML;
// Use it here
var countDownDate = new Date(dateTime).getTime();
// .... rest of the code
Otherwise you might need to format dateTime variable accordingly.
Related
// Set the date we're counting down to
var countDownDate = new Date("July 26, 2022 19:00:00").getTime();
// Update the count down every 1 second
var countdownfunction = 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("countdown").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(countdownfunction);
document.getElementById("countdown").innerHTML = "Refresh the page! Ctrl+F5";
}
}, 1000);
This is my current javascript, but it shows a differnt end date regarding on which timezone their computer is currently set to, is there an easy way to fix this?
I am working a small CodeIgniter project. I am using following javascript countdown which time difference between future date which was stored in server table and web server current time. code is working but I only got 2 second count down and stopped. please some can help me to resolve this issue
<script>
// Set the date we're counting down to
var countDownDate = new Date("<?php echo $time['month']." ".$time['date'].", ".$time['year']." ".$time['hour'].":".$time['minute'];?>:00").getTime();
// Get today's date and time
var now = new Date("<?php echo date("m")." ".date("d").", ".date("Y")." ".date("H").":".date("i").":".date("s");?>").getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Update the count down every 1 second
var x = setInterval(function() {
// 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 ";
document.getElementById("jmpbtn").style.display = "";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
document.getElementById("jmpbtn").style.display = "none";
} distance=distance-1;
}, 1000);
</script>
<?php endforeach; ?>
This question already has answers here:
How to add 30 minutes to a JavaScript Date object?
(29 answers)
Closed 2 years ago.
I created a simple 1 Minute countdown, but it seems not to be working I don't know why.
IT GIVES EXPIRED as response instead of the timer showing.
// Set the date we're counting down to
var setoneminutetime = new Date();
setoneminutetime.setMinutes(1);
var countDownDate = new Date(setoneminutetime).getTime();
//set interval for the actual countdown
var x = setInterval(function() {
var now = new Date().getTime();
//end time minus the current time
var distance = countDownDate - now;
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);
//show countdown in div demo
document.getElementById("demo").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
p {
text-align: center;
font-size: 60px;
margin-top: 0px;
}
<p id="demo"></p>
setMinutes set the minutes to 1 of the current hour. Right now, it's 5:19PM, with setMinutes(1), the hour is 5:01PM. You need to get the current time and add 1 minute to it.
// Set the date we're counting down to
var setoneminutetime = new Date();
setoneminutetime.setTime(Date.now() + 1 * 60 * 1000); // Add 1 minutes to current timestamp
var countDownDate = new Date(setoneminutetime).getTime();
//set interval for the actual countdown
var x = setInterval(function() {
var now = new Date().getTime();
//end time minus the current time
var distance = countDownDate - now;
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);
//show countdown in div demo
document.getElementById("demo").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
p {
text-align: center;
font-size: 60px;
margin-top: 0px;
}
<p id="demo"></p>
As others have mentioned you've set the Date minute to :01 not added one minute. A simple solution would be to define countDownDate as now + 60*1000.
This is explicitly setting the "minute" value of the Date to 1:
setoneminutetime.setMinutes(1);
So this will only work if you load the page exactly at the 0 minute mark of any given hour. It looks like you intended to set it to the current minute plus 1:
setoneminutetime.setMinutes(setoneminutetime.getMinutes() + 1);
Note that this would also fail any time the current minute is 59. You should be able to get around this by creating a whole new date out of the total epoch miliseconds and adding 60,000 (miliseconds) to that:
var setoneminutetime = new Date(new Date().getTime() + 60000);
I'm creating a countdown timer for a user selected time. For that I have developed following function.
function countdownTimeStart(){
var countDownDate = new Date("Sep 5, 2018 15:37:25").getTime();
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 - 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 = "EXPIRED";
}
}, 1000);
}
This works fine. But I want to get a user selected value from a text input instead of var countDownDate = new Date("Sep 5, 2018 15:37:25").getTime();
Such as
<input type = "text" id = "picker-dates" value="08:30:20">
So can anyone help me to get this input value to my javascript function.
First get the time value from the input using the getElementById and then split that value with colon : to get the hour, minutes and seconds. With these value you can use setHours in the current date to set the time specified in the input.
function countdownTimeStart(){
var time = document.getElementById("picker-dates").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 - 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 = "EXPIRED";
}
}, 1000);
}
countdownTimeStart();
<input type = "text" id = "picker-dates" value="14:30:20">
<div id='demo1'></div>
You can do like this, please have a look and if it doesn't work please let me know.
var selectedValue = document.getElementById("picker-dates").value;
use jquery: $('#picker-dates').val()
This is template node of node-red dasboard nodes, I need to inject date and time formatted like "Feb 09, 2018 13:50:05" for example. If I will uncomment first indate var it will work.
<script>
// Set the date we're counting down to
//var countDownDate = new Date({{msg.payload}}).getTime();
//var indate = "Feb 09, 2018 13:50:05";
var indate = msg.payload;
var countDownDate = new Date(indate).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) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
</script>
in my node-red config ui those 2 nodes looks like
[{"id":"a600589b.f2b9f8","type":"ui_template","z":"54549b95.190a94","group":"ed0a0688.55eb78","name":"","order":0,"width":0,"height":0,"format":"<div id=\"demo\"></div>\n\n<script>\n// Set the date we're counting down to\n//var countDownDate = new Date({{msg.payload}}).getTime();\nvar indate = msg.payload;\nvar countDownDate = new Date(indate).getTime();\n\n// Update the count down every 1 second\nvar x = setInterval(function() {\n\n // Get todays date and time\n var now = new Date().getTime();\n \n // Find the distance between now an the count down date\n var distance = countDownDate - now;\n \n // Time calculations for days, hours, minutes and seconds\n var days = Math.floor(distance / (1000 * 60 * 60 * 24));\n var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));\n var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));\n var seconds = Math.floor((distance % (1000 * 60)) / 1000);\n \n // Output the result in an element with id=\"demo\"\n document.getElementById(\"demo\").innerHTML = days + \"d \" + hours + \"h \"\n + minutes + \"m \" + seconds + \"s \";\n \n // If the count down is over, write some text \n if (distance < 0) {\n clearInterval(x);\n document.getElementById(\"demo\").innerHTML = \"EXPIRED\";\n }\n}, 1000);\n</script>\n","storeOutMessages":true,"fwdInMessages":false,"templateScope":"local","x":616.0195846557617,"y":2164.0041790008545,"wires":[[]]},{"id":"fbc5518f.f9f45","type":"inject","z":"54549b95.190a94","name":"","topic":"","payload":"Feb 09, 2018 13:50:05","payloadType":"str","repeat":"","crontab":"","once":false,"x":401.14630126953125,"y":2305.575101852417,"wires":[["a600589b.f2b9f8"]]},{"id":"ed0a0688.55eb78","type":"ui_group","z":"","name":"Время комната 15","tab":"ab7910af.baccb","order":2,"disp":true,"width":"6"},{"id":"ab7910af.baccb","type":"ui_tab","z":"","name":"Клиенты","icon":"dashboard","order":1}]
Why not use node-red-contrib-moment before your Dashboard Template node? Use that to attach the correctly formatted date to the msg and then consume within the Dashboard.