53 lines
1.4 KiB
Markdown
53 lines
1.4 KiB
Markdown
First, let's make HTML/CSS.
|
|
|
|
Each component of the time would look great in its own `<span>`:
|
|
|
|
```html
|
|
<div id="clock">
|
|
<span class="hour">hh</span>:<span class="min">mm</span>:<span class="sec">ss</span>
|
|
</div>
|
|
```
|
|
|
|
Also we'll need CSS to color them.
|
|
|
|
The `update` function will refresh the clock, to be called by `setInterval` every second:
|
|
|
|
```js
|
|
function update() {
|
|
let clock = document.getElementById('clock');
|
|
*!*
|
|
let date = new Date(); // (*)
|
|
*/!*
|
|
let hours = date.getHours();
|
|
if (hours < 10) hours = '0' + hours;
|
|
clock.children[0].innerHTML = hours;
|
|
|
|
let minutes = date.getMinutes();
|
|
if (minutes < 10) minutes = '0' + minutes;
|
|
clock.children[1].innerHTML = minutes;
|
|
|
|
let seconds = date.getSeconds();
|
|
if (seconds < 10) seconds = '0' + seconds;
|
|
clock.children[2].innerHTML = seconds;
|
|
}
|
|
```
|
|
|
|
In the line `(*)` we every time check the current date. The calls to `setInterval` are not reliable: they may happen with delays.
|
|
|
|
The clock-managing functions:
|
|
|
|
```js
|
|
let timerId;
|
|
|
|
function clockStart() { // run the clock
|
|
timerId = setInterval(update, 1000);
|
|
update(); // (*)
|
|
}
|
|
|
|
function clockStop() {
|
|
clearInterval(timerId);
|
|
timerId = null;
|
|
}
|
|
```
|
|
|
|
Please note that the call to `update()` is not only scheduled in `clockStart()`, but immediately run in the line `(*)`. Otherwise the visitor would have to wait till the first execution of `setInterval`. And the clock would be empty till then.
|