Schetchiksg.ru

Счетчик СГ
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Скрипт счетчика для сайта до нового года осталось

Скрипт счетчика для сайта до нового года осталось

Библиотека: скачать готовые скрипты Javascript
Подсчет количества времени с начала или до конца некоторой заданной даты

Посмотрите на работу этого практичного скрипта на отдельной веб-странице.
Очень удобный скрипт, который автоматически считает, сколько дней (либо часов, минут, секунд, недель, лет и т.д.) прошло с какой-либо стартовой даты или осталось до какой-либо финишной даты, явно заданной в скрипте. Использует абсолютное время в миллисекундах, переводимое в различные временные единицы. Можно считать дни (1000*60*60*24)мс, часы (1000*60*60)мс, минуты (1000*60)мс, секунды (1000)мс, недели (1000*60*60*24*7)мс, года (1000*60*60*24*365)мс и другие временные периоды, переведенные в миллисекунды.

Текст комментариев редактируемый. Скрипт полностью не русифицирован, поэтому дату в комментариях можно указать не в виде скрипта и переменной, а прописать явно (вписать дату вместо переменных olddates и newdates) или косвенно (например: до конца акции осталось . дней, с момента начала работы магазина прошло . дней, до нового года осталось . минут). Указание фиксированной даты в значении переменной именно на английском языке строго обязательно. Для тех, кто не знает английского, приводим переводы названий месяцев.

ЯнварьJanuary
ФевральFebruary
МартMarch
АпрельApril
МайMay
ИюньJune
ИюльJuly
АвгустAugust
СентябрьSeptember
ОктябрьOctober
НоябрьNovember
ДекабрьDecember

Выделите мышью приводимый ниже код (выберите нужное), скопируйте его (командой Ctrl+C) и вставьте его (командой Ctrl+V) в свою веб-страницу после тэга на нужное Вам место.

А теперь немного теории. Существую семь методов объекта: getDay(), getDate(), getMonth(), getYear(), getHour(), getMinute(), и getSecond() (получить соответственно День, Число, Месяц, Год, Час, Минуту, Секунду). Все они существуют, их можно определить и использовать на странице. Показывают соответственно день, дату, месяц, год, час, минуту и секунду того момента, во время которого производится запрос. Поскольку сценарий клиентский, получаем именно то, что на компьютере у Клиента (а не на Вашем интернет-сервере).

С 1 января 2000 вместо двух последних цифр года, как раньше, getYear в IE показывает полный четырехзначный номер, другие браузеры могут проглючить. На данной странице использовалось абсолютное время в миллисекундах getTime().

Читайте так же:
Счетчик банкнот лучший по отзывам

Наши ссылки на веб-страницы, можно скопировать html-код ссылки

Книги по математике и физике, программы HTML, компьютерные технологииСкачать JavaScript — бесплатно скрипты JavaScript (коллекция программ на JavaScript)

Примечание. Удобная текстовая ссылка для форумов, блогов, цитирования материалов веб-сайта, код html можно скопировать и просто вставить в Ваши веб-страницы при цитировании материалов нашего веб-сайта. Материал носит неофициальный характер и приведен для ознакомления.

До наступления часа Х осталось . . .

Наверное Вы уже видели на разных сайтах обратный отсчет до наступления какого-то события. Например: До окончания скидочной акции осталось ХХ : ХХ : ХХ , соответственно Вы видели вместо ХХ : ХХ : ХХ электронные часы, которые отсчитывают время в обратной последовательности. Я например такой скрипт использовал для отсчета времени До наступления Нового года осталось ХХ дней, ХХ часов, ХХ минут .

После наступления часа Х, в данном случае Нового года, обратный отсчет прекращается и выводится другая надпись, в данном случая я выводил: С Наступившим Новым Годом .

В принципе какое событие наступит совсем не важно, скрипт можно настроить на абсолютно любую дату. По окончании обратного отсчета, в выводимой надписи тоже можно настроить абсолютно любой текст.

Скачайте себе на компьютер скрипт таймера обратного отсчета (размер файла 1,5 Кб)

Скрипт очень простой. Вам нужно будет настроить всего два параметра:

Извлеките файлы из архива. Внутри скачанного архива находятся два файла: файл со скриптом countdown.js и файл с примером работы скрипта index.html к нему подключен скрипт (файл дан для примера).

Запустите index.html файл и посмотрите как работает скрипт.

Для подключения таймера обратного отсчета к своему сайту, Вам нужно отредактировать файл countdown.js . Откройте это файл в стандартном Блокноте из состава ОС Windows, а еще лучше откройте файл countdown.js с помощью текстового редактора Notepad++ .

Отредактируйте текстовую надпись в строке:

