На днях понадобилось сделать на 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;