Главная
Друзья! Пожалуйста не нервничайте! Скоро все заработает... у нас генеральная уборка...

Javascript обратный таймер

Нам потребовался таймер! Доя различных целей! Давайте создадим таймер, простой на js(javascript) И сделаем несколько разновидностей таймера!

Естественно, что таймер подразумевает под собой обратный отсчет времени! И поэтому с этим тоже разберемся!

1.

Нам нужно вывести сообщение в javascript через некоторое время. Либо же произвести какое-либо действие после окончания какого-то срока.

И сразу скажу, что если вам требуется запустить какую-то функцию, то её нужно поставить вовнутрь, условия - вместо "alert"

Мы уже несколько статей написали о времени

Ну и теперь у нас возникла некая задачка, которую мы с вами и решим:

Задача:

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

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

Решение: Не буду заново рассказывать код, который мы в прошлый раз сделали. 1.а

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

setInterval(myFuncSuper, 1000);

function myFuncSuper() {

var data = new Date();  

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

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

}

Все методы для Date() можно взять отсюда. 1.б

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

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

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

1.в

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

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

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

1.г

Ну и теперь нам остается все это собрать:

<script> 

var data = new Date(); 

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

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 минута "); } 

}

</script>

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


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

2.

Сделаем див и идентификатором:

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

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

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

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

Логика скрипта:

Пока в переменной(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'; 

      }      

    }

  }

}

Результат: