countdown to specific date - javascript

I've got this countdown timer JavaScript code, but it restarts every time I refresh my browser.
I want it to countdown to a particular date, instead.
How can I achieve that?
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()) + 21 * 24 * 60 * 60 * 1000);
initializeClock('clockdiv', deadline);
<div id="clockdiv">
<span class="days"></span>
<span class="hours"></span>
<span class="minutes"></span>
<span class="seconds"></span>
</div>

Maybe because each time you refresh browser the end time is the same in case you add 21 days to the current time. So each time you have 21 days interval. To solve this problem set fixed time like Date.parse('2018-01-11 20:00:00').

Correct update from #ChrisG
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 = "2018-01-30T12:00:00-0500";
initializeClock('clockdiv', deadline);

Related

Countdown timer does not receive a value input?

I have input with values. However, the countdown time cannot receive values. It just takes the default value. I have consulted on the Internet but it doesn't seem to work properly. Please give me a solution. Tks
HTML:
<div id="clockdiv">
<input type="text" value="1" id="day">
<input type="text" value="10" id="hours">
<input type="text" value="20" id="minutes">
<input type="text" value="5" id="seconds">
</div>
JS:
<script>
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 dayget = document.getElementById("day").value;
var hoursget = document.getElementById("hours").value;
var minutesget = document.getElementById("minutes").value;
var secondsget = document.getElementById("seconds").value;
var deadline = new Date(Date.parse(new Date()) + dayget * hoursget * minutesget * secondsget * 1000);
initializeClock('clockdiv', deadline);
</script>
Show time:
<span class="days"></span>
<span class="hours"></span>
<span class="minutes"></span>
<span class="seconds"></span>
U need to take your spans in your div. Because your querySelector search your span in this div
let timeinterval;
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();
timeinterval = setInterval(updateClock, 1000);
}
function start(){
clearInterval(timeinterval)
var dayget = document.getElementById("day").value;
var hoursget = document.getElementById("hours").value;
var minutesget = document.getElementById("minutes").value;
var secondsget = document.getElementById("seconds").value;
var deadline = new Date(Date.parse(new Date()) + (dayget * 1000 * 60 * 60 * 24)+
(hoursget * 1000 * 60 * 60 )+
(minutesget * 1000 * 60)+
(secondsget * 1000 )
);
initializeClock('clockdiv', deadline);
}
start();
<div id="clockdiv">
<input type="text" value="1" id="day"oninput="start()">
<input type="text" value="10" id="hours"oninput="start()">
<input type="text" value="20" id="minutes"oninput="start()">
<input type="text" value="5" id="seconds"oninput="start()">
<br><br>
<span class="days"></span>
<span class="hours"></span>
<span class="minutes"></span>
<span class="seconds"></span>
</div>

js countdown clock reloads every time browser is refreshed, how can I prevent this?

The following code produces a countdown clock for 15 days and counts down day, hour, minute, second. But, every time the browser is reloaded the clock restarts? What do I need to to do to change this?
<script>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);</script>
var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000); this is not a static/const value. it's changing every time page load. so you have to find a way to have a static endTime value. as #de-bugged said you can get that either server-side or store in local storage or use const variable
like : const endTime = "Thu Jul 26 2018 11:11:38 GMT+0530 (India Standard Time)";
or like : const endTime = 1532583817343 //timestamp
Here is an example of how you can do it. Do not use this code though. Its not meant for production :)
I used localstorage here but you can also use session storage, cookies, server side solutions, and const
<div id="clockdiv">
<span class="days"></span>
<span class="hours"></span>
<span class="minutes"></span>
<span class="seconds"></span>
</div>
<script>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 deadLineTime = parseInt(localStorage.getItem('deadLineTime')) || false;
if(!deadLineTime){
deadLineTime = Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000;
localStorage.setItem('deadLineTime', deadLineTime);
}
var deadline = new Date(deadLineTime2);
initializeClock('clockdiv', deadline);
</script>

cookie in javascript restarts after each refresh

