Develop Reference

How can I make this countdown reset every week after showing a message for 1 day? code included

So I have a countdown which counts down then displays a message which works well. The thing I have to manually edit the date to restart the countdown. I want it to display the message for that day only, then once that day has ended, reset and count down again automatically.
Thank you for your help.
This is the code so far:
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 = ('0' + t.days).slice(-2);
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) {
document.getElementById("clockdiv").className = "hidden-div";
document.getElementById("timeIsNow").className = "visible-div";
clearInterval(timeinterval);
}
}
updateClock();
var timeinterval = setInterval(updateClock, 1000);
}
var deadline = 'April 28 2021 20:00:00 GMT+01';
//var deadline = new Date(Date.parse(new Date()) + 100 * 24 * 60 * 60 * 1000); // sets 15 day countdown
initializeClock('clockdiv', deadline);
// getTimeRemaining(deadline).minutes;
<style>
.cent {
margin: auto;
width: 50%;
padding: 10px;
text-align: center;
}
h1{
color: #396;
font-weight: 500;
font-size: 30px;
margin: 0px 0px 0px;
}
#clockdiv{
font-family: sans-serif;
color: #fff;
display: inline-block;
font-weight: 100;
text-align: center;
font-size: 20px;
}
#clockdiv > div{
padding: 10px;
border-radius: 8px;
background: #121212;
display:inline-block;
margin: 1px;
}
#clockdiv div > span{
padding: 08px;
border-radius: 8px;
background: #f12e70;;
display: inline-block;
}
.smalltext{
padding-top: 5px;
font-size: 16px;
}
.hidden-div {
visibility: hidden;
}
.visible-div {
visibility: visible;
}
</style>
<div id="timeIsNow" class="hidden-div">
<h1>Message is Live</h1>
</div>
<div id="clockdiv">
<div>
<span class="days"></span>
<div class="smalltext">D</div>
</div>
<div>
<span class="hours"></span>
<div class="smalltext">H</div>
</div>
<div>
<span class="minutes"></span>
<div class="smalltext">M</div>
</div>
<div>
<span class="seconds"></span>
<div class="smalltext">S</div>
</div>
</div>

When
t.total <= 0
Set deadline to current time at time of completion.. something like
new Date().toISOString()
From your code you have deadline set to endtime inside initializeClock(id, endtime) so you would update endtime inside the function when time is 0
endtime = new Date().toISOString()
There will no doubt still be some further changes but this would be the essence of it.

Error when I refresh count down it's restart

I have this code for CountDown and When I refresh the page It's count from the beginning.
I want to continue counting from where it arrived even after several times of the update:
I have this code for CountDown and When I refresh the page It's count from the beginning.
I want to continue counting from where it arrived even after several times of the update:
// Set the date we're counting down to
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);
initializeClock('clockdiv', deadline);
body {
text-align: center;
background: #ffffff;
/*font-family: sans-serif;*/
font-weight: 100;
}
h1 {
color: #e5534c;
font-weight: 900;
font-size: 40px;
margin: 40px 0px 20px;
font-family: 'Cairo', sans-serif;
}
#clockdiv {
font-family: sans-serif;
color: #fff;
display: inline-block;
font-weight: 100;
text-align: center;
font-size: 30px;
}
#clockdiv>div {
padding: 10px;
border-radius: 3px;
background: #e5534c;
display: inline-block;
}
#clockdiv div>span {
padding: 15px;
border-radius: 3px;
background: #515251;
display: inline-block;
font-family: 'Cairo', sans-serif;
}
.smalltext {
padding-top: 5px;
font-size: 16px;
color: #fff;
font-weight: 600;
font-family: 'Cairo', sans-serif;
}
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Cairo" rel="stylesheet">
</head>
<body>
<h1>The remaining duration of the white Friday cuts</h1>
<div id="clockdiv">
<div>
<span class="days"></span>
<div class="smalltext">Day</div>
</div>
<div>
<span class="hours"></span>
<div class="smalltext">Hour</div>
</div>
<div>
<span class="minutes"></span>
<div class="smalltext">Minute</div>
</div>
<div>
<span class="seconds"></span>
<div class="smalltext">Second</div>
</div>
</div>
</body>
</html>

Save deadline in sessionStorage.
Replace the two lines:
var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);
initializeClock('clockdiv', deadline);
with this:
var deadline;
var savedDeadline = sessionStorage.getItem("deadline");
if (savedDeadline) {
deadline = parseInt(savedDeadline);
} else {
deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);
sessionStorage.setItem("deadline", deadline);
}
initializeClock('clockdiv', deadline);

Countdown Timer Javascript In Line Code External Scripts

I found this piece of code online Countdown Timer
And attempted to implement it on a page but it wasn't counting down. Thanks to all who commented. Here's the NOW WORKING sample code (see below snippet)
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);
initializeClock('clockdiv', deadline);
#clockdiv{
font-family: sans-serif;
color: #fff;
display: inline-block;
font-weight: 100;
text-align: center;
font-size: 30px;
}
#clockdiv > div{
padding: 10px;
border-radius: 3px;
background: #00BF96;
display: inline-block;
}
#clockdiv div > span{
padding: 15px;
border-radius: 3px;
background: #00816A;
display: inline-block;
}
.smalltext{
padding-top: 5px;
font-size: 16px;
}
<div id="clockdiv" align='center'>
<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>
Perhaps it needs to do a body onload or I'm missing something because when I try the code it just shows empty boxes and no timer.
While there are many great clock plugins, it makes sense to just do this in raw javascipt as the article says:
code will be lightweight because it will have zero external scripts
website will perform better because you won’t need to load external scripts and style sheets.
have more control because you will have built the clock to behave exactly the way you want it to (rather than trying to bend a plugin to your will).
It seems like a useful piece of code if it could be made to work with minimal changes. What am I missing?
Thanks!

