I want to display this in several elements on the page. And it displays only once. In other elements it is empty. Do you have any solution regarding this issue?
Need to display it in a loop? Can you construct such a loop? As I created and wanted to display by class, no id unfortunately did not work.
function getTimeRemaining(endtime) {
var t = Date.parse(endtime) - Date.parse(new Date());
var seconds = Math.floor((t / 1000) % 60);
var minutes = Math.floor((t / 1000 / 60) % 60);
var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
var days = Math.floor(t / (1000 * 60 * 60 * 24));
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
function initializeClock(id, endtime) {
var clock = document.getElementById(id);
var daysSpan = clock.querySelector('.days');
var hoursSpan = clock.querySelector('.hours');
var minutesSpan = clock.querySelector('.minutes');
var secondsSpan = clock.querySelector('.seconds');
function updateClock() {
var t = getTimeRemaining(endtime);
daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
if (t.total <= 0) {
clearInterval(timeinterval);
}
}
updateClock();
var timeinterval = setInterval(updateClock, 1000);
}
function getNextSaturday() {
var now = new Date();
var nextSaturday = new Date();
nextSaturday.setDate(now.getDate() + (6 - 1 - now.getDay() + 7) % 7 + 1);
nextSaturday.setHours(11, 0, 0, 0);
return nextSaturday;
}
function convertToEST(date){
estOffset = -5.0
utc = date.getTime() + (date.getTimezoneOffset() * 60000);
return new Date(utc + (3600000 * estOffset));
}
var deadline = getNextSaturday();
initializeClock('clockdiv', convertToEST(deadline));
<h1>Countdown Clock</h1>
<div id="clockdiv">
<div>
<span class="days"></span>
<div class="smalltext">Days</div>
</div>
<div>
<span class="hours"></span>
<div class="smalltext">Hours</div>
</div>
<div>
<span class="minutes"></span>
<div class="smalltext">Minutes</div>
</div>
<div>
<span class="seconds"></span>
<div class="smalltext">Seconds</div>
</div>
</div>
Related
i created this countdown that counts down 24 hours but once the page is refreshed,it restarts the countdown
how can i make it not start again?
please can anyone help me understand what i can do or to make it a static countdown
here are the codes
function getTimeRemaining(endtime) {
const total = Date.parse(endtime) - Date.parse(new Date());
const seconds = Math.floor((total / 1000) % 60);
const minutes = Math.floor((total / 1000 / 60) % 60);
const hours = Math.floor((total / (1000 * 60 * 60)) % 24);
const days = Math.floor(total / (1000 * 60 * 60 * 24));
return {
total,
days,
hours,
minutes,
seconds
};
}
function initializeClock(id, endtime) {
const clock = document.getElementById(id);
const daysSpan = clock.querySelector('.days');
const hoursSpan = clock.querySelector('.hours');
const minutesSpan = clock.querySelector('.minutes');
const secondsSpan = clock.querySelector('.seconds');
function updateClock() {
const t = getTimeRemaining(endtime);
daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
if (t.total <= 0) {
clearInterval(timeinterval);
}
}
updateClock();
const timeinterval = setInterval(updateClock, 1000);
}
const deadline = new Date(Date.parse(new Date()) + 1 * 24 * 60 * 60 * 1000);
initializeClock('clockdiv', deadline);
<div>
<h1>Countdown Clock</h1>
<div id="clockdiv">
<div>
<span class="days"></span>
<div class="smalltext">Days</div>
</div>
<div>
<span class="hours"></span>
<div class="smalltext">Hours</div>
</div>
<div>
<span class="minutes"></span>
<div class="smalltext">Minutes</div>
</div>
<div>
<span class="seconds"></span>
<div class="smalltext">Seconds</div>
</div>
</div>
</div>
i'd really appreciate any help regarding this
I dont know what way to go about it
To not restart the countdown once the page is refreshed, the deadline data needs to be saved into a persistent storage that does not get cleared out even when the page is refreshed. You can achieve this by storing the deadline data in localStorage.
localStorage is similar to sessionStorage, except that while localStorage data has no expiration time, sessionStorage data gets cleared when the page session ends — that is, when the page is closed. - Source: LocalStorage
The change required on your code:
let deadline;
const prevDeadLine = localStorage.getItem("deadlineData"); // Get previous data from local storage
if (!prevDeadLine) {
deadline = new Date(Date.parse(new Date()) + 1 * 24 * 60 * 60 * 1000);
localStorage.setItem("deadlineData", deadline); // set the data for the first time
} else {
deadline = prevDeadLine; // use previousDeadline
}
Solution Snippet:
<html>
<head>
<title>
Countdown
</title>
</head>
<body>
<div>
<h1>Countdown Clock</h1>
<div id="clockdiv">
<div>
<span class="days"></span>
<div class="smalltext">Days</div>
</div>
<div>
<span class="hours"></span>
<div class="smalltext">Hours</div>
</div>
<div>
<span class="minutes"></span>
<div class="smalltext">Minutes</div>
</div>
<div>
<span class="seconds"></span>
<div class="smalltext">Seconds</div>
</div>
</div>
</div>
</body>
<script>
function getTimeRemaining(endtime) {
const total = Date.parse(endtime) - Date.parse(new Date());
const seconds = Math.floor((total / 1000) % 60);
const minutes = Math.floor((total / 1000 / 60) % 60);
const hours = Math.floor((total / (1000 * 60 * 60)) % 24);
const days = Math.floor(total / (1000 * 60 * 60 * 24));
return {
total,
days,
hours,
minutes,
seconds
};
}
function initializeClock(id, endtime) {
const clock = document.getElementById(id);
const daysSpan = clock.querySelector(".days");
const hoursSpan = clock.querySelector(".hours");
const minutesSpan = clock.querySelector(".minutes");
const secondsSpan = clock.querySelector(".seconds");
function updateClock() {
const t = getTimeRemaining(endtime);
daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = ("0" + t.hours).slice(-2);
minutesSpan.innerHTML = ("0" + t.minutes).slice(-2);
secondsSpan.innerHTML = ("0" + t.seconds).slice(-2);
if (t.total <= 0) {
clearInterval(timeinterval);
} else {
new Date(Date.parse(new Date()) + 1 * 24 * 60 * 60 * 1000);
}
}
updateClock();
const timeinterval = setInterval(updateClock, 1000);
}
let deadline;
const prevDeadLine = localStorage.getItem("deadlineData");
if (!prevDeadLine) {
deadline = new Date(Date.parse(new Date()) + 1 * 24 * 60 * 60 * 1000);
localStorage.setItem("deadlineData", deadline);
} else {
deadline = prevDeadLine;
}
initializeClock("clockdiv", deadline);
</script>
</html>
I'm trying to set a countdown that will do something before and after,
I'm using the code from this site: https://www.sitepoint.com/build-javascript-countdown-timer-no-dependencies/
I have this code, but I don't know how to:
set the end time;
do something before and after the timer is done;
schedule the clock automatically.
function getTimeRemaining(endtime) {
var t = Date.parse(endtime) - Date.parse(new Date());
var seconds = Math.floor((t / 1000) % 60);
var minutes = Math.floor((t / 1000 / 60) % 60);
var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
var days = Math.floor(t / (1000 * 60 * 60 * 24));
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
function initializeClock(id, endtime) {
var clock = document.getElementById(id);
var daysSpan = clock.querySelector('.days');
var hoursSpan = clock.querySelector('.hours');
var minutesSpan = clock.querySelector('.minutes');
var secondsSpan = clock.querySelector('.seconds');
function updateClock() {
var t = getTimeRemaining(endtime);
daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
if (t.total <= 0) {
clearInterval(timeinterval);
}
}
updateClock();
var timeinterval = setInterval(updateClock, 1000);
}
//var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);
var schedule = [
['May 10 2020', 'May 10 2020']
];
//initializeClock('clockdiv', deadline);
// iterate over each element in the schedule
for(var i=0; i<schedule.length; i++){
var startDate = schedule[i][0];
var endDate = schedule[i][1];
// put dates in milliseconds for easy comparisons
var startMs = Date.parse(startDate);
var endMs = Date.parse(endDate);
var currentMs = Date.parse(new Date());
// if current date is between start and end dates, display clock
if(endMs > currentMs && currentMs >= startMs ){
initializeClock('clockdiv', endDate);
}
}
Could you please advise me?
Using the following JavaScript, how do I make it automatically restart the countdown adding 7 days when the deadline is reached?
(function($) {
"use strict";
function getTimeRemaining(endtime) {
var t = Date.parse(endtime) - Date.parse(new Date());
var seconds = Math.floor((t / 1000) % 60);
var minutes = Math.floor((t / 1000 / 60) % 60);
var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
var days = Math.floor(t / (1000 * 60 * 60 * 24));
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds,
};
}
function initializeClock(id, endtime) {
var daysSpan = $('.days');
var hoursSpan = $('.hours');
var minutesSpan = $('.minutes');
var secondsSpan = $('.seconds');
function updateClock() {
var t = getTimeRemaining(endtime);
daysSpan.html(t.days);
hoursSpan.html(('0' + t.hours).slice(-2));
minutesSpan.html(('0' + t.minutes).slice(-2));
secondsSpan.html(('0' + t.seconds).slice(-2));
if (t.total <= 0) {
clearInterval(timeinterval);
}
}
updateClock();
var timeinterval = setInterval(updateClock, 1000);
}
var deadline = new Date("Aug 24, 2018");
initializeClock('clockdiv', deadline);
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="countdown">
<span class="days"></span> Days
<span class="hours"></span> Hours
<span class="minutes"></span> Minutes
<span class="seconds"></span> Seconds
</div>
why dont you just re-initialize the script with a new deadline?
if (t.total <= 0) {
clearInterval(timeinterval);
var newDeadline = deadline.setDate(deadline.getDate() + 7);
initializeClock('clockdiv', newDeadline);
}
This question already has answers here:
What is the scope of variables in JavaScript?
(27 answers)
Closed 4 years ago.
I am trying to make a countdown timer in which the user can set day, hour, minute and seconds values.
The setlength() function takes the values from the textboxes then sets the variables.
Then when the user clicks the start button, the time in ms (variable lengthms) is calculated and added to the current time.
Then the countdown timer just counts down.
I am quite sure the counting down bit works but I don't understand/know why the script is unable to fetch the values from the input boxes and assign them to the variables.
Any help or another solution to varying the value of the hours minutes and seconds is appreciated.
Thank you in advance!
function setlength() {
var lengthd = document.getElementById("lengthd").value;
var lengthh = document.getElementById("lengthh").value;
var lengthm = document.getElementById("lengthm").value;
var lengths = document.getElementById("lengths").value;
}
function start() {
var lengthms = (lengthd * 24 * 3600 + lengthh * 3600 + lengthm * 60 + lengths * 1) * 1000;
var deadline = new Date(Date.parse(new Date()) + lengthms);
initializeClock('timerdiv', deadline);
}
function getTimeRemaining(endtime) {
var t = Date.parse(endtime) - Date.parse(new Date());
var seconds = Math.floor((t / 1000) % 60);
var minutes = Math.floor((t / 1000 / 60) % 60);
var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
var days = Math.floor(t / (1000 * 60 * 60 * 24));
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
function initializeClock(id, endtime) {
var clock = document.getElementById(id);
var daysSpan = clock.querySelector('.days');
var hoursSpan = clock.querySelector('.hours');
var minutesSpan = clock.querySelector('.minutes');
var secondsSpan = clock.querySelector('.seconds');
function updateClock() {
var t = getTimeRemaining(endtime);
daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
if (t.total <= 0) {
clearInterval(timeinterval);
}
}
updateClock();
var timeinterval = setInterval(updateClock, 500);
}
<!DOCTYPE html>
<html>
<body>
<h1>Countdown Timer</h1>
<div id="timerdiv">
<div>
<span class="days"></span>
<div class="smalltext">Days</div>
</div>
<div>
<span class="hours"></span>
<div class="smalltext">Hours</div>
</div>
<div>
<span class="minutes"></span>
<div class="smalltext">Minutes</div>
</div>
<div>
<span class="seconds"></span>
<div class="smalltext">Seconds</div>
</div>
</div>
<center>
<p id="length"></p>
Days: <input type="number" id="lengthd"> Hours: <input type="number" id="lengthh"> Minutes: <input type="number" id="lengthm"> Seconds: <input type="number" id="lengths"><br>
<button class="button set" onClick="setlength()">Set</button>
</center>
<center>
<div><button class="button start" onClick="start()">Start</button></div>
</center>
</body>
</html>
Your function setlength() declares all the lengths as local variables, so they are only usable from within that function.
Instead of
function setlength() {
var lengthd = document.getElementById("lengthd").value;
var lengthh = document.getElementById("lengthh").value;
var lengthm = document.getElementById("lengthm").value;
var lengths = document.getElementById("lengths").value;
}
you should declare the variables outside of your function
var lengthd;
var lengthh;
var lengthm;
var lengths;
function setlength() {
lengthd = document.getElementById("lengthd").value;
lengthh = document.getElementById("lengthh").value;
lengthm = document.getElementById("lengthm").value;
lengths = document.getElementById("lengths").value;
}
Note that I haven't checked the rest of your code, since you're sure that it works.
I've currently got a countdown that counts to 11.59 am every day.
However, I need to set it so it counts down to Wednesday 11.59pm every week and only show from Monday.
So on Sunday, Saturday, Friday and Thursday the countdown won't show. I've figured that bit out but can't find a way to set my countdown for every Wednesday at 11.59pm.
I guess it would be done with getDay() somehow, but not sure how to put it together.
This is the code I've currently got:
var today = new Date(new Date().getTime());
var deadline = new Date(Date.UTC(today.getFullYear(), today.getMonth(), today.getDate(), 10, 59, 59));
function time_remaining(endtime) {
var t = endtime - new Date();
var seconds = Math.floor((t / 1000) % 60);
var minutes = Math.floor((t / 1000 / 60) % 60);
var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
return {
'total': t,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
function run_clock(id, endtime) {
var clock = document.getElementById(id);
if (null === clock) {
return;
}
var hours_span = clock.querySelector('.hours');
var minutes_span = clock.querySelector('.minutes');
var seconds_span = clock.querySelector('.seconds');
function update_clock() {
var t = time_remaining(endtime);
hours_span.innerHTML = ('0' + t.hours).slice(-2);
minutes_span.innerHTML = ('0' + t.minutes).slice(-2);
seconds_span.innerHTML = ('0' + t.seconds).slice(-2);
day = today.getDay();
if ((t.total <= 0) || (day === 0) || (day === 6) || (day === 5) || (day === 4)) {
clearInterval(timeinterval);
document.getElementById('deadline_Container').style.display = "none";
}
}
update_clock();
var timeinterval = setInterval(update_clock, 1000);
}
run_clock('clockdiv', deadline);
You can use the getDay() value to get the current day(0(Sunday)...6(Saturday)), then use that to show the calendar and find the dead line
var today = new Date(),
curDay = today.getDay();
var deadline = new Date(Date.UTC(today.getFullYear(), today.getMonth(), today.getDate() + 3 - curDay, 10, 59, 59));
//var x = 0;
function time_remaining(endtime) {
var t = endtime - new Date();
//var t = endtime - new Date(today).setSeconds(today.getSeconds()+ ++x);
var seconds = Math.floor((t / 1000) % 60);
var minutes = Math.floor((t / 1000 / 60) % 60);
var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
var days = Math.floor(t / (1000 * 60 * 60 * 24));
//console.log(t, days)
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
function run_clock(id, endtime) {
var clock = document.getElementById(id);
if (null === clock) {
return;
}
var days_span = clock.querySelector('.days');
var hours_span = clock.querySelector('.hours');
var minutes_span = clock.querySelector('.minutes');
var seconds_span = clock.querySelector('.seconds');
function update_clock() {
var t = time_remaining(endtime);
days_span.innerHTML = ('0' + t.days).slice(-2);
hours_span.innerHTML = ('0' + t.hours).slice(-2);
minutes_span.innerHTML = ('0' + t.minutes).slice(-2);
seconds_span.innerHTML = ('0' + t.seconds).slice(-2);
day = today.getDay();
if ((t.total <= 0) || (day === 0) || (day === 6) || (day === 5) || (day === 4)) {
clearInterval(timeinterval);
document.getElementById('deadline_Container').style.display = "none";
}
}
update_clock();
var timeinterval = setInterval(update_clock, 1000);
}
if (curDay > 0 && today < deadline) {
run_clock('clockdiv', deadline);
}
<div id="deadline_Container"></div>
<div id="clockdiv">
<span class="days"></span>
<span class="hours"></span>
<span class="minutes"></span>
<span class="seconds"></span>
</div>