en.javascript.info/2-ui/1-document/11-modifying-document/10-clock-settimeout/solution.view/index.html
Ilya Kantor 87bf53d076 update
2014-11-16 01:40:20 +03:00

58 lines
1 KiB
HTML
Executable file

<!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>