I"m trying to use this countdown but it calculates the time every second.
I want to counter to count the time by minutes or even hours, not every second because i only display days and hours.
I've tryied to remove the var seconds or minutes but the inspect elemnts showing me a purplr blink on the timer every 1 second meaning it's still calculating the time by seconds.
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
text-align: center;
font-size: 60px;
margin-top:0px;
}
</style>
</head>
<body>
<p id="demo"></p>
<script>
// Set the date we're counting down to
var countDownDate = new Date("April 24, 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);
// Output the result in an element with id="demo"
document.getElementById("demo").innerHTML = days + "d " + hours + "h ";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
</script>
</body>
</html>
Change
// Update the count down every 1 second
var x = setInterval(function() {
...
}, 1000);
to
// Update the count down every 1 minute
var x = setInterval(function() {
...
}, 1000*60);
or
// Update the count down every 1 hour
var x = setInterval(function() {
...
}, 1000*60*60);
Edit
That will update your timer every minute/hour. Now, to start countdown and update every minute/hour:
calculateCountdown();
// Update the count down every 1 minute
var x = setInterval(function() {
calculateDountdown();
}, 1000*60);
or just
calculateCountdown();
setInterval(calculateCountdown, 1000*60);
where
function calculateCountdown() {
// 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 ";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}
Check this answer to see how to refactor setInterval based solution to setTimeout based.
Related
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);
Is there a way to take this pre-existing code and make it so that instead of having the end date as a preset value. have it so that the user can select an end date using date inputs and time inputs. I there a way to do this by only Using HTML and Javascript with an onClick() function to avoid using PHP. Any help that I can get would be extremely helpful.
<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);
// 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>
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
text-align: center;
font-size: 60px;
margin-top: 0px;
}
</style>
</head>
<body>
<p id="demo"></p>
End Date <input type="datetime-local" id="endDate">
<button onclick="countdownTimeStart()">Start Timer</button>
<script>
// Set the date we're counting down to
function countdownTimeStart(){
var endDate = document.getElementById('endDate').value;
var dateObject = new Date(endDate);
var countDownDate = new Date(dateObject).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);
}
</script>
</body>
</html>
I've searched other questions and google/YouTube, and from what I've found, it seems that this is possible, but I have not found this exact use case as an example to pull from. And to preface, I have a slight working knowledge of coding, but not a whole lot.
Here's what I'm trying to accomplish: I want to create a countdown timer in Google Sheets with 2 possible functions (depending on the use case):
1) where I can put in the end date the timer counts down to, either in a specific cell or in the code itself.
2) using a dynamic date (i.e., 30 days from the date the timer was created)
So where I have gotten stuck... I tried using script.google.com and pasted this script for a countdown timer that I found online:
<!-- 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>
But when I run the code, I get "Syntax error. (line 7, file "countdown")".
What modifications do I need to make to the code to get it to work? Or am I using an overcomplicated code to create the timer, and there is a much easier way?
Did you save it as HTML? Or as JS?
Because you should save it as .html since your Javascript is within tags instead of it being a separate file.
The code you pulled from w3schools is just a snippet, I've added and tags and it works just fine.
In your example snippet you also pasted it into the Javascript box instead of the HTML box.
Try this example, it's exactly the code you had!
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
text-align: center;
font-size: 60px;
margin-top: 0px;
}
</style>
</head>
<body>
<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);
// 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>
</body>
Another way of doing it is to actually separate your javascript and html into separate files to keep it cleaner and to keep scripts and HTML separated. For example name your HTML index.html and your script timer.js
Then in your HTML, instead of the big blob of script, you simply do
<script src="/timer.js"></script>
// Save this as for example timer.js
// 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);
// 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);
<!-- Save this as index.html -->
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
text-align: center;
font-size: 60px;
margin-top: 0px;
}
</style>
</head>
<body>
<p id="demo"></p>
<!-- Load the Javascript from a separate file called timer.js -->
<script src="/timer.js"></script>
</body>
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 5 years ago.
I am working on a project which uses this script. This script takes present time and subtract it from given time.. like I gave 9 10,2017.It gives output like 29d 23h 3m 2s as remaining time
<!DOCTYPE html>
<html>
<head>
<title>Script</title>
</head>
<body>
<script type='text/javascript'>
// Set the date we're counting down to
var countDownDate = new Date('9 10,2017 00:00:00').getTime(); //m d, y h m s
// 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='time'
document.getElementById('rtime').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('rtime').innerHTML = 'EXPIRED'; // SUBMIT FORM;
}
}, 1000); </script>
<h4 id='rtime'></h4>
<h4 id='rtime'></h4>
<h4 id='rtime'></h4>
</body>
</html>
I wanted it to give the output in all tags where I used its id. But it only gives output in the first id element. I googled the problem and found
There should be class instead of id to use it again also class should be in array
I modified the script into like this
<!DOCTYPE html>
<html>
<head>
<title>Script</title>
</head>
<body>
<script type='text/javascript'>
// Set the date we're counting down to
var countDownDate = new Date('9 10,2017 00:00:00').getTime(); //m d, y h m s
// 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='time'
for(var y=0;y<=3;y++){
document.getElementsByClassName('rtime').innerHTML[y] = days + 'd ' + hours + 'h '
+ minutes + 'm' + seconds + 's';
};
// If the count down is over, write some text
if (distance <= 0) {
clearInterval(x);
document.getElementsByClassName('rtime').innerHTML[0] = 'EXPIRED'; // SUBMIT FORM;
}
}, 1000); </script>
<h4 class='rtime'></h4>
<h4 class='rtime'></h4>
<h4 class='rtime'></h4>
</body>
</html>
But its still not working.
// Set the date we're counting down to
var countDownDate = new Date('9 10,2017 00:00:00').getTime(); //m d, y h m s
// 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='time'
for (var y = 0; y < 3; y++) {
document.getElementsByClassName('rtime')[y].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('rtime')[0].innerHTML = 'EXPIRED'; // SUBMIT FORM;
}
}, 1000);
<h4 class='rtime'></h4>
<h4 class='rtime'></h4>
<h4 class='rtime'></h4>
getElementsByClassName returns array of elements with given class name.
In your case do like this getElementsByClassName('rtime')[y].innerHTML and this getElementsByClassName('rtime')[0].innerHTML
I have a jquery script that does a countdown showing days, hours, minutes, and seconds.
Now I want to remove the days from the script and it should start the countdown from 2 hours. I haven't been able to accomplish this.
Here's my code:
<p id="demo"></p>
<script>
// Set the date we're counting down to
var countDownDate = new Date("Jan 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>