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

renovations

Browse source
This commit is contained in:
Ilya Kantor 2015-01-24 23:53:50 +03:00
parent a6431c3f97
commit dce565963b
115 changed files with 1433 additions and 1563 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -0,0 +1,56 @@
Для начала, придумаем подходящую HTML/CSS-структуру.
Здесь каждый компонент времени удобно поместить в соответствующий `SPAN`:
```html
<div id="clock">
<span class="hour">hh</span>:<span class="min">mm</span>:<span class="sec">ss</span>
</div>
```
Каждый `SPAN` раскрашивается при помощи CSS.
Жизнь часам будет обеспечивать функция `update`, вызываемая каждую секунду:
```js
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;
}
```
В строке `(*)` каждый раз мы получаем текущую дату. Мы должны это сделать, несмотря на то, что, казалось бы, могли бы просто увеличивать счетчик каждую секунду.
На самом деле мы не можем опираться на счетчик для вычисления даты, т.к. `setInterval` не гарантирует точную задержку. Если в другом участке кода будет вызван `alert`, то часы остановятся, как и любые счетчики.
Функция `clockStart` для запуска часов:
```js
function clockStart() { // запустить часы
setInterval(update, 1000);
update(); // (*)
}
function clockStop() {
clearInterval(timerId);
timerId = null;
}
```
Обратите внимание, что вызов `update` не только запланирован, но и тут же производится тут же в строке `(*)`. Иначе посетителю пришлось бы ждать до первого выполнения `setInterval`, то есть целую секунду.

48
2-ui/1-document/11-modifying-document/10-clock-setinterval/solution.view/index.html Normal file
View file

@ -0,0 +1,48 @@
<!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;
}
function clockStart() {
setInterval(update, 1000);
update(); // <-- начать тут же, не ждать 1 секунду пока setInterval сработает
}
clockStart();
</script>
</body>
</html>

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

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

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

@ -0,0 +1,8 @@
# Часики с использованием "setInterval"
[importance 4]
Создайте цветные часики как в примере ниже:
[iframe src="solution" height=100]