Обратный отсчёт. Таймер обратного отсчета. Кто же включил таймер «The End»? Обратный счетчик

Доброго времени, коротко небольшое введение что будем разбирать в данной статье. Это у меня уже как традиция, я имею ввиду логические цепочки (Введение, Основное содержание, Заключение).

И так по порядку: Что вы узнаете? и чему сможете научиться? Если примените все что я буду рассказывать. Будем учиться ставить на сайт или Лендинг () счетчик обратного отсчета. Помимо всей инструкции в картинках и подробным описанием, самого кода и примеров, в конце посмотрите Видео-урок по работе со счетчиками обратного отсчета (вставка и подключение на свой сайт и другие технические моменты).

Рассмотрим 3 счетчика , которые на мой взгляд смотрятся красиво, не перегружены кодом и работают как нужно.

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

Счетчики или их еще называют «Deadline» используются в интернет-магазинах, интернет торговли, различными инфобизнесменами, арбитражниками, тему кто связан с электронной коммерцией. Где вставляется счетчик на продающие страницы, либо подписные страницы.

Да, вспомнили, наверняка заходили и видели такие страницы, где например продается товар (Ягоды годжи для похудения — это как пример) и большим шрифтом сказано: «Акция закончится через:» и ниже сам счетчик тикает.

Так отлично, а для чего же собственно он нужен этот «Deadline» и для каких целей его ставят на сайт одностраничник или интерет-магазин?

Ответ : Таким образом подогревается скорость к покупке / подписке / и других действий. Т.е. искусственно создается впечатление, что какая-либо акция вот-вот закончится!!! и нужно срочно Покупать / Регистрироваться / Подписываться / Выполнять другие прочие действия

А пользователи (посетители) интернет продаж активно ведутся на всякие акции, бонусы, скидки, распродажи. Таким способом повышается спрос на продукцию (товар или услугу), который продается, а люди активно покупают. Здесь работает психологические факторы, сформированные с самого детства в людях, страх не успеть, страх не получить.

Еще приведу пример — этакий жизненный счетчик, работающий безотказно и проверен на 100000 человек.

Все мы сдавали экзамены в своей жизни на этапе зрелости, учились в школе, институте и других учебных заведениях.

И так, представьте следующую ситуацию: через 2 месяца Вам предстоит сдавать сложнейший экзамен по математике. Какая первая реакция возникнет? Ответ : Аааа, еще целых 2 месяца — успею, столько времени впереди. Прошел 1 месяц и естественно никаких телодвижений и мозговых штурмов для подготовки к экзамену не проходило. Какие мысли возникают дальше? Ну ничего, есть еще 1 месяц в запасе — успею наверстать! Проходит еще 3 недели, осталась 1 неделя до экзамена.

Какие мысли? Вот блин, неделя до экзамена, а я нихрена ничего не делал(а) — What the Fuck? И как это часто случается, подготовка к экзамену происходит в последние (2-3 дня). Уловили суть?

Т.е. работает тот же принцип, что и в счетчике обратного отсчета на сайте. Студент понимает — все деваться некуда, оттягивать время тоже нельзя — надо садиться и учить, заниматься для подготовки к экзамену. Отлично, разобрались... переходим к практике: как установить счетчик обратного отсчета на сайт / Landign page / Одностраничник

Рассмотрим 1 вариант счетчика , который встраивается на страницу средствами фрейма, тег ниже вместе мы разберем как подключить к странице данный счетчик. По кнопке Демо посмотрите на работу счетчика, так же можете скачать архив со скриптом .

Механика его действия: пользователь заходит на страницу, содержащую данный счетчик и отсчет идет от заданных переменных, которые задают (Дней, Часов, Минут, Секунд). Попробуйте обновите страницу «Демо» и всегда отсчитываться будет с 3 Часов 9 Минут и 49 Секунд. Эти переменную можно отрегулировать по вашему усмотрению и сделаем это чуть позже, когда подключим счетчик на отдельную страницу.