I am using this timer on each of my product pages: http://www.screencast.com/t/hsmzVOLBUJ
and example of product page URL:
https://www.tresor-ethnique.com/collections/celtique/products/pendentif-chene-millenaire
It starts at 12hrs 4mn 26s and then decreases.
I would like it to be set with a cookie so that when the user navigates between different product pages, it keeps decreasing from the value of other pages ; and also if the user comes back in 12hrs, it displays 0hrs 4mn 26s.
So I am a bit unfamiliar with the integration of cookie in javascript, this would appear in the end of my code there:
document.cookie = 'myClock='
So far, the timer resets after each refresh
Do you have any idea to prevent that?
This would be a great help, thank you very much :)
<div id="clockdiv">
<span class="days"></span><div class="smalltext">jours</div>
<span class="hours"></span><div class="smalltext">hrs</div>
<span class="minutes"></span><div class="smalltext">mins</div>
<span class="seconds"></span><div class="smalltext">secs</div>
</div>
<script type="text/javascript">
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 currentTime = Date.parse(new Date());
if(document.cookie && document.cookie.match('myClock')){
var deadline = document.cookie.match(/(^|;)myClock=([^;]+)/)[2];
}
else{
var timeInHours = 12;
var timeInMinutes = 4;
var timeInSeconds = 26;
var currentTime = Date.parse(new Date());
var deadline = new Date(currentTime + timeInHours*60*60*1000 + timeInMinutes*60*1000 + timeInSeconds*1000);
document.cookie = 'myClock=' + deadline + '; path=/; domain= .https://www.tresor-ethnique.com/';
initializeClock('clockdiv', deadline);
}
</script>

Countdown Timer Using the Server Time PHP and Laravel

I have a simple JS code to do countdown on the Client browser but there is a short coming the timer depends on the client machine so i want to get the Current Time and elapsed time from the Server.
Below is my working but it doesn't work.
function getTimeRemaining(endtime) {
var t = Date.parse(endtime) - Date.parse(current_time);
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, current_time) {
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, current_time);
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);
$('#clockdiv').html('You can\'t Reserve anymore')
}
}
updateClock();
var timeinterval = setInterval(updateClock, 1000);
}
var deadline = '2017-02-24 18:12:29';
var current_time = new EventSource('Server/script/example.php');
current_time.onopen = function(event) {
//console.log(event)
current_time.onmessage = function(event)
{
return event.data;
}
current_time.onerror = function (error) {
//console.log('we have an error')
}
}
console.log(current_time)
initializeClock('clockdiv', deadline, current_time);
So am trying to use HTML SSE server Sent Event so as Listen to response instead of making the request.
current_time variable is empty and the output of the Time is NAN NAN NAN
So is there a better of achieving the above or can some work this code for me.

JavaScript counter that continue from where left

I'm trying to create a countdown counter that should countdown for 24 hours, displaying the days, the hours, the minutes and the seconds. The question is that I want to make it somehow save the progress. For example, I put the countdown to start from now till tomorrow the same time (24 hours) and when a user comes in my site after 2 hours the counter should start from 22 hours for that user and if the user closes the site and then comes back after 2 hours the counter should start from 20 hours for that user. I hope it's clear enough. I found that if that is possible it could be done using cookies, but I'm not sure how it should be done... If anyone could help it will be great! :3
Here is my code so far:
HTML:
<div id="clockdiv">
<span class="days"></span>
<span class="hours"></span>
<span class="minutes"></span>
<span class="seconds"></span>
</div>
JavaScript
// if there's a cookie with the name myClock, use that value as the deadline
if(document.cookie && document.cookie.match('myClock')){
// get deadline value from cookie
var deadline = document.cookie.match(/(^|;)myClock=([^;]+)/)[2];
}
// otherwise, set a deadline 10 minutes from now and
// save it in a cookie with that name
else{
// create deadline 10 minutes from now
var timeInMinutes = 1380;
var currentTime = Date.parse(new Date());
var deadline = new Date(currentTime + timeInMinutes*60*1000);
// store deadline in cookie for future reference
document.cookie = 'myClock=' + deadline + '; path=/; domain=.optic2n.com';
}
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);
}
initializeClock('clockdiv', deadline);
Thank you in advance for the help! :3
Best regards,
Tsvetko Krastev
It is possible I have missed something, but your code seems very complex for something so simple. Here is what I came up with:
HTML:
<div id="clockdiv">
<span id="d" class="days"></span>days
<span id="h" class="hours"></span>hrs
<span id="m" class="minutes"></span>mins
<span id="s" class="seconds"></span>secs
</div>
Javascript:
var deadline = localStorage.getItem('dl') ? parseInt(localStorage.getItem('dl')) : (Date.now() + 86400000);
var delay = null;
// Good spot to do checks for 24hrs has passed already here
localStorage.setItem('dl',deadline);
function render() {
if (delay) {
clearTimeout(delay);
delay = null;
}
var diff = (deadline - Date.now()) / 1000;
document.getElementById('d').innerHTML = Math.floor(diff / 86400);
document.getElementById('h').innerHTML = Math.floor(diff / 3600);
document.getElementById('m').innerHTML = Math.floor((diff / 60) % 60);
document.getElementById('s').innerHTML = Math.floor(diff % 60);
delay = setTimeout(render,1000);
}
render();
NOTE: There are no checks for what to do after 24 hours.

Categories

Resources