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)
}
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 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.
Given this HTML:
<span class="countdown-date" data-countdown-date="2020-08-31 18:00:00"></span>
<span class="countdown-date" data-countdown-date="2020-12-31 00:00:00"></span>
I am trying to display the value of data-countdown-date attribute as countdown text in the span using this JS:
document.addEventListener('DOMContentLoaded', function () {
var list = document.getElementsByClassName('countdown-date');
for (let item of list) {
// console.log(item.getAttribute("data-countdown-date"));
// shows 2020-08-31 18:00:00 and 2020-12-31 00:00:00.
// Set the date we're counting down to
var countDownDate = new Date(item.getAttribute("data-countdown-date")).getTime();
// console.log(countDownDate);
// shows 1598860800000 and 1609333200000
// 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));
// console.log(days);
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-date"
item.innerHTML =
days + 'd ' + hours + 'h ' + minutes + 'm ' + seconds + 's ';
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
item.innerHTML = 'EXPIRED';
}
}, 1000);
};
});
The problem is that both the countdown dates keep showing the same values.
Like this: 136d 1h 56m 26s (initial value when the page is loaded).
Any help would be appreciated.
source for the JS code: https://www.w3schools.com/howto/howto_js_countdown.asp.
countDownDate needs to be declared inside the interval function.
When it's declared outside the variable is overwritten.
document.addEventListener('DOMContentLoaded', function () {
var list = document.getElementsByClassName('countdown-date');
for (let item of list) {
// console.log(item.getAttribute("data-countdown-date"));
// shows 2020-08-31 18:00:00 and 2020-12-31 00:00:00.
// console.log(countDownDate);
// shows 1598860800000 and 1609333200000
// Update the count down every 1 second
var x = setInterval(function () {
// Set the date we're counting down to
var countDownDate = new Date(item.getAttribute("data-countdown-date")).getTime();
// 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));
// console.log(days);
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-date"
item.innerHTML =
days + 'd ' + hours + 'h ' + minutes + 'm ' + seconds + 's ';
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
item.innerHTML = 'EXPIRED';
}
}, 1000);
};
});
<span class="countdown-date" data-countdown-date="2020-08-31 18:00:00"></span>
<span class="countdown-date" data-countdown-date="2020-12-31 00:00:00"></span>
document.addEventListener('DOMContentLoaded', function () {
var list = document.getElementsByClassName('countdown-date');
function processdate(countDownDate, item) {
// 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));
// console.log(days);
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 item
item.innerHTML =
days + 'd ' + hours + 'h ' + minutes + 'm ' + seconds + 's ';
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
item.innerHTML = 'EXPIRED';
}
}
for (let item of list) {
// Set the date we're counting down to
var countDownDate = new Date(item.getAttribute("data-countdown-date")).getTime();
// Update the count down every 1 second
var x = setInterval(processdate, 1000, countDownDate, item);
}
});
I'm using the following JavaScript for a countdown timer and it has been working great in most browsers, I've just double checked Internet Explorer however and I am getting 'NaN' displayed in place of each number.
Can anyone help to explain where this goes wrong in IE not seeing the individual variables as a number?
// Set the date we're counting down to
var countDownDate = new Date("2018-05-25 12:00:00").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);
if (days.toString().length < 2) {
days = "0" + days;
}
if (hours.toString().length < 2) {
hours = "0" + hours;
}
if (minutes.toString().length < 2) {
minutes = "0" + minutes;
}
if (seconds.toString().length < 2) {
seconds = "0" + seconds;
}
// Display the result in the element with id="countdown"
document.getElementById("countdown").innerHTML = days + " : " + hours + " : " +
minutes + " : " + seconds;
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("countdown").innerHTML = "<a href='/register'>Countdown Expired</a>";
}
}, 1000);
<span id="countdown"></span>
MDN discourages the use of a string in the date constructor because not all browsers implement this the same way.
If you do want to use date strings, I would recommend using a third party library like momentjs to parse these strings to make sure this works in every browser.
Just normalise the date and time
function getNormalisedDatetime(dString) { // yyyy-mm-dd hh:mm:ss
var parts = dString.split(" ");
var dParts = parts[0].split("-");
var tParts = parts[1].split(":");
return new Date(dParts[0],dParts[1]-1,dParts[2],tParts[0],tParts[1],tParts[2]);
}
function pad(num) {
return ("0"+num).slice(-2);
}
// Set the date we're counting down to
var countDownDate = getNormalisedDatetime("2018-05-25 12:00:00").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="countdown"
document.getElementById("countdown").innerHTML = "" + pad(days) + " : " + pad(hours) + " : " +
pad(minutes) + " : " + pad(seconds);
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("countdown").innerHTML = "<a href='/register'>Countdown Expired</a>";
}
}, 1000);
<span id="countdown"></span>
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>