Исходная страница к которой будем подключать код счетчика, имеет следующий исходный код. Самая простая страница с текстом h1. (index.html)

Теперь нам нужно встроить тег iframe код фрейма /iframe на нашу страницу index.html

Что удобно, на странице index.html не нужно прописывать подключение (js, style) так как они автоматически подгрузятся из самого < iframe >

Не забывайте что сам скрипт и наш файл (index.html) должны располагаться вот в такой структуре

Проверяйте, у Вас все получится.

Теперь коснемся вопроса, как выставить свои значения (Дней, Часов, Минут, Секунд) чтобы стартовал счетчик. Для этого откройте файл (Timer.html) c помощью блокнота, спускаемся чуть вниз и вот в этом кусочке кода меняем цифры на свои значения

jQuery(document).ready(function() { $("#countdown_dashboard").countDown({ targetOffset: { "day": 0, "month": 0, "year": 0, "hour": 7, "min": 15, "sec": 46 } }); });

Для установки данного скрипта обратного отсчета на WordPress CMS Вам потребуется делать шаблон страницы или поста обычно они в шаблоне темы обозначаются (Page, Single) А чем собственно нужно делать этот шаблон?

А дело в том, что если Вы добавить скрипт счетчика в код файла (Page / Single) , то этот счетчик будет крутиться на каждом посте, которые опубликованы на вашем блоге. Поэтом целесообразно создать отдельный шаблон под страницу и при публикации указать созданный вами новый шаблон.

Остальные 2 скрипта я не стал расписывать в этой статье, т.к. это растянется намного, я решил все подключения показать в видео уроке.

Описание и инструкцию 2 других скриптов смотрите в видео уроке

Друзья, если есть какие-то вопросы, то смело можете оставлять комментарии. По 2 остальным скриптам я не стал расписывать длинную простыню там принцип подключения почти тот же. Но вы можете посмотреть подключение всех 3 скриптов в моем видео уроке , которое выше. Желаю Вам успешной работы.

1 вариант.
Простой таймер использующий только минуты и секудны



Чтобы таймер появился, необходимо элементу придать идентификатор timer и добавить условие в тег

Всё, таймер готов.

2 вариант.
Цифрами для таймера будет служить картинка. Также в этом таймере помимо минут и секунд доступны часы и дни. Наш таймер будет отсчитывать время до определенного дня.

Оформляем страницу


Таймер обратного отсчета




Для отображения времени будет использоваться картинка digits2_orange.png

Далее пишем js код



var t=Date.parse(deadline)-Date.parse(new Date());
var seconds = Math.floor((t/1000) % 60);
var minutes = Math.floor((t/1000/60) % 60);
var hours = Math.floor((t/(1000*60*60)) % 24);
var days = Math.floor(t/(1000*60*60*24));

$(function(){
$("#counter").countdown({
image: "pic/digits2_orange.png",
startTime: days+":"+hours+":"+minutes+":"+seconds,
timerEnd: function(){
$("#tut").html("Таймер завершил свою работу");
}
});
});
image - наша картинка
startTime - это как раз время оставшееся до 01.09.2017
timerEnd - то, что происходит по завершении работы таймера, в нашем случае в контейнер с идентификатором tut будет вставлена соответствующая надпись
Далее наш таймер

Осталось:


ДнейЧасовМинутСекунд






Оформляем
#layer{
width:600px;
text-align:center;
margin:0 auto;}

#counter{
margin:10pt auto 0 auto;
width:414px;}

Desc{
width:430px;
margin:0px auto;}

#days,#hours,#minutes,#seconds{
float:left;
font:13px Arial,Verdana,sans-serif;
width:50px;
margin-right:63px;
font-weight:bold;
color:#000;}

#seconds{margin-right:0px;}

