Всем привет. Нашел скрипт в просторах интернета. Мне понравился, но есть одна проблема: при обновлении страницы скрипт сбрасывает последние показания, после обновления страницы значения счетчика становятся на указанные.
jquery.countdown.js
/**
* @name jQuery Countdown Plugin
* @author Martin Angelov
* @version 1.0
* @url [url]http://tutorialzine.com/2011/12/countdown-jquery/[/url]
* @license MIT License
*/
(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 = "HRS";
}
else if(this=="Minutes") {
boxName = "MINS";
}
else {
boxName = "SECS";
}
$('<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
// completes. 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);
modernizr.custom.js
/* Modernizr 2.6.1 (Custom Build) | MIT & BSD
* Build: [url]http://modernizr.com/download/#-input[/url]
*/
;window.Modernizr=function(a,b,c){function t(a){i.cssText=a}function u(a,b){return t(prefixes.join(a+";")+(b||""))}function v(a,b){return typeof a===b}function w(a,b){return!!~(""+a).indexOf(b)}function x(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:v(f,"function")?f.bind(d||b):f}return!1}function y(){e.input=function(c){for(var d=0,e=c.length;d<e;d++)n[c[d]]=c[d]in j;return n.list&&(n.list=!!b.createElement("datalist")&&!!a.HTMLDataListElement),n}("autocomplete autofocus list placeholder max min multiple pattern required step".split(" "))}var d="2.6.1",e={},f=b.documentElement,g="modernizr",h=b.createElement(g),i=h.style,j=b.createElement("input"),k={}.toString,l={},m={},n={},o=[],p=o.slice,q,r={}.hasOwnProperty,s;!v(r,"undefined")&&!v(r.call,"undefined")?s=function(a,b){return r.call(a,b)}:s=function(a,b){return b in a&&v(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=p.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(p.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(p.call(arguments)))};return e});for(var z in l)s(l,z)&&(q=z.toLowerCase(),e[q]=l[z](),o.push((e[q]?"":"no-")+q));return e.input||y(),e.addTest=function(a,b){if(typeof a=="object")for(var d in a)s(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,enableClasses&&(f.className+=" "+(b?"":"no-")+a),e[a]=b}return e},t(""),h=j=null,e._version=d,e}(this,this.document);
script.js
$(document).ready(function(){
/* ---- Countdown timer ---- */
$('#counter').countdown({
timestamp : (new Date()).getTime() + 10*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'); }
);
/* ---- Using Modernizr to check if the "required" and "placeholder" attributes are supported ---- */
if (!Modernizr.input.placeholder) {
$('.email').val('Input your e-mail address here...');
$('.email').focus(function() {
if($(this).val() == 'Input your e-mail address here...') {
$(this).val('');
}
});
}
// for detecting if the browser is Safari
var browser = navigator.userAgent.toLowerCase();
if(!Modernizr.input.required || (browser.indexOf("safari") != -1 && browser.indexOf("chrome") == -1)) {
$('form').submit(function() {
$('.popup').remove();
if(!$('.email').val() || $('.email').val() == 'Input your e-mail address here...') {
$('form').append('<p class="popup">Please fill out this field.</p>');
$('.email').focus();
return false;
}
});
$('.email').keydown(function() {
$('.popup').remove();
});
$('.email').blur(function() {
$('.popup').remove();
});
}
});
