среда, 17 мая 2017 г.

JS. 14. Таймеры

Таймеры позволяют запускать код через определенный промежуток времени.
Используются: setInterval и setTimeout.


<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Таймеры</title>
<script type="text/javascript">
function timer() {
var s = Number(document.getElementById("timer").innerHTML); // -1 преодразуем в число
s++; // увеличиваем на 1
document.getElementById("timer").innerHTML = s; // записываем в innerHTML увеличенный s
setTimeout("timer()", 1000); // ставим одноразовый вызов функции через 1000 милисекунд
}

// запустим функцию первый раз через onload
</script>


<script type="text/javascript">
// Таймеры позволяют запускать код через определенный промежуток времени
// setInterval(func|code, delay).
// func|code - функция или строка кода для выполнения
// delay - интервал в миллисекундах, т.е 1000 это 1 секунда
// setInterval будет запускаться постоянно. Здесь каждую секунду до тех пор, как мы ее не сотрем.

// var id = setInterval("myFunc1()", 1000);

var counter_1 = 0;

function myFunc1() {
counter_1++;
alert("Прошло секунд: " + counter_1);
if(counter_1 == 5) clearInterval(id); // сотрем интервал после 5 запусков
}


// setTimeout(func|code, delay)
// func|code - функция или строка кода для выполнения
// delay - задержка в миллисекундах, т.е 1000 это 1 секунда

// setTimeout запускается всего один раз, Здесь через 1000 милисекунд.

var counter_2 = 0;

function myFunc2() {
counter_2++;
alert("Прошло секунд: " + counter_2);
if(counter_2 < 5)  setTimeout("myFunc2()", 1000);
}
// myFunc2();

// Выведем таймер на страницу


</script>

<script type="text/javascript">
/* Выведите время, проведённое пользователем на странице в формате: mm:ss.
Например, 01:15 или 02:00. То есть первые 2 цифры – это минуты, а вторые 2 цифры – это секунды.
Каждую секунду время должно увеличиваться.
Примечание: Обратите внимание, что если число минут или секунд меньше 10,
то должен быть добавлен ведущий 0, то есть чтобы не было 01:5, а было 01:05.
*/
function timer(){
         var s = Number(document.getElementById("sec").innerHTML);
         var m = Number(document.getElementById("min").innerHTML);
         s++;
         if(s > 59) {
            m++
            s = 0;
            document.getElementById("sec").innerHTML = "0" + s;
            if(m < 10) document.getElementById("min").innerHTML = "0" + m;
            else document.getElementById("min").innerHTML = m;
         }
         else{
            if(s < 10) document.getElementById("sec").innerHTML = "0" + s;
            else document.getElementById("sec").innerHTML = s;
         }
         setTimeout("timer()", 1000);
      }
</script>
</head>
<!-- <body onload="timer()"> -->
<body onload="timer()">
Прошло: <span id="timer">-1</span> сек. <br />

Время, проведённое пользователем на странице: <span id="min">0</span> мин. <span id="sec">-1</span> сек

</body>
</html>

Комментариев нет:

Отправить комментарий