CntSeparator {
font-size:50px;
margin:6px 7px;
color:#000;}
3 вариант.
На наш взгляд самый удобный. Также как и предыдущий показывает оставшееся количество дней, часов, минут, секунд. Не использует изображение для отображения счетчика.
Для работы нам понадобится библиотека jquery и файл

Оформляем страницу


Таймер обратного отсчета

// здесь нужная дата в формате гггг-мм-дд чч:мм:сс
var deadline="2017-08-20 00:00:00";

• 
  00
  дни
  


• 
  00
  часы
  


• 
  00
  мин
  


• 
  00
  сек
  

Countdown li{display: inline-block;}

/* здесь дни, часы, минуты, секунды */
.countdown li span{
width:100%;
color:#000;
font:18px Verdana;
display:inline-block;}

/* разделители. и: */
.countdown li.seperator {
color:#000;
font:16px Verdana;
vertical-align:top;}

Countdown li div{
margin:0;
color: #a7abb1;
font:8pt Verdana;}

ВОПРОС № 115 О каком событии предупреждают нашу цивилизацию, которое должно произойти, начиная с 15.11.17 г.?

На канале РЕН ТВ 16 июня 2017 г. был показан фильм «Застывшая тайна планеты» из серии «Самые шокирующие гипотезы», в котором сообщалось, что на персональные компьютеры многих известных политиков и учёных планеты 03.04.17 г. пришло сообщение с одним словом “THE END” (КОНЕЦ) с указанием ссылки на таймер отсчёта. В информации по ссылке на экране высвечивался таймер с обратным посекундным отсчётом, который остановится 15.11.17 г.

На шкале таймера были следующие цифровые обозначения: кол-во дней (3 знака), часов, минут и секунд (по 2 знака). Эти значения таймера 219 11 01 03 были получены для фильма уже примерно на 10-й день от начала отсчёта – 03.04.17 г. По расчётам последний день работы таймера выпадает на 15.11.17 г. (Другие показания таймера и дата окончания отсчёта 15.05.17 г., указанные на многих сайтах в интернете, являются ошибочными). Все адресаты получили верное показание таймера. После анализа группой экспертов было установлено, что рассылка сообщения для всех адресатов исходила из Антарктиды и это сообщение было также обнаружено на сервере антарктической исследовательской станции «Нормайер-3», которая сейчас принадлежит Норвегии.

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

Посмотреть фильм РЕН ТВ «Застывшая тайна планеты» можно по ссылке:

Об этом случае рассказывает, например, сайт «Инфо-Макс»:

«К нам пришла интригующая информация от наших инсайдеров из недавно созданной группы экспертов из разных стран, которая занимается очень загадочным расследованием.

Согласно их информации с понедельника 03.04.17 г. на электронные адреса мировых ученых и политиков, стали приходить письма. Эти письма содержали только одно слово The End и ссылку, по которой можно было увидеть таймер обратного отсчета времени. Он носит имя The End (Конец). Согласно странным часам, 15 мая 2017 года истекает установленное на таймере время. (Указанная на многих сайтах дата ошибочная, правильная дата – 15 ноября 2017 г., уточнение моё – А.Л.Х.)

Расследование, проведенное этой группой экспертов показало, что таймер создан на маленьком сайте, где каждый желающий может создать свой собственный таймер. Такими сайтами для создания таймеров обратного отсчета пользуются обычно те, кто хочет остаться инкогнито. После получения адресатами информации таймер на этом сайте был обнулён.

Но самое интересное в этой интригующей истории является то, что все сообщения (по крайней мере те, к которым был дан доступ группе по анализу этого случая) имеют одно местоположение отправителя… в Антарктиде. А точнее, станция Амундсен-Скотт на Южном Полюсе.

Связавшись с Национальным научным Фондом (NSF), в ведении которого и находится станция Амундсен-Скотт, эксперты попросили выяснить, кто на станции занимается детскими играми и пугает своими посланиями ученых и политиков. Сегодня они получили ответ, который их ошарашил, если не сказать больше.

NSF связалось с руководителем станции и выяснило, что никто из ученых и обслуживающего персонала этим не занимались. Более того, подключение к компьютеру руководителя станции, с которого и были разосланы эти сообщения, произошло извне. На вопрос экспертов группы к NSF: «Как такое вообще возможно?», они получили странный ответ: «это невозможно».

Рассматривая эту интригующую информацию нам сразу вспомнились мелькающие в последнее время сообщения о Хранителях Антарктиды (это является неточным их названием – речь идёт о Хранителях планеты Земля, уточнение моё — А.Л.Х.). Может быть это они нас предупреждают о чем то? Или сообщают сколько отмерено нам времени до чего то? Или просто… сколько нам осталось…».

Данная информация со словом «КОНЕЦ» и таймером обратного отсчёта действительно была разослана Хранителями планеты Земля известным в мире учёным и политикам в виде предупреждения о наступающих, начиная с 15 ноября 2017 года, серьёзных изменениях в жизни цивилизации на нашей планете.

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

По плану Творца Вселенной в конце 2017 г. завершается подготовительный период и текущий эксперимент с нашей цивилизацией перед началом плавного перехода всей солнечной системы на следующий, более высокий уровень развития сознания. На завершающем этапе подготовки планеты к началу данного перехода произойдут основные события в истории планеты в конце 2017 г.

1) Это необходимость т.н. переполюсовки магнитных полюсов планеты — геомагнитная инверсия Земли, которая будет выполнена, после 15.11.17 г. О смене магнитных полюсов Земли сообщается в статье №69 данного раздела:

