I would like to create a counter that reset every week, I found a code that more or less works, but when It goes to 0, it appears negative.... -1d -1h -2m -5s
<script>
// Set the date we're counting down to
var countDownDate = new Date("Jan 29, 2021 20:21:0").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) {
//document.getElementById("demo").innerHTML = "GAME DAY";
if(distance < - 1000 * 60 * 60* 24){ // if its past the "game day"
// reset timer to next week
countDownDate += 1000 * 60 * 60 * 24 * 7
}
}
}, 1000);
</script>
<span id="demo"></span>
Instead of hard-coding the date, you need to calculate the next date based on the current date.
Something like this, though you'd be better of moving the magic numbers (5 and 20) into variables.
let getNextGameDayTime = function() {
let now = new Date();
let dayOfTheWeek = now.getDay();
let dayOffset = 5 - dayOfTheWeek; // Friday is the 5th day of the week
if (dayOffset < 0 || (dayOffset === 0 && now.getHours() > 20)) {
dayOffset += 7;
}
let result = new Date();
result.setDate(result.getDate() + dayOffset);
result.setHours(20);
result.setMinutes(0);
result.setSeconds(0);
result.setMilliseconds(0);
return result;
}
console.log(getNextGameDayTime());
As for not displaying the message for the hour after a countdown has finished, you could use the resulting distance for this.
Related
I am using the following code to:
Show the remaining time for an "X" event.
Print text when that event is> 0.
Calculate 2 hours of event duration and print something else.
I love how this works, but I want that when the event ends, the counter automatically prints the remaining time for the same event the next day.
// Set the date we're counting down to
// Year, Month ( 0 for January ), Day, Hour, Minute, Second, , Milliseconds
//:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
//:::::::::::: ::::::::::::
//:::::::::::: 4:00 PM ::::::::::::
//:::::::::::: ::::::::::::
//:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
// (AAAA, MM, DD, HH, mm, S ));
var countDownDate = new Date(Date.UTC(2021, 07, 16, 23, 00, 00));
function chiriTimer() {
// 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
// GMT/UTC Adjustment at the end of the function. 0 = GMT/UTC+0; 1 = GMT/UTC+1.
var distance = countDownDate - now - (3600000 * 1);
// 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"
for (const ele of document.getElementsByClassName("chiriTimer")){
ele.innerHTML = (days + "<span>d</span> " + hours + "<span>h</span> "
+ minutes + "<span>m</span> " + seconds + "<span>s</span><br />")
}
// If the count down is over, write some text
if (distance < 0) {
for (const ele of document.getElementsByClassName("chiriTimer")) {
ele.innerHTML = "<p class='live-text'>En Vivo <i class='fa fa-circle faa-flash animated'></i></p> ";
}
if (distance + 7200000 < 0) {
for (const allEllements of document.getElementsByClassName("chiriTimer")) {
allEllements.innerHTML = "Finalizó";
}
}
}
}, 1000);
}
chiriTimer()
<p class="chiriTimer"></p>
To repeat the countdown for the next day three hours after the current countdown is over. Before the code that checking for two hours due, check for three hours due first distance + 10800000 < 0, then change the countDownDate to the next date.
function chiriTimer() {
// 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
// GMT/UTC Adjustment at the end of the function. 0 = GMT/UTC+0; 1 = GMT/UTC+1.
var distance = countDownDate - now - (3600000 * 1);
// 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"
for (const ele of document.getElementsByClassName("chiriTimer")){
ele.innerHTML = (days + "<span>d</span> " + hours + "<span>h</span> "
+ minutes + "<span>m</span> " + seconds + "<span>s</span><br />")
}
// If the count down is over, write some text
if (distance < 0) {
for (const ele of document.getElementsByClassName("chiriTimer")) {
ele.innerHTML = "<p class='live-text'>En Vivo <i class='fa fa-circle faa-flash animated'></i></p> ";
}
if (distance + 10800000 < 0) {
countDownDate = new Date(countDownDate.getTime() + 86400000)
} else if (distance + 7200000 < 0) {
for (const allEllements of document.getElementsByClassName("chiriTimer")) {
allEllements.innerHTML = "Finalizó";
}
}
}
}, 1000);
}
I wonder how to make countdown start every 8 hours? for example
the puzzle starts at 10 pm next is 6 am, and next 2 pm.
I have javascript like this
<script>
var countDownDate = new Date("May 31 2020 22:00:00");
var now = new Date();
if (now.getHours() < countDownDate.getHours()) {
countDownDate = countDownDate;
} else
if (countDownDate.getHours() <= now.getHours()) {
countDownDate.setDate(countDownDate.getDate() + 1);
}
var x = setInterval(function() {
var now = new 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 and start new countdown
if (distance < 0) {
clearInterval(x);
}
}, 1000);
</script>
and how to make that countDown date every 8 hours? like 10 pm, 6 am and 2 pm? Thank you.
How about wrapping it in a function that takes in a date (in ms, in this case) (countdown(date)) and then calling the function with 8+ hours once the timer is up:
// Set the date we're counting down to
var countDownDate = new Date("May 31, 2020 22:00:00").getTime();
function countdown(date) {
// 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 = date - 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 and start new countdown
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
let newDate = date + (8 * 3600 * 1000);
countdown(newDate);
}
}, 1000);
}
countdown(countDownDate);
DEMO using initial countdown set to 3 seconds from now.
Code Explanation:
take in the initial date - can be set to anything.
Countdown until the initial date is reached.
Start a new 8-hour timer.
Example case starting date = "May 31, 2020 19:37:35".
First countdown will countdown 5 hours (from now to 19:37:35).
Second countdown will countdown 8 hours (from 19:37:35 until
03:37:35).
Third countdown will countdown 8 hours (from 3:37:35 to 11:37:35).
Try to evaluate the starting countdown time by current time, then set the start of countdown time to that time.
Something like:
var countDownDate = new Date("May 31, 2020 22:00:00");
var currentHour = countDownDate.getHours();
// 10 pm to 6 am
if(currentHour >= 22 && currentHour < 6) {
// set countdown startTime to 10 pm
countDownDate.setHours(22);
}
// 6 am to 2 pm
else if(currentHour >= 6 && currentHour < 14) {
// set countdown startTime to 6 am
countDownDate.setHours(6);
} else {
// set countdown startTime to 2 pm
countDownDate.setHours(14);
}
I have build a popup with a timer. When the timer ends I want it to extend itself with another day. I have gone so far that it extends itself with 1 day for 1 time but then it quits.
Maybe you have any idea on how to proceed?
Thanks!
//Make countdown
var setInfiniteTime = '{{ $actiepopup->infiniteTime }}';
// Update the count down every 1 second
var x = setInterval(function() {
// Set the date we're counting down to
// Get todays date and time
var currentDate = new Date().getTime();
// get countdown time
var countDownDate = new Date(countDownTimeUntil).getTime();
// console.log('countdowndateBefore' + countDownDate);
// check in infinite time is set
if (setInfiniteTime == 'Yes') {
if (currentDate >= countDownDate) {
// var i;
// for (var i = 0; i < 999999; i++) {
var countDownDate = new Date(countDownTimeUntil).getTime() + 86400000;
// console.log(i);
// }
}
}
// console.log('currentdate' + currentDate);
// console.log('countdowndate' + countDownDate);
// Find the distance between now and the count down date
var distance = countDownDate - currentDate;
// 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="countdown"
$("#countdown").text(days + "d " + hours + "h " + minutes + "m " + seconds + "s ");
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
$("#countdown").text("Actie beeïndigd");
}
}, delayInMilliseconds);
Hope you have enough information!
SetInterval()
Also, just an advice, if you use boolean statements, just use true or false since it's way easier to work with
if (setInfiniteTime) {
setInterval(() => {
var countDownDate = new Date(countDownTimeUntil).getTime() + 86400000
}, 86400000)
}
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);
This code for a countdown timer is taken from W3Schools:
// Set the date we're counting down to
var d = new Date();
var n = d.getTimezoneOffset() * 60000;
var countDownDate = new Date("May 2, 2018 15:54: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 - n;
// 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);
There was a big issue with it: any date I enter would not work for different timezones, as if it was +1 hour UTC it would expire, and it would be an hour long if it was -1.
So I added the d.getTimezoneOffset() * 60000; to get the milliseconds difference, and then took it off, so if there is any difference it should calculate it.
Will it always work if I put an UTC date in the future, or is there a possible difference I don't know about (for example a special country or daylight savings that could mess it up)?