<MyRusakov.ru />

React JS, Redux, ES2015 с Нуля до Гуру

React JS, Redux, ES2015 с Нуля до Гуру

Данный курс - это обширный курс по JavaScript и фреймворку React, который позволит Вам с нуля создавать мощные современные, динамические JavaScript-приложения.

Вы узнаете о тонкостях работы с "профессиональным" JavaScript, а так же узнаете о нововведениях в его новый стандарт ES2015, Вы узнаете, как организовать профессиональное окружение для FrontEnd, изучите профессиональный фреймворк - ReactJS.

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

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Таймер на JavaScript

Таймер на JavaScript

Описание: Недавно меня попросили показать скрипт таймера на JavaScript, который у меня частенько появляется на моих платных курсах. Поскольку задача достаточно популярная, то я решил выложить код этого простого скрипта, чтобы любой мог сделать у себя на сайте таймер на JavaScript. Начальное значение таймера задаётся в HTML-коде.

Результат:

01:10:00

Код JavaScript (вставлять между тегами <head> и </head>):

<script type="text/javascript">
  function startTimer() {
    var my_timer = document.getElementById("my_timer");
    var time = my_timer.innerHTML;
    var arr = time.split(":");
    var h = arr[0];
    var m = arr[1];
    var s = arr[2];
    if (s == 0) {
      if (m == 0) {
        if (h == 0) {
          alert("Время вышло");
          window.location.reload();
          return;
        }
        h--;
        m = 60;
        if (h < 10) h = "0" + h;
      }
      m--;
      if (m < 10) m = "0" + m;
      s = 59;
    }
    else s--;
    if (s < 10) s = "0" + s;
    document.getElementById("my_timer").innerHTML = h+":"+m+":"+s;
    setTimeout(startTimer, 1000);
  }
</script>

Код HTML (вставлять между тегами <body onload="startTimer()"> и </body>):

<p><span id="my_timer" style="color: #f00; font-size: 150%; font-weight: bold;">01:10:00</span></p>

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (26):

malina95 malina95 03.12.2012 17:01:03

Михаил, напишите пожалуйста статью про то как изменить время на сайте, всмысле чтобы было время украинское а не серверное... Просто сервер находиться России а я живу в Украине

Ответить

Admin Admin 03.12.2012 19:05:32

Хорошо, напишу. Скорее всего, через 2 недели будет данная статья.

Ответить

Frederico Frederico 03.12.2012 18:45:47

А я думал, что это целая наука!

Ответить

Artem2012 Artem2012 03.12.2012 20:11:13

А как сделать чтобы время при обновлении страницы не обновлялось и не начинало отсчитывалось сначала

Ответить

Admin Admin 03.12.2012 21:38:11

Нужно как-то в PHP подставлять вместо этого 01:10:00 что-то другое. А что именно зависит от задачи.

Ответить

jorn jorn 06.06.2013 22:40:24

извините за беспокойство но вот ломаю голову над тем как задержать выполнение данной функции на пару секунд function dinamic(str) { var x = 0; var id = setInterval(dynam,80); function dynam() { document.getElementById("din").innerHTML += str.charAt(x); x++ if(x == string.length) clearInterval(id); } } возможно ли ето сделать с помощю оператора setTimeout и как в данном случае? заранее благодарен за помощь

Ответить

Admin Admin 06.06.2013 23:31:51

Сделать вызов setTimeout за пределами функции. В параметре setTimeout указать эту функцию и задержку в 2 секунды.

Ответить

jorn jorn 07.06.2013 00:17:51