«Смена магнитных полюсов это не только Земной, но и Галактический цикл, связанный с вращением нашей Галактики вокруг её центра, где находится огромная чёрная дыра массой в 4 млн. солнечных масс и размером 10 млн. км. Этот эксперимент связан с пульсацией и вращением вокруг своей оси чёрной дыры, которая циклично каждые 26 тыс. лет меняет свою полярность.
Поэтому смена полюсов имеет отношение ко всем звёздам и планетам в Галактике, имеющим своё магнитное поле. В период смены полюсов, который уже начался, произойдут заметные, но не катастрофические для планеты и цивилизации изменения с минимальным количеством жертв, которых трудно избежать…

В течение нескольких дней во время переполюсовки магнитная защита планеты от вредных излучений радиации Солнца и Космоса сохранится, т.к. в этот период разумный управляющий кристалл в центре Земли будет работать по определённой, защитной программе. Причинённый ущерб будет в минимально возможных масштабах с целью сохранения цивилизации на Земле и проведения эксперимента на более высоком уровне её развития.»

На сайте samaratoday.ru «О смещении магнитных полюсов Земли» – версии учёных по ссылке:

«…Отдельно необходимо сказать о скорости перемещения магнитных полюсов. Северный полюс, начиная с 1931 года, двигался со скоростью 10 километров в год в направлении северо-запада. Но в 80-х годах прошлого века скорость его увеличилась в разы, достигнув уже в новом веке 46 километров в год.

Конечно, утверждать, что инверсия уже началась, нельзя, однако недавно проведенные исследования со спутников Европейского космического агентства «Магсат» и «Эрстед» доказали, что это именно так. Так, было установлено, что силовые магнитные линии на внешнем ядре планеты в районе южной Атлантики находятся в направлении, противоположном тому, каким оно должно быть при нормальном состоянии магнитного поля. Таким образом, исходя из вышесказанного, можно сделать определенные выводы»

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

«Ещё в 1829 году учёные отметили, что внутреннее ядро Земли, имеющее массу как 2 Луны, сместилось относительно оси вращения планеты на 252 км в сторону Тихого океана. К 1965 году это смещение увеличилось до 451 км. Если движение ядра в сторону земной поверхности будет продолжаться, то через определённое время Земля просто «кувыркнётся» в пространстве. Такой «кувырок» планеты приведёт к смещению географических полюсов на 180 градусов и, соответственно климатических зон, при этом восход Солнца будет на старом западе, а закат на бывшем востоке.

В древние времена греческий философ Геродот пересказывал свои беседы с египетскими жрецами: «…за это время Солнце поднималось против своего обыкновения: дважды оно поднималось там, где теперь садится, и дважды садилось там, где теперь поднимается». Это означало, что смена полюсов с переворотом Земли в истории происходила четырежды». Из беседы Геродота с египетскими жрецами:

