Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ althtmlcssphpjsblog

Обратный отсчет в секундах javascript примеры таймеров

Поддержи проект!!! smile

Таймер и есть обратный отсчет времени! Обратный отсчет сделаем в секундах, что такое таймер, обратный таймер. Скрипт таймера, пример работы и конечно же можно будет скачать полностью рабочий скрипт данного таймера!
01.11.2020

Добавили таймер со звуковым сигналом.

Вообще, если честно, то таймер и есть понятие, которое и включает в себя обратный отсчет! Таймер = обратный отсчет.

А вот таймер, который считает вперед называется таймер реального времени! Ну, с определениями закончили!

И первый таймер, который сработал вы уже видели! Где показывается информация, что после загрузки страницы прошло 5 секунд!

Навигация по странице :
  1. Таймер javascript с запуском отсчета по нажатию кнопки.
  2. Скрипт таймера обратного отсчета времени с кнопкой
  3. Готовый код таймера на javascript
  4. Запуск таймера после загрузки страницы javascript
  5. Описание скрипта : запуск таймера после загрузки страницы javascript
  6. Таймер javascript со звуковым сигналом
  1. Таймер javascript с запуском отсчета по нажатию кнопки.

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

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

    Нам нужен div и идентификатором:
    <div id="show_2"></div>

    Отправим по нажатию на кнопку число 5 - время через которое кончится отчет.

    <button onclick="getElementById('show_2').innerHTML = 5;">Начать отсчет времени</button>

    И напишем коротенький скрипт, который и будет обрабатывать -что у нас есть в "show_2".

    Логика скрипта таймера на javascript:

    Пока в переменной(peremennaya) ничего нет - ничего не происходит...нажимаем кнопку запустить - отправляем 5 секунд

    Обновляем каждую секунду... и как только получаем значение переменной(peremennaya) отнимаем от неё единицу...

    Пока переменная не равно нулю - процесс продолжается...

    Как только переменная равна нулю выводим - время кончилось и отправляем в "show_2" - stop timer

    Если в "show_2" - stop timer - ничего не делаем...

    setInterval(MY_FOO_2, 1000);  

    function MY_FOO_2() { 

      peremennaya = document.getElementById("show_2").innerHTML; 

     

      if(peremennaya)

      {

        if(peremennaya !== 'stop timer' )

        {

          if(peremennaya !== '0' )

          {

          peremennaya =  peremennaya - 1;

          document.getElementById("show_2").innerHTML  =  peremennaya;  

          }

          else

          {

          alert("Время кончилось!");  document.getElementById("show_2").innerHTML  =  'stop timer'; 

          }      

        }

      }

    }
  3. Готовый код таймера на javascript

    Если вам требуется любое другое время, установить для таймера, то в коде в строке с innerHTML = 5 меняем число на то, через сколько ваш таймер должен срабатывать...

    Теперь соберем весь код таймера в одном месте:

    <div id="show_2" class="display_time"></div>

    <button onclick="getElementById('show_2').innerHTML = 5;">Начать отсчет времени</button>

    <script>

    setInterval(MY_FOO_2, 1000);

    function MY_FOO_2() {

    peremennaya = document.getElementById("show_2").innerHTML;

    if(peremennaya)

    {

    if(peremennaya !== 'stop timer' )

    {

    if(peremennaya !== '0' )

    {

    peremennaya = peremennaya - 1;

    document.getElementById("show_2").innerHTML = peremennaya;

    }

    else

    {

    alert("Время кончилось!"); document.getElementById("show_2").innerHTML = 'stop timer';

    }

    }

    }

    }

    </script>

  4. Запуск таймера после загрузки страницы javascript

    Еще один таймер - скрипт, который выводит сообщение после того как кончится время, которое вы установите, для того, чтобы происходил любой другой запуск ... действия , функции после времени вы можете переименовать функцию myFuncSuper, либо во внутрь функции поставить свой скрипт!
    И он выполнится после того, времени, которое вы установите - сейчас это 5 секунд

    Вызволение этого таймера вы видели, - выводилось окно с сообщением!

    <script>

    var data = new Date();

    var time_data = data.getHours() + ":" + data.getMinutes() + ":" + (data.getSeconds() + 5);
    setInterval(myFuncSuper, 1000);
    function myFuncSuper() {

    var data = new Date();

    var time = data.getHours() + ":" + data.getMinutes() + ":" + data.getSeconds();

    if(time_data == time){alert("После загрузки страницы прошла 5 секунд\nЭто реализация скрипта"); }

    }

    </script>

  5. Описание скрипта : запуск таймера после загрузки страницы javascript

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

    Приведу лишь его код:

    setInterval(myFuncSuper, 1000);

    function myFuncSuper() {

    var data = new Date();  

    var time  = data.getHours() + ":" +  data.getMinutes() + ":" +  data.getSeconds();

    document.getElementById('display').innerHTML = time;  

    }

    Внутри функции нужно сделать условие такого вида:

    if(time_data == time){alert("после загрузки прошла  1 минута "); } 

    Если рассказать данный код, то он будет звучать так: когда время внутри функции будет равно заданному времени выше функции, то выведется сообщение, что прошло столько-то времени.

    Теперь нам нужно создать собственно эту переменную «time_data», которая у нас появилась во втором пункте. И естественно, что нам нужно подняться выше нашей функции и создать новый объект времени и присвоить ему время.

    Вы наверное обратили внимание, что к минутам мы прибавили единицу. Это как раз и будет наша минута.

    var data = new Date(); 
    var time_data  = data.getHours() + ":" +   (data.getMinutes() + 1)   + ":" +  data.getSeconds(); 

  6. Таймер javascript со звуковым сигналом

    Возьмем скрипт, уже написанный с кнопкой и немного его переделаем.

    Нам понадобится :

    Отдельный div с id.

    <div id="wave"></div>

    Музыкальный файл :

    https://dwweb.ru/__a-data/mp3/windows_xp_start.mp3

    Функция play :

    function play() {document.getElementById("wave").innerHTML = "<audio src=\"https://dwweb.ru/__a-data/mp3/windows_xp_start.mp3\" autoplay></audio>"}

    Alert заменяем на вызов функции play

    Соберем все вместе:

    html

    <div id="wave"></div>

    javascript

    window.onload = function() {

    function play() {document.getElementById("wave").innerHTML = "<audio src=\"https://dwweb.ru/__a-data/mp3/windows_xp_start.mp3\" autoplay></audio>"}

    setInterval(MY_FOO_3, 1000);

    function MY_FOO_3() {

    peremennaya_1 = document.getElementById("show_3").innerHTML;

    if(peremennaya_1)

    {

    if(peremennaya_1 !== "stop timer" )

    {

    if(peremennaya_1 !== "0" )

    {

    peremennaya_1 = peremennaya_1 - 1;

    document.getElementById("show_3").innerHTML = peremennaya_1;

    }

    else

    {

    play();

    document.getElementById("show_3").innerHTML = "stop timer";

    }

    }

    }

    }

    };

    Чтобы начать обратный отчет времени со звуковым сигналом нажмите "Запустить таймер"


Вас может еще заинтересовать список тем : #JS | #JS_TIME |
Последняя дата редактирования : 08.01.2021 13:36
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =
Теги:
javascript таймер javascript обратный таймер как сделать таймер в javascript javascript кнопка с обратным таймером javascript таймер обратного отсчета секунд таймер обратного отсчета на javascript javascript смена картинок по таймеру обратный отсчет js при нажатии на кнопку обратный отсчет js

Последние комментарии :
Прохожий :
02/01/2021 10:44
Здравствуйте Марат!Спасибо Вам, за оперативность и развернутый ответ с примерами. И ОГРОМНОЕ спасибо, что…
подробнее.
Марат :
01/01/2021 03:30
И вас с Новым годом!Посмотрите …
подробнее.
Прохожий :
31/12/2020 03:58
А как проверить, чекнут ли чекбокс программно, то есть - другим скриптом, а не мышкой?Вот тут…
подробнее.
Марат :
03/12/2020 08:47
Давно пользуюсь данным скриптом, который написал еще при царе горохе!За десять лет изменилось то, что и при…
подробнее.
Ольга Попова :
02/12/2020 11:42
Я уж было обрадовалась, а у меня не…
подробнее.