<script language = "javascript"> setTimeout(dinamic(str),2000); function dinamic (str){ var x = 0; var id = setInterval(dynam,80); function dynam() { document.getElementById("din").innerHTML += str.charAt(x); x++ if(x == string.length) clearInterval(id); } } </script> извините за назойливость но вроде все сделал как сказали, а результата нет. :-( В чем ошыбка? Не пинайте сильно "чайника"

Ответить

Admin Admin 07.06.2013 10:00:22

Неправильно вызывается setTimeout, точнее первый параметр. Посмотрите в справочнике, как надо указывать первый параметр.

Ответить

jorn jorn 07.06.2013 13:42:33

пробовал все варианты. справочник читал. setTimeout(dinamic(), 2000) setTimeout(dinamic, 2000) setTimeout(dinamic(str), 2000) var timeout_id = setTimeout(dinamic(str), 2000) var timeout_id = setTimeout(dinamic(), 2000) не работает. из ваших подсказок понял что проблема в вызове dinamic. но не могу найти решение. я ее по разному записывал.

Ответить

Admin Admin 07.06.2013 21:56:26

"dinamic" надо писать.

Ответить

shesha shesha 01.08.2013 03:28:49

Михаил, а как сделать так, чтобы таймер работал не с определенного млмента, а до определенного момента. Например, обратный отсчет до нового года

Ответить

Admin Admin 01.08.2013 16:12:14

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

Ответить

shesha shesha 01.08.2013 20:56:40

Нет, я имел ввиду можно ли сделать так, чтобы если перезагружаешь или заного заходишь на страницу, таймер вел отщет до определенного момента?

Ответить

Admin Admin 02.08.2013 15:49:56

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

Ответить

HolySaint HolySaint 08.01.2016 06:46:10

Как вывести несколько таймеров на одной странице? При выводи каждого отдельно работает только 1. Т.е по порядку. Сначала тикает один как дотикает затем другой.

Ответить

skylinex1 skylinex1 14.12.2013 20:42:35

Здравствуйте, вы не могли бы пояснить для новичков, что и где нужно сменить, чтобы сменилось время? Например: мне нужно чтобы шёл обратный отсчёт только в секундах, как такое реализовать? Заранее спасибо!

Ответить

alexandrdante alexandrdante 14.12.2013 20:49:49

убрать вообще часы и минуты? тогда нужно кусочки кода удалить

Ответить

trostroman trostroman 07.01.2014 12:44:16

Здравствуйте, хотелось бы узнать, например на странице есть 2 таких таймера. А как в body onload прописать ? через запятую ? <body onload="startTimer(), startTimerSecond()"> Так ?

Ответить

tikkiwiki tikkiwiki 09.01.2014 15:27:59

Здравствуйте, вызывайте таймеры каждый отдельно.

Ответить

HolySaint HolySaint 08.01.2016 06:46:15

Как вывести несколько таймеров на одной странице? При выводи каждого отдельно работает только 1. Т.е по порядку. Сначала тикает один как дотикает затем другой.

Ответить

sivak12 sivak12 17.08.2014 14:39:03

Как сделать чтобы он сохранялся с "куки" Браузера?

Ответить

Dante5 Dante5 20.08.2014 02:47:48

а можно как то на подобие это скрипта сделать одновременно несколько таймеров к примеру : <p><span id="my_timer1" style="color: #f00; font-size: 150%; font-weight: bold;">01:10:00</span></p> <p><span id="my_timer2" style="color: #f00; font-size: 150%; font-weight: bold;">01:15:00</span></p> ................ <p><span id="my_timer.....n" style="color: #f00; font-size: 150%; font-weight: bold;">01:20:00</span></p>

Ответить

blits blits 02.10.2015 16:06:58

Михаил, сделал таймер по аналогии с вашим. Но почему то он выдает 50 NaN и не двигается. Код на jsfiddle: http://jsfiddle.net/wLrdq997/

Ответить

goshan2112 goshan2112 04.10.2015 15:58:57

Могу-ли я применить стили отдельно к часам, минутам и секундам? Т.е. я хочу разместить это в div'ах

Ответить

Ilia Ilia 23.02.2016 21:43:20

Как изменить время? Нужно в DIV изменить время.

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.