2) По плану Творца произойдёт необходимое для начала постепенного перехода на новый уровень сознания условие – плавная обработка сознания всех жителей планеты т.н. белой энергией с целью очищения его от агрессивности и всех низменных чувств: злость, ненависть, презрение, отчаяние, жадность, корысть, зависть, обман и высокомерие. (Об этом сказано в статье №98).

До конца 2017 г. волны белой энергии продут по всей планете несколько раз. Высокая доступность сознания человека для такого воздействия связана с тем, что сознание, эмоции и память каждого из нас находятся за пределами нашего тела на астральной и ментальной невидимых оболочках ауры человека. (Об этом сказано в статье №90 данного раздела).

Кроме того, частицы сознания Высшего разума Вселенной, находящиеся в каждом из нас, дадут толчок на постепенную, плавную и последовательно растянутую во времени активацию генов, дающих более высокие возможности сознанию, которые пока заблокированы в нашем геноме. Одновременно с этим процессом будет осуществляться полная или частичная блокировка перечисленных выше низменных чувств в генах человека.

3) Кроме всего сказанного, в скором времени к Земле и Солнцу приблизится нейтронная звезда Тифон, которая имеет мощную гравитацию, она по массе в 8 раз больше планеты. В истории Земли она приближалась к ней уже 4 раза и приносила разрушения и смерть населению Земли, последний её приход с катаклизмами на Земле был 12580 лет назад.

Но ни о дате этого приближения, ни о возможных катаклизмах в этот период конкретно ВЦ не сообщают с целью исключения паники и хаоса на Земле. Известно только одно – в траекторию орбиты нейтронной звезды Тифон Творцом внесены изменения, что также изменит период её обращения и она пройдёт от Земли на большем, чем раньше расстоянии. Воздействие её мощной гравитации сохранится в той степени, которая необходима для продолжения данного эксперимента с цивилизацией по намеченному плану.

Сообщение в виде слова «КОНЕЦ» с таймером обратного отсчёта времени, переданное Хранителями планеты Земля из Антарктиды, является также предупреждением для всей цивилизации. Это относится в первую очередь ко всем тёмным и агрессивным силам планеты, руководству англосаксонских стран, членам НАТО и США, а также к группе миллиардеров, стремящихся к мировому господству на планете и являющихся «закулисными кукловодами» этих стран. Обратный отсчёт таймера заканчивается 15 ноября 2017 года, что означает завершение неудавшегося эксперимента с нашей цивилизацией, пришедшей в целом к негативному результату в жизнедеятельности и в духовности. Час Х скоро пробьёт и цивилизация начнёт плавный переход на новый уровень очищенного сознания по плану Творца Вселенной.

Просмотры 32 948

Фото из открытых источников

В англоязычном сегменте Интернета вот уже несколько дней обсуждается странная новость. Многие сайты, опираясь на сведения своих инсайдеров из международной группы экспертов, занимающихся расследованием различных аномальных явлений, сообщают, что с прошлого понедельника многие видные ученые и политики получили электронные письма странного содержания. (сайт)

В каждом таком электронном письме - лишь одно слово «The End» и ссылка на сайт - livecountdown.com/the-end, где расположен таймер с обратным отчетом времени. Именно он и называется концом - «The End» (смотрите фото или переходите по ссылке).

Фото из открытых источников

Согласно этому таймеру, установленное на нем время истекает 15 мая сего года, это и будет мифологическим концом, вот только - чего? Этого никто не знает. И на эту шутку, может быть, не стоило бы даже обращать внимания, однако группа экспертов установила следующие странности:

