I have a countdown timer that's working well except that the countdown starts over from the beginning when I reload the page.
Here is my HTML.
<!DOCTYPE html>
<html>
<head>
<title>DrugStore.pk | Under Construction</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--css-->
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="css/jquery.countdown.css" />
<!--/css-->
<!--js-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.countdown.js"></script>
<script src="js/script.js"></script>
<!--js-->
<!-- webfonts -->
<link href='? family=Open+Sans:400,300,700,800' rel='stylesheet' type='text/css'>
<!-- webfonts -->
</head>
<body>
<div class="banner">
<div class="wrap">
<div class="banner-text">
<h1>Drug Store</h1>
<h2>Something awesome is ing your way !<br/>Our website is under construction but we are in the final stage of the development program</h2>
</div>
<div class="timer_wrap">
<div id="counter"> </div>
</div>
</div>
</div>
<div class="clear"> </div>
</div>
<div class="banner-text-info">
<p>Stay in Touch to get the latest updates:</p>
<div class="copy-rights">
</div>
</body>
</html>
In script.js I have:
/* ---- Countdown timer ---- */
$('#counter').countdown({
timestamp : (new Date()).getTime() + 34*24*60*60*1000
});
/* ---- Animations ---- */
$('#links a').hover(
function(){ $(this).animate({ left: 3 }, 'fast'); },
function(){ $(this).animate({ left: 0 }, 'fast'); }
);
$('footer a').hover(
function(){ $(this).animate({ top: 3 }, 'fast'); },
function(){ $(this).animate({ top: 0 }, 'fast'); }
);
And this is jquerycountdown.js:
(function($){
// Number of seconds in every time division
var days = 24*60*60,
hours = 60*60,
minutes = 60;
// Creating the plugin
$.fn.countdown = function(prop){
var options = $.extend({
callback : function(){},
timestamp : 0
},prop);
var left, d, h, m, s, positions;
// Initialize the plugin
init(this, options);
positions = this.find('.position');
(function tick(){
// Time left
left = Math.floor((options.timestamp - (new Date())) / 1000);
if(left < 0){
left = 0;
}
// Number of days left
d = Math.floor(left / days);
updateDuo(0, 1, d);
left -= d*days;
// Number of hours left
h = Math.floor(left / hours);
updateDuo(2, 3, h);
left -= h*hours;
// Number of minutes left
m = Math.floor(left / minutes);
updateDuo(4, 5, m);
left -= m*minutes;
// Number of seconds left
s = left;
updateDuo(6, 7, s);
// Calling an optional user supplied callback
options.callback(d, h, m, s);
// Scheduling another call of this function in 1s
setTimeout(tick, 1000);
})();
// This function updates two digit positions at once
function updateDuo(minor,major,value){
switchDigit(positions.eq(minor),Math.floor(value/10)%10);
switchDigit(positions.eq(major),value%10);
}
return this;
};
function init(elem, options){
elem.addClass('countdownHolder');
// Creating the markup inside the container
$.each(['Days','Hours','Minutes','Seconds'],function(i){
var boxName;
if(this=="Days") {
boxName = "DAYS";
}
else if(this=="Hours") {
boxName = "Hours";
}
else if(this=="Minutes") {
boxName = "Minutes";
}
else {
boxName = "Seconds";
}
$('<div class="count'+this+'">' +
'<span class="position">' +
'<span class="digit static">0</span>' +
'</span>' +
'<span class="position">' +
'<span class="digit static">0</span>' +
'</span>' +
'<span class="boxName">' +
'<span class="'+this+'">' + boxName + '</span>' +
'</span>'
).appendTo(elem);
if(this!="Seconds"){
elem.append('<span class="points">:</span><span class="countDiv countDiv'+i+'"></span>');
}
});
}
// Creates an animated transition between the two numbers
function switchDigit(position,number){
var digit = position.find('.digit')
if(digit.is(':animated')){
return false;
}
if(position.data('digit') == number){
// We are already showing this number
return false;
}
position.data('digit', number);
var replacement = $('<span>',{
'class':'digit',
css:{
top:0,
opacity:0
},
html:number
});
// The .static class is added when the animation
// pletes. This makes it run smoother.
digit
.before(replacement)
.removeClass('static')
.animate({top:0,opacity:0},'fast',function(){
digit.remove();
})
replacement
.delay(100)
.animate({top:0,opacity:1},'fast',function(){
replacement.addClass('static');
});
}
})(jQuery);
I have a countdown timer that's working well except that the countdown starts over from the beginning when I reload the page.
Here is my HTML.
<!DOCTYPE html>
<html>
<head>
<title>DrugStore.pk | Under Construction</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--css-->
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="css/jquery.countdown.css" />
<!--/css-->
<!--js-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.countdown.js"></script>
<script src="js/script.js"></script>
<!--js-->
<!-- webfonts -->
<link href='http://fonts.googleapis./css? family=Open+Sans:400,300,700,800' rel='stylesheet' type='text/css'>
<!-- webfonts -->
</head>
<body>
<div class="banner">
<div class="wrap">
<div class="banner-text">
<h1>Drug Store</h1>
<h2>Something awesome is ing your way !<br/>Our website is under construction but we are in the final stage of the development program</h2>
</div>
<div class="timer_wrap">
<div id="counter"> </div>
</div>
</div>
</div>
<div class="clear"> </div>
</div>
<div class="banner-text-info">
<p>Stay in Touch to get the latest updates:</p>
<div class="copy-rights">
</div>
</body>
</html>
In script.js I have:
/* ---- Countdown timer ---- */
$('#counter').countdown({
timestamp : (new Date()).getTime() + 34*24*60*60*1000
});
/* ---- Animations ---- */
$('#links a').hover(
function(){ $(this).animate({ left: 3 }, 'fast'); },
function(){ $(this).animate({ left: 0 }, 'fast'); }
);
$('footer a').hover(
function(){ $(this).animate({ top: 3 }, 'fast'); },
function(){ $(this).animate({ top: 0 }, 'fast'); }
);
And this is jquerycountdown.js:
(function($){
// Number of seconds in every time division
var days = 24*60*60,
hours = 60*60,
minutes = 60;
// Creating the plugin
$.fn.countdown = function(prop){
var options = $.extend({
callback : function(){},
timestamp : 0
},prop);
var left, d, h, m, s, positions;
// Initialize the plugin
init(this, options);
positions = this.find('.position');
(function tick(){
// Time left
left = Math.floor((options.timestamp - (new Date())) / 1000);
if(left < 0){
left = 0;
}
// Number of days left
d = Math.floor(left / days);
updateDuo(0, 1, d);
left -= d*days;
// Number of hours left
h = Math.floor(left / hours);
updateDuo(2, 3, h);
left -= h*hours;
// Number of minutes left
m = Math.floor(left / minutes);
updateDuo(4, 5, m);
left -= m*minutes;
// Number of seconds left
s = left;
updateDuo(6, 7, s);
// Calling an optional user supplied callback
options.callback(d, h, m, s);
// Scheduling another call of this function in 1s
setTimeout(tick, 1000);
})();
// This function updates two digit positions at once
function updateDuo(minor,major,value){
switchDigit(positions.eq(minor),Math.floor(value/10)%10);
switchDigit(positions.eq(major),value%10);
}
return this;
};
function init(elem, options){
elem.addClass('countdownHolder');
// Creating the markup inside the container
$.each(['Days','Hours','Minutes','Seconds'],function(i){
var boxName;
if(this=="Days") {
boxName = "DAYS";
}
else if(this=="Hours") {
boxName = "Hours";
}
else if(this=="Minutes") {
boxName = "Minutes";
}
else {
boxName = "Seconds";
}
$('<div class="count'+this+'">' +
'<span class="position">' +
'<span class="digit static">0</span>' +
'</span>' +
'<span class="position">' +
'<span class="digit static">0</span>' +
'</span>' +
'<span class="boxName">' +
'<span class="'+this+'">' + boxName + '</span>' +
'</span>'
).appendTo(elem);
if(this!="Seconds"){
elem.append('<span class="points">:</span><span class="countDiv countDiv'+i+'"></span>');
}
});
}
// Creates an animated transition between the two numbers
function switchDigit(position,number){
var digit = position.find('.digit')
if(digit.is(':animated')){
return false;
}
if(position.data('digit') == number){
// We are already showing this number
return false;
}
position.data('digit', number);
var replacement = $('<span>',{
'class':'digit',
css:{
top:0,
opacity:0
},
html:number
});
// The .static class is added when the animation
// pletes. This makes it run smoother.
digit
.before(replacement)
.removeClass('static')
.animate({top:0,opacity:0},'fast',function(){
digit.remove();
})
replacement
.delay(100)
.animate({top:0,opacity:1},'fast',function(){
replacement.addClass('static');
});
}
})(jQuery);
-
Whenever you reload your page,
scriptre-initiate its state, your previous state is not being maintained anywhere.. – Rayon Commented Sep 21, 2015 at 19:11 - you should ajax for that. – urfusion Commented Sep 21, 2015 at 19:11
- 3 client-side JavaScript cannot act as a database unless you're using localStorage or IndexedDB, which you're not. Use a database or at least cookies. There's way too many possible ways too do this. You need to choose which one you want. – Jeff Noel Commented Sep 21, 2015 at 19:13
- Please provide me some code it will really helpful for me – Sam khan Commented Sep 21, 2015 at 19:13
- You really can write cookie with start time and load cookie (if exists) on script initialising (as @JeffNoel say) – Andrew Paramoshkin Commented Sep 21, 2015 at 19:20
1 Answer
Reset to default 6Persistent countdown timer per client
Your current code starts a 34-day countdown when a user loads the page. You can keep the timer going through multiple sessions of the same client—i.e., the same browser—by storing the initial timestamp in the browser's local storage.
In the file script.js, under the ment /* ---- Countdown timer ---- */, replace these lines:
$('#counter').countdown({
timestamp : (new Date()).getTime() + 34*24*60*60*1000
});
with these lines:
var countdownTarget = localStorage.getItem('countdownTarget'); // Read from storage.
if (countdownTarget === null) { // Not stored?
countdownTarget = (new Date()).getTime() + 34*24*60*60*1000; // Make a new one.
localStorage.setItem('countdownTarget', countdownTarget); // Store it.
}
$('#counter').countdown({
timestamp : countdownTarget
});
This code uses localStorage, which persists across browser sessions. If you want the timestamp to be forgotten when the user quits the browser, use sessionStorage instead.
Universal countdown to a fixed date
If your goal is to have all clients show a timer that counts down to a fixed point in time, you must calculate that fixed point in the client. You can do so in JavaScript with Date.UTC(), which lets you specify a date in Coordinated Universal Time (UTC). UTC is roughly equivalent to Greenwich Mean Time.
If you're counting down to 2015 October 25 7:00 UTC, for example, you can write the following:
var countdownTarget = Date.UTC(2015, 9, 25, 7);
Note that the month argument is an integer between 0 and 11, inclusive. Thus, October, the 10th month, is represented as 9. The day argument, however, starts from 1, so the 25th day is represented as 25.
To implement this in script.js, replace the lines under /* ---- Countdown timer ---- */ with:
$('#counter').countdown({
timestamp : Date.UTC(2015, 9, 25, 7)
});