Вы здесь

Скрипт обратного отсчета времени

На днях понадобилось сделать на javascript-е обратный отсчет времени, то есть показывать сколько лет, месяцев, дней, часов, минут, секунд осталось до заданной даты. Нашёл несколько плагинов для jQuery, но они мне показались слишком перегруженными лишней функциональностью. В итоге решил написать свой простой плагин, реалзиующий обратный отсчёт времени.

jQuery.fn.countdown = function (date, options) {

 

		options = jQuery.extend({
			lang: {
				years:   ['год', 'года', 'лет'],
				months:  ['месяц', 'месяца', 'месяцев'],
				days:    ['день', 'дня', 'дней'],
				hours:   ['час', 'часа', 'часов'],
				minutes: ['минута', 'минуты', 'минут'],
				seconds: ['секунда', 'секунды', 'секунд'],
				plurar:  function(n) {
					return (n % 10 == 1 && n % 100 != 11 ? 0 : n % 10 >= 2 && n % 10 <= 4 && (n % 100 < 10 || n % 100 >= 20) ? 1 : 2);
				}
			}, 
			prefix: "Осталось: ", 
			finish: "Всё"			
		}, options);
 
		var timeDifference = function(begin, end) {
		    if (end < begin) {
			    return false;
		    }
		    var diff = {
		    	seconds: [end.getSeconds() - begin.getSeconds(), 60],
		    	minutes: [end.getMinutes() - begin.getMinutes(), 60],
		    	hours: [end.getHours() - begin.getHours(), 24],
		    	days: [end.getDate()  - begin.getDate(), new Date(begin.getYear(), begin.getMonth() + 1, 0).getDate() - 1],
		    	months: [end.getMonth() - begin.getMonth(), 12],
		    	years: [end.getYear()  - begin.getYear(), 0]
		    };
		    var result = new Array();
		    var flag = false;
		    for (i in diff) {
		    	if (flag) {
		    		diff[i][0]--;
		    		flag = false;
		    	}    	
		    	if (diff[i][0] < 0) {
		    		flag = true;
		    		diff[i][0] += diff[i][1];
		    	}
		    	if (!diff[i][0]) continue;
			    result.push(diff[i][0] + ' ' + options.lang[i][options.lang.plurar(diff[i][0])]);
		    }
		    return result.reverse().join(' ');
		};
		var elem = $(this);
		var timeUpdate = function () {
		    var s = timeDifference(new Date(), date);
		    if (s.length) {
		    	elem.html(options.prefix + s);
		    } else {
		        clearInterval(timer);
		        elem.html(options.finish);
		    }		
		};
		timeUpdate();
		var timer = setInterval(timeUpdate, 1000);		 

 

Скачать можно по ссылке: http://alexmuz.ru/js/jquery.countdown.js

Параметры

date – дата, до которой считается оставшееся время, задаётся в виде new Date();

settings – дополнительные параметры и настройки (являются необязательными, для всех заданы значения по умолчанию)

lang – объект, хранящий переводы, а так же задаёт функцию plurar для множественных значений. По умолчанию язык русский. В качестве примера настройки языка приведу пример объекта lang для английского языка:

lang: {

 

		years:   ['year', 'years'],
		months:  ['month', 'months'],
		days:    ['day', 'days'],
		hours:   ['hour', 'hours'],
		minutes: ['minute', 'minutes'],
		seconds: ['second', 'seconds'],
		plurar:  function(n) {
			return (n == 1 ? 0 : 1);
		

 

prefix – текст, который вставляется до цифр, по умолчанию – Осталось:

 

fihish – текст, который показывается, когда указанная дата наступила, по умолчанию

– Всё

Пример - например есть DIV, в него надо ввести код:

 $("#countdown-example").countdown(new Date(2012, 00, 01, 00, 00, 00), {prefix:'До нового года осталось: ', finish: 'С Новым годом!'});

Пример реализации:  

обратный отсчет 10 минут.

 

Можно оптимизировать все, это первый вариант.

jQuery.fn.countdown = function (date, settings) {

var countdown_settings = {

lang: {

years: ['год', 'года', 'лет'],

months: ['месяц', 'месяца', 'месяцев'],

days: ['день', 'дня', 'дней'],

hours: ['час', 'часа', 'часов'],

minutes: ['минута', 'минуты', 'минут'],

seconds: ['секунда', 'секунды', 'секунд'],

plurar: function(n) {

return (n % 10 == 1 && n % 100 != 11 ? 0 : n % 10 >= 2 && n % 10 <= 4 && (n % 100 = 20) ? 1 : 2);

}

},

prefix: «Осталось: «,

finish: «Всё»

};

countdown_settings = jQuery.extend(countdown_settings, settings);

var timeDifference = function(begin, end) {

if (end < begin) {

return false;

}

var hms = (end – begin);

var seconds = Math.floor(hms % 60);

var minutes = Math.floor(hms / 60) % 60;

var diff = {minutes: minutes, seconds: seconds};

var result = new Array();

for (i in diff) {

if(!diff[i]) continue;

result.push(diff[i] + ' ' + countdown_settings.lang[i][countdown_settings.lang.plurar(diff[i])]);

}

return result.join(' ');

};

var elem = $(this);

var timeUpdate = function () {

var d = new Date();

var min = d.getMinutes();

var sec = d.getSeconds();

var nevdat = sec + min * 60;

var s = timeDifference(nevdat, date);

if (s.length) {

elem.html(countdown_settings.prefix + s);

} else {

clearInterval(timer);

elem.html(countdown_settings.finish);

}

};

timeUpdate();

var timer = setInterval(timeUpdate, 1000);

};

$(document).ready(function () {

var d = new Date();

var min = d.getMinutes() + 10;

var sec = d.getSeconds();

var dat = sec + min*60;

 

Автора автора