• с одной стороны, на маленький ресурс ivecountdown подобный таймер может установить каждый желающий, кто стремится при этом остаться инкогнито. Вроде ничего примечательного и уж тем более необычного - обычная шутка;
• с другой стороны, все сообщения о таймере «The End» (все электронные письма) были посланы из Антарктиды - с американской станции Амундсен-Скотт, что находится на Южном Полюсе (построена в 1956 года и ставшая первой антарктической станцией, возведенной не на побережье, а в глубине ледового материка). Получается, что шутник находится среди ученых станции, что кажется огромной нелепостью.

Фото из открытых источников

Эксперты связались с NSF (Национальный научный Фонд), который курирует станцию Амундсен-Скотт и попросили выяснить, кому и зачем нужны эти детские игры с запугиванием политиков и ученых? Фонд тут же связался с руководством станции и получил ответ, который поставил экспертов в еще больший тупик. Оказалось, что такой ерундой на станции никто не занимался, да и нет среди сумасшедших. Однако подключение к компьютеру станции произошло, как это ни звучит странно, извне.

Однако ни руководство станции, ни сотрудники NSF, ответить на вопрос, как это возможно, не смогли, что многих тут же натолкнуло на мысль о Хранителях Антарктиды, информация о которых совсем недавно пролетела по Сети интернет. Может, это они предупреждают человечество? Однако - о чем?

Фото из открытых источников

До 15 мая осталось совсем немного, и о конце света в означенную дату уже заговорили многие, например, португальский мистик Горацио Вилье утверждает, что 13 мая 2017 года начнется Третья мировая война. Учитывая огромные запасы на Земле ядерного и прочего оружия массового поражения, двух дней на уничтожение нашей планеты вполне хватит.

Впрочем, в русскоязычном сегменте Интернета, эту информация восприняли довольно скептично и даже оптимистично. Одни россияне посчитали, что это не более чем фейк, другие даже обрадовались, что можно теперь плюнуть на все проблемы и спокойно готовиться отойти в мир иной, например, как предлагал Воланд в «Мастере и Маргарите», в кругу красивых женщин и с бокалом доброго вина в руке. Русского человека не так-то просто напугать, может, по этой причине «загадочный шутник» разослал письма непременно на английском и строго по соответствующим этому языку адресатам?..

Бывает, что вам для чего-то нужен таймер обратного отсчета , в интернете есть много решений, однако они либо очень громоздкие, либо имеют зависимости от других библиотек. Сегодня мы рассмотрим, как сделать таймер обратного отсчета на javascript в 18 строк кода .

• Высчитайте оставшееся время

Во-первых, вам нужно установить правильную дату окончания. Это будет строка в любом из форматов, которые понимает Date.parse() метод. К примеру:

Var deadline = "2015-12-31";

Короткий формат

Var deadline = "31/12/2015";

Или длинный формат

Var deadline = "December 31 2015";

Каждый из этих форматов позволяет вам установить точное время(в часах, минутах, секундах) и временную зону. Например:

Var deadline = "December 31 2015 23:59:59 GMT+02:00";

Function getTimeRemaining(endtime){
var t = Date.parse(endtime) - Date.parse(new Date());
var seconds = Math.floor((t/1000) % 60);
var minutes = Math.floor((t/1000/60) % 60);
var hours = Math.floor((t/(1000*60*60)) % 24);
var days = Math.floor(t/(1000*60*60*24));
return {
"total": t,
"days": days,
"hours": hours,
"minutes": minutes,
"seconds": seconds
};
}

Для начала мы создаем переменную t , чтобы хранить оставшееся время. Date.parse() метод встроен в javascript и позволяет сконвертировать строку со временем в значение в миллисекундах. Это позволит нам вычитать одно время от другого и получать разницу между ними.

Var t = Date.parse(endtime) - Date.parse(new Date());

Теперь мы хотим перевести миллисекунды в дни, часы, минуты и секунды. Давайте использовать секунды как пример:

Var seconds = Math.floor((t/1000) % 60);

Разберемся, что здесь происходит.

• Делим миллисекунды на 1000, чтобы перевести их в секунды
• Делим общее число секунд на 60 и сохраняем остаток - вам не нужны все секунды, только те, что остались после того, как минуты были подсчитаны
• Округлите вниз до ближайшего целого значения, потому что вам нужны полные секунды, а не их фракции