var eventstr = «С Наступившим Новым 2012 Годом . «; //Эта строка выводиться по окончанию отсчета

В редакторе Notepad++ это 3 строка (здесь строки нумеруются). Редактируйте то, что находится в кавычках » . » в данном случае это текст С Наступившим Новым 2012 Годом . Будьте внимательны: Кавычки » » должны остаться!

Читайте так же:
Счетчик стд завод изготовитель

Следующая строка для редактирования находится в конце файла countdown.js :

ountdownid.innerHTML=»До Нового Года Осталось:
«+dday+ » » +ddaystr+», «+dhour+» «+dhourstr+», «+dmin+» «+dminstr+» и «+dsec+» «+dsecstr;

В редакторе Notepad++ это 53 строка. Здесь Вы редактируете текстовую надпись, которая выводится перед таймером отсчета, до наступления события Х. В данном случае: До Нового Года Осталось . Будьте внимательны: Кавычки » » должны остаться!

Последняя строка для редактирования находится в самом конце файла countdown.js :

CountDowndmn(2012,01,01); //Дата отсчета: год, месяц, число

В редакторе Notepad++ это 60 строка, самая последняя.

Здесь Вам нужно указать дату Х, до которой будет вестись обратный отсчет в формате: ГОД, МЕСЯЦ, ДЕНЬ.

Всё, сохраняете файл countdown.js , и закачиваете в ту папку на сервере, в которой у Вас лежит(ат) файлы, на которых Вы планируете выводить таймер обратного отсчета. Обычно это корневая папка сайта public_html , но возможно Вы хотите разместить таймер и в других папках, Вам виднее.

Дальше работаете (редактируете) с теми файлами сайта, на которых будет выводится таймер, давайте для простоты будем считать что это файл index.html , как в архиве со скриптом.

В нужном месте файла index.html (в котором Вы хотите вывести таймер) нужно добавить две строчки кода:

Первая строчка даёт команду на вывод таймера, а вторая подключает скрипт. Если что-то не понятно откройте в текстовом редакторе файлы из архива и посмотрите код.

Всё, сохраняйте файл index.html и проверяйте. Если всё сделали правильно, то в нужном месте Вы увидите обратный отсчет, обновляйте (закачивайте) на сервер.

Замечу, что подключить таймер обратного отсчета можно к неограниченному количеству web-страниц.

Используя стили CSS (каскадную таблицу стилей) текстовым надписям и таймеру можно придать любой внешний вид изменив вид, текста и цифр, размер, цвет и т.д.

Скачать скрипт таймера обратного отсчета (размер файла 1,5 Кб)

Создание на сайте счетчика обратного отсчета

Часто бывают моменты, когда возникает желание создать у себя на сайте небольшой блок, где в реальном времени происходит отсчет времени до того или иного знаменательного события. Этот элемент позволит внести некоторую активность в общую статическую картинку сайта и, возможно, в некоторых случаях заинтриговать посетителя. Вообще иногда подобные приемы используются в рекламных акциях — мол, «ждите, через 10 дней будет вам чудо». Все сразу начинают думать, что же это за секрет такой. При этом неосознанно могут себе запомнить, что нужно будет через эти 10 дней поинтересоваться чем же все закончилось. А что, неплохой ход! Ведь любопытных людей достаточно много. Но сейчас не об этом.

Читайте так же:
Замена фильтра перед счетчиками

Но вернемся в мир ИТ, а конкретно — веб-разработки. Как же можно реализовать подобный элемент у себя на сайте? Для этого, чисто теоретически, можно использовать разные технологии, как-то PHP, Flash, вероятно Ajax, а также Java Script. В этом блоге я применил последний вариант решения. Но перед тем, как его прояснить, приведу пару ссылок на подобные материалы, которые нашел в процессе поиска. Возможно, они вам пригодятся.

  1. WordPress Plugin «Countdown Timer» (версия WP от 2.0 до 2.2.2)
  2. WordPress Plugin «KB Countdown Widget» (версия WP от 2.0 до 2.2.1)
  3. Подборка JS скриптов по теме «countdown» (т.е. «обратный отсчет»)
  4. Скрипт, который я использовал (описание на англ.)
  5. Можно еще поискать в Гугле. Уверен там есть еще что-то интересное по этой теме.

Плагины для WordPress я отбросил сразу. Во-первых, не было поддержки нужной мне версии, а я читал, что сборка 2.2.х слегка отличается по структуре от 2.3.х, посему не хотел словить каких-то неожиданных глюков на голом месте. Во-вторых, задача достаточно простая и может быть решена с помощью обычного скрипта, не зачем ставить непонятные и потенциально опасные модули. JS файл в данном случае гораздо проще проверить на наличие «непонятных строк» в коде.

