jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

update

Browse source
This commit is contained in:
Ilya Kantor 2014-11-16 01:40:20 +03:00
parent 962caebbb7
commit 87bf53d076
1825 changed files with 94929 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

7
2-ui/1-document/11-modifying-document/10-clock-settimeout/solution.md Normal file
View file

@ -0,0 +1,7 @@
Общее решение описано в [аналогичной задаче с setInterval](/task/clock-setinterval).
Способ через `setTimeout` -- по сути, такой же, только функция `update` каждый раз ставит себя в очередь заново.
Заметим, что в данном случае целесообразнее использовать `setInterval`, т.к. нужна не задержка между запусками, а просто запуск каждую секунду.
[edit src="solution"]Открыть решение в песочнице[/edit]

58
2-ui/1-document/11-modifying-document/10-clock-settimeout/solution.view/index.html Executable file
View file

@ -0,0 +1,58 @@
<!DOCTYPE HTML>
<html>
<head><meta charset="utf-8">
<style>
.hour { color: red }
.min { color: green }
.sec { color: blue }
</style>
</head>
<body>
<div id="clock">
<span class="hour">hh</span>:<span class="min">mm</span>:<span class="sec">ss</span>
</div>
<script>
var timerId;
function update() {
var clock = document.getElementById('clock');
var date = new Date();
var hours = date.getHours()
if (hours < 10) hours = '0'+hours;
clock.children[0].innerHTML = hours;
var minutes = date.getMinutes();
if (minutes < 10) minutes = '0'+minutes;
clock.children[1].innerHTML = minutes;
var seconds = date.getSeconds();
if (seconds < 10) seconds = '0'+seconds;
clock.children[2].innerHTML = seconds;
timerId = setTimeout(update, 1000);
}
function clockStart() {
if (timerId) return;
update();
}
function clockStop() {
clearTimeout(timerId);
timerId = null;
}
</script>
<input type="button" onclick="clockStart()" value="Старт">
<input type="button" onclick="clockStop()" value="Стоп">
</body>
</html>

10
2-ui/1-document/11-modifying-document/10-clock-settimeout/source.view/index.html Executable file
View file

@ -0,0 +1,10 @@
<!DOCTYPE HTML>
<html>
<body>
<input type="button" onclick="clockStart()" value="Start">
<input type="button" onclick="clockStop()" value="Stop">
</body>
</html>

10
2-ui/1-document/11-modifying-document/10-clock-settimeout/task.md Normal file
View file

@ -0,0 +1,10 @@
# Часики при помощи "setTimeout"
[importance 3]
Создайте цветные часы, **используя `setTimeout` вместо `setInterval`**:
[iframe src="solution"]
[edit src="source" task/]