Повторите эту логику, чтобы сконвертировать миллисекунды в минуты, часы и дни.

Когда часы, минуты и секунды готовы, нам нужно вернуть их как многоразовый объект.

Return {
"total": t,
"days": days,
"hours": hours,
"minutes": minutes,
"seconds": seconds
};

Этот объект позволяет вам вызывать вашу функцию и получать любое из вычисленных значений. Вот пример, как вы можете получить оставшиеся минуты:

GetTimeRemaining(deadline).minutes

Удобно, правда?

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

Затем напишите функцию, которая будет отображать данные внутри нашего div"а :

Function initializeClock(id, endtime){
var clock = document.getElementById(id);
var timeinterval = setInterval(function(){


" +
"hours: "+ t.hours + "
" +
"minutes: " + t.minutes + "
" +
"seconds: " + t.seconds;

}
},1000);
}

Эта функция принимает два параметра: id элемента, который будет содержать наши часы, и конечное время счетчика. Внутри функции мы объявим переменную clock и будем использовать ее, чтобы хранить ссылку на наш блок с часами, так что нам не нужно запрашивать DOM .

• Высчитывать оставшееся время
• Выводить оставшееся время в наш div
• Если оставшееся время = 0, останавливать часы

Единственное, что осталось, запустить часы следующим образом:

InitializeClock("clockdiv", deadline);

Поздравляю! Теперь у вас есть простой таймер обратного отсчета всего в 18 строк javascript кода .

До стилизации нам будет нужно немного усовершенствовать некоторые вещи.

• Убрать начальную задержку, чтобы таймер показывался незамедлительно
• Сделать скрипт часов более эффективным, чтобы не приходилось непрерывно перестраивать все часы
• Добавить нули по желанию

В часах мы используем setInterval , чтобы обновлять отображение каждую секунду. Чаще всего это нормально, кроме начала, где присутствует 1с задержка. Чтобы это исправить, нам нужно обновлять часы один раз до того, как setInterval запускается.

Чтобы это сделать, давайте переместим анонимную функцию, которую мы передаем в setInterval (ту, которая обновляет часы каждую секунду) в собственную отдельную функцию, которую назовем updateClock . Вызовите эту функцию однажды вне setInterval и затем вызовите ее снова внутри setInterval . Таким образом, часы будут показываться без задержки.

В вашем javascript замените это:

Var timeinterval = setInterval(function(){ ... },1000);

Function updateClock(){
var t = getTimeRemaining(endtime);
clock.innerHTML = "days: " + t.days + "
" +
"hours: "+ t.hours + "
" +
"minutes: " + t.minutes + "
" +
"seconds: " + t.seconds;
if(t.total clearInterval(timeinterval);
}
}

UpdateClock(); // запустите функцию один раз, чтобы избежать задержки
var timeinterval = setInterval(updateClock,1000);

Чтобы сделать скрипт более эффективным, нам нужно обновлять не все часы, а только цифры. Для этого поместим каждое число в тег span и будем обновлять только этот контент.

Вот html :

Days:

Hours:

Minutes:

Seconds:

Var daysSpan = clock.querySelector(".days");
var hoursSpan = clock.querySelector(".hours");
var minutesSpan = clock.querySelector(".minutes");
var secondsSpan = clock.querySelector(".seconds");

Function updateClock(){
var t = getTimeRemaining(endtime);

DaysSpan.innerHTML = t.days;
hoursSpan.innerHTML = t.hours;
minutesSpan.innerHTML = t.minutes;
secondsSpan.innerHTML = t.seconds;

...
}

Если вам нужны ведующие нули, вы можете заменить код такого вида:

SecondsSpan.innerHTML = t.seconds;

На такой:

SecondsSpan.innerHTML = ("0" + t.seconds).slice(-2);

Мы рассмотрели, как сделать простой таймер обратного отсчета на javascript . Все, что вам осталось, это добавить стили. Спасибо за внимание!