phpjsJqueryhtmlcssblog

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

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

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

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

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

Навигация по странице :

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

Скопировать ссылку



Таймер javascript с запуском отсчета по нажатию кнопки.

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

Начать отсчет времени
Скопировать ссылку



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

Нам нужен 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'; 
      }      
    }
  }
}
Скопировать ссылку



Готовый код таймера на 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>

Скопировать ссылку



Запуск таймера после загрузки страницы 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>

Скопировать ссылку



Описание скрипта : запуск таймера после загрузки страницы 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(); 
Скопировать ссылку



Таймер 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";

}

}

}

}

};

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

Еще никто не прокомментировал! COMMENTS+   BBcode

Подписаться + =

---