index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="1.js" defer></script>
</head>
<body>
<div id="test"></div>
<button id="stop">Stop</button>
<p id="out"></p>
</body>
</html>
style.css
#test {
width: 50px;
height: 50px;
background: orange;
}
1.js
// Сдвинем элемент.
var sdvig = 0;
var timer;
var test = document.getElementById('test');
// setInterval принимает 2 параметра: имя функции и время запуска функции.
function move() {
test.style.marginLeft = sdvig + 'px';
sdvig = sdvig + 10;
timer = setTimeout(move, 50); // делает анимацию. Запускает setInterval только после выполнения функции
}
// move(); // запустим функцию в первый раз
// var timer = setInterval(move, 50); // 1 секунда = 1000 млсек.
// setInterval ведет себя по разному в разных браузерах, когда мы их сворачиваем.
// Не рекомендуется выставлять setInterval в 0, т.к это приводит к ошибкам в браузерах.
// Мы можем приравнять setInterval к переменной и использовать ее для очистки.
document.getElementById('stop').onclick = function() {
// clearInterval(timer); // очищает переменную timer
// clearTimeout(timer);
}
// setTimeout(move, 5000); // функция move будет выполнятся однократно через 5 секунд.
// Создадим обратный отсчет.
var a = 10; // здесь будет функция обратного отсчета.
// Выведем в параграф out значение числа.
function obr() {
document.getElementById('out').innerHTML = a;
a--;
if (a < 0) {
clearTimeout(timer);
alert('Таймер отключен!');
}
else {
timer = setTimeout(obr, 1000);
}
}
obr();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="1.js" defer></script>
</head>
<body>
<div id="test"></div>
<button id="stop">Stop</button>
<p id="out"></p>
</body>
</html>
style.css
#test {
width: 50px;
height: 50px;
background: orange;
}
1.js
// Сдвинем элемент.
var sdvig = 0;
var timer;
var test = document.getElementById('test');
// setInterval принимает 2 параметра: имя функции и время запуска функции.
function move() {
test.style.marginLeft = sdvig + 'px';
sdvig = sdvig + 10;
timer = setTimeout(move, 50); // делает анимацию. Запускает setInterval только после выполнения функции
}
// move(); // запустим функцию в первый раз
// var timer = setInterval(move, 50); // 1 секунда = 1000 млсек.
// setInterval ведет себя по разному в разных браузерах, когда мы их сворачиваем.
// Не рекомендуется выставлять setInterval в 0, т.к это приводит к ошибкам в браузерах.
// Мы можем приравнять setInterval к переменной и использовать ее для очистки.
document.getElementById('stop').onclick = function() {
// clearInterval(timer); // очищает переменную timer
// clearTimeout(timer);
}
// setTimeout(move, 5000); // функция move будет выполнятся однократно через 5 секунд.
// Создадим обратный отсчет.
var a = 10; // здесь будет функция обратного отсчета.
// Выведем в параграф out значение числа.
function obr() {
document.getElementById('out').innerHTML = a;
a--;
if (a < 0) {
clearTimeout(timer);
alert('Таймер отключен!');
}
else {
timer = setTimeout(obr, 1000);
}
}
obr();
Комментариев нет:
Отправить комментарий