Обратный отсчет времени
Всем привет. Нашел скрипт в просторах интернета. Мне понравился, но есть одна проблема: при обновлении страницы скрипт сбрасывает последние показания, после обновления страницы значения счетчика становятся на указанные.
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(); }); } }); |
damilurg,
1. почитать документацию на плагин. 2. найти решение на этом форуме через поиск. 3. обратиться в раздел работа если не 1. и не 2. |
Речь идет об этом таймере? Если да:
В папке js,в файле script.js-замени код вот на этот: $(function(){ var note = $('#note'), ts = new Date(2014, 0, 1), // <-----дата newYear = true; if((new Date()) > ts){ // Задаем точку отсчета для примера. Пусть будет очередной Новый год или дата через 10 дней. // Обратите внимание на *1000 в конце - время должно задаваться в миллисекундах ts = (new Date()).getTime() + 5*24*60*60*1000; // настраиваем здесь newYear = false; } $('#countdown').countdown({ timestamp : ts, callback : function(days, hours, minutes, seconds){ var message = ""; message += "Дней: " + days +", "; message += "часов: " + hours + ", "; message += "минут: " + minutes + " и "; message += "секунд: " + seconds + " <br />"; if(newYear){ message += "осталось до Нового года!"; } else { //message += "осталось до момента через 10 дней!"; } note.html(message); } }); }); |
Часовой пояс GMT +3, время: 19:57. |