Colored clock with setInterval
Create a colored clock like here:
Use HTML/CSS for the styling, JavaScript only updates time in elements.
First, let’s make HTML/CSS.
Each component of the time would look great in its own <span>
:
<
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:
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:
let
timerId;
function
clockStart
(
)
{
// run the clock
if
(
!
timerId)
{
// only set a new interval if the clock is not running
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.
Also it is important to set a new interval in clockStart()
only when the clock is not running. Otherways clicking the start button several times would set multiple concurrent intervals. Even worse – we would only keep the timerID
of the last interval, losing references to all others. Then we wouldn’t be able to stop the clock ever again! Note that we need to clear the timerID
when the clock is stopped in the line (**)
, so that it can be started again by running clockStart()
.