If clock is null, then your selector #clockdiv is failing. The DOM hasn't been populated yet at the time your script runs: either move the script to the bottom of the body so that the body (including #clockdiv) exists before the script runs, or save the script in its own .js file and give it a defer attribute, or wrap the whole script in a DOMContentLoaded listener (so it waits for the document to be parsed before running).

Like #Certain Performance said, you are trying to run your JS before the element has been created. The cleanest solution would be to move your JS to it's own file and include it at the bottom of the body tag.
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);
initializeClock('clockdiv', deadline);
body {
text-align: center;
}
#clockdiv {
font-family: sans-serif;
color: #fff;
display: inline-block;
font-weight: 100;
text-align: center;
font-size: 30px;
margin: auto;
}
#clockdiv>div {
padding: 10px;
border-radius: 3px;
background: #00BF96;
display: inline-block;
}
#clockdiv div>span {
padding: 15px;
border-radius: 3px;
background: #00816A;
display: inline-block;
}
.smalltext {
padding-top: 5px;
font-size: 16px;
}
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Countdown timer</title>
</head>
<body>
<!--[if lte IE 9]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience and security.</p>
<![endif]-->
<h1>Stack Overflow Countdown timer.</h1>
<div id="clockdiv" align='center'>
<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>
<!-- Run at the end of the page -->
<script src="js/main.js"></script>
</body>
</html>

It is because you are trying to get the DOM element using document.getElementById function before the DOM object was created.
Either you move the script code at the bottom of the code or call initializeClock function in DOMContentLoaded or body load or document load or window load event function.

JS countdown clock not counting down

I'm trying to implement a countdown clock on my page, it works in this snippet but not on the testing page and I'm not sure why as I have just copied over the same code.
Here is the test page I am trying it out on: https://www.gkunions.co.uk/test/
$(document).ready(function() {
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()) + 33 * 24 * 60 * 60 * 1000);
initializeClock('clockdiv', deadline);
});
h1{
color: #396;
font-weight: 100;
font-size: 40px;
margin: 40px 0px 20px;
}
#clockdiv{
font-family: sans-serif;
color: #fff;
display: inline-block;
font-weight: 100;
text-align: center;
font-size: 30px;
}
#clockdiv > div{
padding: 10px;
border-radius: 3px;
background: #00BF96;
display: inline-block;
}
#clockdiv div > span{
padding: 15px;
border-radius: 3px;
background: #00816A;
display: inline-block;
}
.smalltext{
padding-top: 5px;
font-size: 16px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

I've debugged your code and found that for some reason deadline initialises wrong, at the beginning of the Unix era. Change:
var deadline = new Date(Date.parse(new Date()) + 33 * 24 * 60 * 60 * 1000);
to:
var deadline = new Date().getTime() + 33 * 24 * 60 * 60 * 1000;
and change:
var t = Date.parse(endtime) - Date.parse(new Date());
to:
var t = endtime - new Date().getTime();

Some script on your page overwrites the Date.parse method, which then returns null and causes the wrong date to be generated.

Countdown Clock (JS)

I can get the following to work in jsfiddle, but not on my website. The digits don't display, which leads me to think there's something wrong with my js. Do I need to add window.onload somewhere and if so, where?
html:
<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>
CSS:
body {
text-align: center;
background: #00ECB9;
font-family: sans-serif;
font-weight: 100;
}
h1 {
color: #396;
font-weight: 100;
font-size: 40px;
margin: 40px 0px 20px;
}
#clockdiv {
font-family: sans-serif;
color: #fff;
display: inline-block;
font-weight: 100;
text-align: center;
font-size: 30px;
}
#clockdiv > div {
padding: 10px;
border-radius: 3px;
background: #00BF96;
display: inline-block;
}
#clockdiv div > span {
padding: 15px;
border-radius: 3px;
background: #00816A;
display: inline-block;
}
.smalltext {
padding-top: 5px;
font-size: 16px;
}
JS:
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);
}
// change date below to change countdown
var deadline = 'February 26 2016 17:00:00 GMT+12:00';
initializeClock('clockdiv', deadline);
Any assistance you can provide would be greatly appreciated. Thanks.

JSFiddle automatically puts your JavaScript in the onload function. If you don't have it that way on your website, simply wrap this portion of your JavaScript in the event listener:
window.addEventListener("load", function () {
// change date below to change countdown
var deadline = 'February 26 2016 17:00:00 GMT+12:00';
initializeClock('clockdiv', deadline);
});
A good explanation of the window.onload can be found here:
The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images, scripts, links and sub-frames have finished loading.
(emphasis mine)

Notice the onLoad property when you click on the "JavaScript" button on JSFiddle, it specifies that the code included there is loaded after the rest of the content.
So try to add window.onload = right before you call your functions, as more precisely specified here:
https://developer.mozilla.org/en/docs/Web/API/GlobalEventHandlers/onload