Hi I am facing timer countdown problem in page reload, below is my code
<html>
<head>
<script type="text/javascript">
function getTimeRemaining(endtime) {
var t = Date.parse(endtime) - Date.now();
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);
if (t.total <= 0) {
document.getElementById("clockdiv").className = "hidden-div";
document.getElementById("timeIsNow").className = "visible-div";
clearInterval(timeinterval);
return true;
}
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);
}
updateClock();
var timeinterval = setInterval(updateClock, 1000);
}
var deadline = '2015-12-14T20:14:00+02:00';
initializeClock('clockdiv', deadline);
</script>
<style>
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;
}
.hidden-div {
visibility: hidden;
}
.visible-div {
visibility: visible;
}
#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;
}
</style>
</head>
<body>
<h1>Countdown Clock</h1>
<div id="clockdiv" class="visible-div">
<span class="days"></span> Days
<span class="hours"></span> Hours
<span class="minutes"></span> Minutes
<span class="seconds"></span> Seconds
</div>
</body>
</html>
when I reload my page the timer is setting to it is default time and it is displaying from setting time, I have few codes which come across online but I am unable to do this, so I am seeing some help in doing it.
Thank you.
I'm assuming you want to compute the time until e set date in the future.
You have 3 issues in your code that prevent that:
1.Your html, that is accessed by your js is loaded AFTER the js. You are referencing divs that were not loaded (for example here var clock = document.getElementById(id);). This breaks your script.
2.The element referenced here does not exist: document.getElementById("timeIsNow").className = "visible-div";. This breaks your script.
3.The target date is in the past (var deadline = '2015-12-14T20:14:00+02:00';). This does not break the script, but it clears the timer (so obviously it will only tick twice).
4.In the code you posted there is no other thing preventing you to compute the time, and it will work after reload since the date is hardcoded. Any other issues regarding timezones, date refreshing etc. are not related to the posted code.
As a side note (don't take this the wrong way, I'm just trying to help and it is a personal opinion)... the code is tragic (the scope of functions, computing on client side, indent, etc.). And the method used for computing is questionable at best; I suggest a refactoring (but those are not related with the question, just some tips).
This will helpful if you want to call on every second
function worldClockZone() {
setTimeout("worldClockZone()", 1000)
}
window.onload = worldClockZone;
Related
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.
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);
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.
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.
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