Итак, что касается выбранного мною варианта. Для его вставки на сайт, необходимо в код шаблона добавить следующий код:

Предварительно скачиваем сам скрипт здесь и заливаем себе на ФТП. Можно прямо в папку wp-content.
Код, который вставляется на сайт содержит ряд настроек. Это:

  • TargetDate — дата, до которой отсчитывается время.
  • BackColor — цвет фона для текста со временем.
  • ForeColor — цвет текста.
  • CountActive — включение счетчика.
  • CountStepper — шаг отсчета (в секундах).
  • LeadingZero — ноль перед цифрами, например числа 09, 08, 07 и т.д.
  • DisplayFormat — формат отображения текста счетчика.
  • FinishMessage — сообщения, когда счетчик досчитает до нужной даты.
Читайте так же:
Бокс для счетчика энергомера се 101

Конечно, в данном скрипте учтены не все нюансы, как например, разные окончания для «дней», «часов» при определенных числовых значениях. Кроме того, насколько я понял, время берется из показаний на вашем локальном компьютере — если оно у вас идет неправильно, то и новый год под данному счетчику можете встретить не вместе со всеми:)
И, тем не менее, скрипт имеет право на существование — он достаточно компактный и обладает нужным функционалом. Для самого простого применения сгодится на все 100%. Энтузиасты могут дописать необходимые свойства вручную:) После чего воплотить результат работы в полноценный плагин для WordPress.

Скрипт “до Нового Года осталось…”

2012-12-24 / Вр:11:23 / просмотров: 31420

Вот и приближается Новый Год. Знаю, что опоздал со скриптом, но, думаю, он вам пригодится, так как этот скрипт делает отсчет времени не только к Новому Году, а также к 8 марта, Рождеству, концу Света, Дню рождения сайта или тещи, и т.д.
Преимущества скрипта: он написан на JavaScript для отсчета даты, в нем прописаны склонения слова «день». В скрипте выводится три вида надписи:

1. До нового года осталось **** дней

2. Завтра новый год!

3. С новым годом.

Естественно, вы можете поменять текст на такой, какой вам нравится.
Меняется текст в коде здесь (менять только текст, который находиться в лапках, при этом, лапки оставляем) (смотри строку 26):

//Выводим надпись в документ

document.write(«До нового года осталось «+daysLeft+dayname+»!»)>

Также можно указать свою дату и месяц. Меняется это здесь (смотри строку 10):

//Можно установить любую дату

nextDate = new Date(«January 1, 2013»)

January – месяц
1 – число
2013 – год.

Для тех, кто не знает месяца на англ., пишу, может пригодится, ведь еще впереди Рождество и 8 марта:

Читайте так же:
Как сбросить счетчик brother tn1075

Январь – January
Февраль – February
Март – March
Апрель – April
Май – May
Июнь – June
Июль – July
Август – August
Сентябрь – September
Октябрь – October
Ноябрь – November
Декабрь – December

Примерно это будет выглядеть вот так:
До нового года осталось 7 дней!

Вот, собственно говоря, и код JavaScript отсчета времени или «до нового года осталось…»

Вот еще один скрипт отсчета времени, написан тоже на JavaScript. Только в этом скрипте выводятся не только дни, но и часы, минуты и даже секунды.

Примерно это будет выглядеть вот так:

До нового года осталось: 7дн. 09ч. 39мин. 35сек.

В этом скрипте можно установить любую дату (см. строку 7).
var newYear= new Date( » January , 1 , 2013 ,00:00:00″ );

Поменять текст сообщения при окончании даты (см. строка 31)

document.getElementById( «clock» ).innerHTML= » C НОВЫМ ГОДОМ . » ;

Вот, собственно говоря, и код JavaScript отсчета времени или «до нового года осталось…»

Вот еще один JavaScript отсчета времени для сайта.
В этом скрипте добавляется поздравительная открытка.

До нового года осталось: 7дн. 09ч. 39мин. 35сек.

Предложение: вы можете поэкспериментировать со скриптами. А именно. вы можете сделать так, чтобы на Новый Год или на другой праздник автоматически по дате выскакивала поздравительная открытка. Экспериментируйте!
По теме «Обратный отсчет времени для сайта» у меня все. Если что-то не получается, пишите и быстренько устанавливайте скрипт, может, до Нового Года как раз успеете.

С наступающими вас праздниками.
Написал я этот пост 24 декабря 2012г. Вр15:23 . Уточнил это для тех, кто зайдет на эту страницу весной, чтобы не подумали о мне ничего лишнего .

голоса
Рейтинг статьи
Ссылка на основную публикацию