I'm making a dot clock in HTML/CSS/JS where DIVs with rounded borders are dots. It displays or hides dots depending on the number of seconds. Every second one dot should have the "on" class applied and the "off" class removed. When number of seconds equals 0 (every full minute), all dots should be "off". The problem is the clock shows the accurate time when it's being loaded but doesn't progress. Did I fet something?

var czas = new Date(),
    sekundy = czas.getSeconds(),
    minuty = czas.getMinutes(),
    godziny = czas.getHours();
const
    kropka = [
        document.getElementById('kropka0'),
        document.getElementById('kropka1'),
        document.getElementById('kropka2'),
        document.getElementById('kropka3'),
        document.getElementById('kropka4'),
        document.getElementById('kropka5'),
        document.getElementById('kropka6'),
        document.getElementById('kropka7'),
        document.getElementById('kropka8'),
        document.getElementById('kropka9'),
        document.getElementById('kropka10'),
        document.getElementById('kropka11'),
        document.getElementById('kropka12'),
        document.getElementById('kropka13'),
        document.getElementById('kropka14'),
        document.getElementById('kropka15'),
        document.getElementById('kropka16'),
        document.getElementById('kropka17'),
        document.getElementById('kropka18'),
        document.getElementById('kropka19'),
        document.getElementById('kropka20'),
        document.getElementById('kropka21'),
        document.getElementById('kropka22'),
        document.getElementById('kropka23'),
        document.getElementById('kropka24'),
        document.getElementById('kropka25'),
        document.getElementById('kropka26'),
        document.getElementById('kropka27'),
        document.getElementById('kropka28'),
        document.getElementById('kropka29'),
        document.getElementById('kropka30'),
        document.getElementById('kropka31'),
        document.getElementById('kropka32'),
        document.getElementById('kropka33'),
        document.getElementById('kropka34'),
        document.getElementById('kropka35'),
        document.getElementById('kropka36'),
        document.getElementById('kropka37'),
        document.getElementById('kropka38'),
        document.getElementById('kropka39'),
        document.getElementById('kropka40'),
        document.getElementById('kropka41'),
        document.getElementById('kropka42'),
        document.getElementById('kropka43'),
        document.getElementById('kropka44'),
        document.getElementById('kropka45'),
        document.getElementById('kropka46'),
        document.getElementById('kropka47'),
        document.getElementById('kropka48'),
        document.getElementById('kropka49'),
        document.getElementById('kropka50'),
        document.getElementById('kropka51'),
        document.getElementById('kropka52'),
        document.getElementById('kropka53'),
        document.getElementById('kropka54'),
        document.getElementById('kropka55'),
        document.getElementById('kropka56'),
        document.getElementById('kropka57'),
        document.getElementById('kropka58'),
        document.getElementById('kropka59')
    ];
/* turn a dot on/off*/
wlacz = (element) => {
    element.classList.add("on");
    element.classList.remove("off");
}
wylacz = (element) => {
    element.classList.add("off");
    element.classList.remove("on");
}

/*turn all dots on/off */
wylaczWszystko = () => {
    for (i = 1; i < 60; i++)
        wylacz(kropka[i])
}

/* draw second dots */
rysujSekundy = () => {
    wylaczWszystko();
    if (sekundy >= 1) wlacz(kropka[1]);
    if (sekundy >= 2) wlacz(kropka[2]);
    if (sekundy >= 3) wlacz(kropka[3]);
    if (sekundy >= 4) wlacz(kropka[4]);
    if (sekundy >= 5) wlacz(kropka[5]);
    if (sekundy >= 6) wlacz(kropka[6]);
    if (sekundy >= 7) wlacz(kropka[7]);
    if (sekundy >= 8) wlacz(kropka[8]);
    if (sekundy >= 9) wlacz(kropka[9]);
    if (sekundy >= 10) wlacz(kropka[10]);
    if (sekundy >= 11) wlacz(kropka[11]);
    if (sekundy >= 12) wlacz(kropka[12]);
    if (sekundy >= 13) wlacz(kropka[13]);
    if (sekundy >= 14) wlacz(kropka[14]);
    if (sekundy >= 15) wlacz(kropka[15]);
    if (sekundy >= 16) wlacz(kropka[16]);
    if (sekundy >= 17) wlacz(kropka[17]);
    if (sekundy >= 18) wlacz(kropka[18]);
    if (sekundy >= 19) wlacz(kropka[19]);
    if (sekundy >= 20) wlacz(kropka[20]);
    if (sekundy >= 21) wlacz(kropka[21]);
    if (sekundy >= 22) wlacz(kropka[22]);
    if (sekundy >= 23) wlacz(kropka[23]);
    if (sekundy >= 24) wlacz(kropka[24]);
    if (sekundy >= 25) wlacz(kropka[25]);
    if (sekundy >= 26) wlacz(kropka[26]);
    if (sekundy >= 27) wlacz(kropka[27]);
    if (sekundy >= 28) wlacz(kropka[28]);
    if (sekundy >= 29) wlacz(kropka[29]);
    if (sekundy >= 30) wlacz(kropka[30]);
    if (sekundy >= 31) wlacz(kropka[31]);
    if (sekundy >= 32) wlacz(kropka[32]);
    if (sekundy >= 33) wlacz(kropka[33]);
    if (sekundy >= 34) wlacz(kropka[34]);
    if (sekundy >= 35) wlacz(kropka[35]);
    if (sekundy >= 36) wlacz(kropka[36]);
    if (sekundy >= 37) wlacz(kropka[37]);
    if (sekundy >= 38) wlacz(kropka[38]);
    if (sekundy >= 39) wlacz(kropka[39]);
    if (sekundy >= 40) wlacz(kropka[40]);
    if (sekundy >= 41) wlacz(kropka[41]);
    if (sekundy >= 42) wlacz(kropka[42]);
    if (sekundy >= 43) wlacz(kropka[43]);
    if (sekundy >= 44) wlacz(kropka[44]);
    if (sekundy >= 45) wlacz(kropka[45]);
    if (sekundy >= 46) wlacz(kropka[46]);
    if (sekundy >= 47) wlacz(kropka[47]);
    if (sekundy >= 48) wlacz(kropka[48]);
    if (sekundy >= 49) wlacz(kropka[49]);
    if (sekundy >= 50) wlacz(kropka[50]);
    if (sekundy >= 51) wlacz(kropka[51]);
    if (sekundy >= 52) wlacz(kropka[52]);
    if (sekundy >= 53) wlacz(kropka[53]);
    if (sekundy >= 54) wlacz(kropka[54]);
    if (sekundy >= 55) wlacz(kropka[55]);
    if (sekundy >= 56) wlacz(kropka[56]);
    if (sekundy >= 57) wlacz(kropka[57]);
    if (sekundy >= 58) wlacz(kropka[58]);
    if (sekundy == 59) wlacz(kropka[59]);
}

/* run the clock drawing function*/
zegar = () => {
    rysujSekundy();
}

setInterval(zegar, 1000);
zegar();

body {
    background-color: black;
    margin: 0;
    padding: 0;
}

.box {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zegar {
    /*background-color: darkblue;*/
    height: 81.4699vmin;
    aspect-ratio: 1/1;
    position: relative;
}

/*formatting all dots*/
.kropka {
    position: absolute;
    height: 2.4818%;
    aspect-ratio: 1/1;
    background-color: #fff;
    border-radius: 50%;

}


/*dots positions*/
.kropka0 {
    left: 48.75%;
    top: 0%;
}
.kropka0a {
    left: 48.75%;
    top: 3.06%;
}
.kropka1 {
    right: 43.66%;
    top: .27%;
}
.kropka2 {
    right: 38.67%;
    top: 1.07%;
}
.kropka3 {
    right: 33.69%;
    top: 2.39%;
}
.kropka4 {
    right: 28.93%;
    top: 4.22%;
}

.kropka5 {
    right: 24.38%;
    top: 6.54%;
}
.kropka5a {
    right: 25.92%;
    top: 9.19%;
}
.kropka6 {
    right: 20.1%;
    top: 9.32%;
}
.kropka7 {
    right: 16.14%;
    top: 12.53%;
}
.kropka8 {
    right: 12.53%;
    top: 16.14%;
}
.kropka9 {
    right: 9.32%;
    top: 20.1%;
}

.kropka10 {
    right: 6.54%;
    top: 24.38%;
}
.kropka10a {
    right: 9.19%;
    top: 25.92%;
}
.kropka11 {
    right: 4.22%;
    top: 28.92%;
}
.kropka12 {
    right: 2.39%;
    top: 33.65%;
}
.kropka13 {
    right: 1.07%;
    top: 38.67%;
}
.kropka14 {
    right: .27%;
    top: 43.66%;
}

.kropka15 {
    right: 0%;
    top: 48.76%;
}
.kropka15a {
    right: 3.06%;
    top: 48.75%;
}
.kropka16 {
    bottom: 43.66%;
    right: .27%;
}
.kropka17 {
    bottom: 38.67%;
    right: 1.07%;
}
.kropka18 {
    bottom: 33.69%;
    right: 2.39%;
}
.kropka19 {
    bottom: 28.93%;
    right: 4.22%;
}

.kropka20 {
    bottom: 24.38%;
    right: 6.54%;
}
.kropka20a {
    bottom: 25.92%;
    right: 9.19%;
}
.kropka21 {
    bottom: 20.1%;
    right: 9.32%;
}
.kropka22 {
    bottom: 16.14%;
    right: 12.53%;
}
.kropka23 {
    bottom: 12.53%;
    right: 16.14%;
}
.kropka24 {
    bottom: 9.32%;
    right: 20.1%;
}

.kropka25 {
    bottom: 6.54%;
    right: 24.38%;
}
.kropka25a {
    bottom: 9.19%;
    right: 25.92%;
}
.kropka26 {
    bottom: 4.22%;
    right: 28.92%;
}
.kropka27 {
    bottom: 2.39%;
    right: 33.65%;
}
.kropka28 {
    bottom: 1.07%;
    right: 38.67%;
}
.kropka29 {
    bottom: .27%;
    right: 43.66%;
}

.kropka30 {
    left: 48.75%;
    bottom: 0%;
}
.kropka30a {
    left: 48.75%;
    bottom: 3.06%;
}
.kropka31 {
    left: 43.66%;
    bottom: .27%;
}
.kropka32 {
    left: 38.67%;
    bottom: 1.07%;
}
.kropka33 {
    left: 33.69%;
    bottom: 2.39%;
}
.kropka34 {
    left: 28.93%;
    bottom: 4.22%;
}

.kropka35 {
    left: 24.38%;
    bottom: 6.54%;
}
.kropka35a {
    left: 25.92%;
    bottom: 9.19%;
}
.kropka36 {
    left: 20.1%;
    bottom: 9.32%;
}
.kropka37 {
    left: 16.14%;
    bottom: 12.53%;
}
.kropka38 {
    left: 12.53%;
    bottom: 16.14%;
}
.kropka39 {
    left: 9.32%;
    bottom: 20.1%;
}

.kropka40 {
    left: 6.54%;
    bottom: 24.38%;
}
.kropka40a {
    left: 9.19%;
    bottom: 25.92%;
}
.kropka41 {
    left: 4.22%;
    bottom: 28.92%;
}
.kropka42 {
    left: 2.39%;
    bottom: 33.65%;
}
.kropka43 {
    left: 1.07%;
    bottom: 38.67%;
}
.kropka44 {
    left: .27%;
    bottom: 43.66%;
}

.kropka45 {
    left: 0%;
    bottom: 48.76%;
}
.kropka45a {
    left: 3.06%;
    bottom: 48.75%;
}
.kropka46 {
    top: 43.66%;
    left: .27%;
}
.kropka47 {
    top: 38.67%;
    left: 1.07%;
}
.kropka48 {
    top: 33.69%;
    left: 2.39%;
}
.kropka49 {
    top: 28.93%;
    left: 4.22%;
}

.kropka50 {
    top: 24.38%;
    left: 6.54%;
}
.kropka50a {
    top: 25.92%;
    left: 9.19%;
}
.kropka51 {
    top: 20.1%;
    left: 9.32%;
}
.kropka52 {
    top: 16.14%;
    left: 12.53%;
}
.kropka53 {
    top: 12.53%;
    left: 16.14%;
}
.kropka54 {
    top: 9.32%;
    left: 20.1%;
}

.kropka55 {
    top: 6.54%;
    left: 24.38%;
}
.kropka55a {
    top: 9.19%;
    left: 25.92%;
}
.kropka56 {
    top: 4.22%;
    left: 28.92%;
}
.kropka57 {
    top: 2.39%;
    left: 33.65%;
}
.kropka58 {
    top: 1.07%;
    left: 38.67%;
}
.kropka59 {
    top: .27%;
    left: 43.66%;
}

/*turn dots on/off*/
.on  {
   visibility: visible;
    opacity: 1;
}

.off {
    visibility: hidden;
     opacity: 0;
}

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="clock.css">
</head>

<body>
    <div class="box">
        <div class="zegar">
            <div class="kropka kropka0a on"></div>
            <div class="kropka kropka0 on" id="kropka0"></div>
            <div class="kropka kropka1 on" id="kropka1"></div>
            <div class="kropka kropka2 on" id="kropka2"></div>
            <div class="kropka kropka3 on" id="kropka3"></div>
            <div class="kropka kropka4 on" id="kropka4"></div>

            <div class="kropka kropka5a on"></div>
            <div class="kropka kropka5 on" id="kropka5"></div>
            <div class="kropka kropka6 on" id="kropka6"></div>
            <div class="kropka kropka7 on" id="kropka7"></div>
            <div class="kropka kropka8 on" id="kropka8"></div>
            <div class="kropka kropka9 on" id="kropka9"></div>

            <div class="kropka kropka10a on"></div>
            <div class="kropka kropka10 on" id="kropka10"></div>
            <div class="kropka kropka11 on" id="kropka11"></div>
            <div class="kropka kropka12 on" id="kropka12"></div>
            <div class="kropka kropka13 on" id="kropka13"></div>
            <div class="kropka kropka14 on" id="kropka14"></div>

            <div class="kropka kropka15a on"></div>
            <div class="kropka kropka15 on" id="kropka15"></div>
            <div class="kropka kropka16 on" id="kropka16"></div>
            <div class="kropka kropka17 on" id="kropka17"></div>
            <div class="kropka kropka18 on" id="kropka18"></div>
            <div class="kropka kropka19 on" id="kropka19"></div>

            <div class="kropka kropka20a on"></div>
            <div class="kropka kropka20 on" id="kropka20"></div>
            <div class="kropka kropka21 on" id="kropka21"></div>
            <div class="kropka kropka22 on" id="kropka22"></div>
            <div class="kropka kropka23 on" id="kropka23"></div>
            <div class="kropka kropka24 on" id="kropka24"></div>

            <div class="kropka kropka25a on"></div>
            <div class="kropka kropka25 on" id="kropka25"></div>
            <div class="kropka kropka26 on" id="kropka26"></div>
            <div class="kropka kropka27 on" id="kropka27"></div>
            <div class="kropka kropka28 on" id="kropka28"></div>
            <div class="kropka kropka29 on" id="kropka29"></div>

            <div class="kropka kropka30a on"></div>
            <div class="kropka kropka30 on" id="kropka30"></div>
            <div class="kropka kropka31 on" id="kropka31"></div>
            <div class="kropka kropka32 on" id="kropka32"></div>
            <div class="kropka kropka33 on" id="kropka33"></div>
            <div class="kropka kropka34 on" id="kropka34"></div>

            <div class="kropka kropka35a on"></div>
            <div class="kropka kropka35 on" id="kropka35"></div>
            <div class="kropka kropka36 on" id="kropka36"></div>
            <div class="kropka kropka37 on" id="kropka37"></div>
            <div class="kropka kropka38 on" id="kropka38"></div>
            <div class="kropka kropka39 on" id="kropka39"></div>

            <div class="kropka kropka40a on"></div>
            <div class="kropka kropka40 on" id="kropka40"></div>
            <div class="kropka kropka41 on" id="kropka41"></div>
            <div class="kropka kropka42 on" id="kropka42"></div>
            <div class="kropka kropka43 on" id="kropka43"></div>
            <div class="kropka kropka44 on" id="kropka44"></div>

            <div class="kropka kropka45a on"></div>
            <div class="kropka kropka45 on" id="kropka45"></div>
            <div class="kropka kropka46 on" id="kropka46"></div>
            <div class="kropka kropka47 on" id="kropka47"></div>
            <div class="kropka kropka48 on" id="kropka48"></div>
            <div class="kropka kropka49 on" id="kropka49"></div>

            <div class="kropka kropka50a on"></div>
            <div class="kropka kropka50 on" id="kropka50"></div>
            <div class="kropka kropka51 on" id="kropka51"></div>
            <div class="kropka kropka52 on" id="kropka52"></div>
            <div class="kropka kropka53 on" id="kropka53"></div>
            <div class="kropka kropka54 on" id="kropka54"></div>

            <div class="kropka kropka55a on"></div>
            <div class="kropka kropka55 on" id="kropka55"></div>
            <div class="kropka kropka56 on" id="kropka56"></div>
            <div class="kropka kropka57 on" id="kropka57"></div>
            <div class="kropka kropka58 on" id="kropka58"></div>
            <div class="kropka kropka59 on" id="kropka59"></div>

        </div>
    </div>
    <script src="clock.js"></script>
</body>

</html>

var czas = new Date(),
    sekundy = czas.getSeconds(),
    minuty = czas.getMinutes(),
    godziny = czas.getHours();
const
    kropka = [
        document.getElementById('kropka0'),
        document.getElementById('kropka1'),
        document.getElementById('kropka2'),
        document.getElementById('kropka3'),
        document.getElementById('kropka4'),
        document.getElementById('kropka5'),
        document.getElementById('kropka6'),
        document.getElementById('kropka7'),
        document.getElementById('kropka8'),
        document.getElementById('kropka9'),
        document.getElementById('kropka10'),
        document.getElementById('kropka11'),
        document.getElementById('kropka12'),
        document.getElementById('kropka13'),
        document.getElementById('kropka14'),
        document.getElementById('kropka15'),
        document.getElementById('kropka16'),
        document.getElementById('kropka17'),
        document.getElementById('kropka18'),
        document.getElementById('kropka19'),
        document.getElementById('kropka20'),
        document.getElementById('kropka21'),
        document.getElementById('kropka22'),
        document.getElementById('kropka23'),
        document.getElementById('kropka24'),
        document.getElementById('kropka25'),
        document.getElementById('kropka26'),
        document.getElementById('kropka27'),
        document.getElementById('kropka28'),
        document.getElementById('kropka29'),
        document.getElementById('kropka30'),
        document.getElementById('kropka31'),
        document.getElementById('kropka32'),
        document.getElementById('kropka33'),
        document.getElementById('kropka34'),
        document.getElementById('kropka35'),
        document.getElementById('kropka36'),
        document.getElementById('kropka37'),
        document.getElementById('kropka38'),
        document.getElementById('kropka39'),
        document.getElementById('kropka40'),
        document.getElementById('kropka41'),
        document.getElementById('kropka42'),
        document.getElementById('kropka43'),
        document.getElementById('kropka44'),
        document.getElementById('kropka45'),
        document.getElementById('kropka46'),
        document.getElementById('kropka47'),
        document.getElementById('kropka48'),
        document.getElementById('kropka49'),
        document.getElementById('kropka50'),
        document.getElementById('kropka51'),
        document.getElementById('kropka52'),
        document.getElementById('kropka53'),
        document.getElementById('kropka54'),
        document.getElementById('kropka55'),
        document.getElementById('kropka56'),
        document.getElementById('kropka57'),
        document.getElementById('kropka58'),
        document.getElementById('kropka59')
    ];
/* turn a dot on/off*/
wlacz = (element) => {
    element.classList.add("on");
    element.classList.remove("off");
}
wylacz = (element) => {
    element.classList.add("off");
    element.classList.remove("on");
}

/*turn all dots on/off */
wylaczWszystko = () => {
    for (i = 1; i < 60; i++)
        wylacz(kropka[i])
}

/* draw second dots */
rysujSekundy = () => {
    wylaczWszystko();
    if (sekundy >= 1) wlacz(kropka[1]);
    if (sekundy >= 2) wlacz(kropka[2]);
    if (sekundy >= 3) wlacz(kropka[3]);
    if (sekundy >= 4) wlacz(kropka[4]);
    if (sekundy >= 5) wlacz(kropka[5]);
    if (sekundy >= 6) wlacz(kropka[6]);
    if (sekundy >= 7) wlacz(kropka[7]);
    if (sekundy >= 8) wlacz(kropka[8]);
    if (sekundy >= 9) wlacz(kropka[9]);
    if (sekundy >= 10) wlacz(kropka[10]);
    if (sekundy >= 11) wlacz(kropka[11]);
    if (sekundy >= 12) wlacz(kropka[12]);
    if (sekundy >= 13) wlacz(kropka[13]);
    if (sekundy >= 14) wlacz(kropka[14]);
    if (sekundy >= 15) wlacz(kropka[15]);
    if (sekundy >= 16) wlacz(kropka[16]);
    if (sekundy >= 17) wlacz(kropka[17]);
    if (sekundy >= 18) wlacz(kropka[18]);
    if (sekundy >= 19) wlacz(kropka[19]);
    if (sekundy >= 20) wlacz(kropka[20]);
    if (sekundy >= 21) wlacz(kropka[21]);
    if (sekundy >= 22) wlacz(kropka[22]);
    if (sekundy >= 23) wlacz(kropka[23]);
    if (sekundy >= 24) wlacz(kropka[24]);
    if (sekundy >= 25) wlacz(kropka[25]);
    if (sekundy >= 26) wlacz(kropka[26]);
    if (sekundy >= 27) wlacz(kropka[27]);
    if (sekundy >= 28) wlacz(kropka[28]);
    if (sekundy >= 29) wlacz(kropka[29]);
    if (sekundy >= 30) wlacz(kropka[30]);
    if (sekundy >= 31) wlacz(kropka[31]);
    if (sekundy >= 32) wlacz(kropka[32]);
    if (sekundy >= 33) wlacz(kropka[33]);
    if (sekundy >= 34) wlacz(kropka[34]);
    if (sekundy >= 35) wlacz(kropka[35]);
    if (sekundy >= 36) wlacz(kropka[36]);
    if (sekundy >= 37) wlacz(kropka[37]);
    if (sekundy >= 38) wlacz(kropka[38]);
    if (sekundy >= 39) wlacz(kropka[39]);
    if (sekundy >= 40) wlacz(kropka[40]);
    if (sekundy >= 41) wlacz(kropka[41]);
    if (sekundy >= 42) wlacz(kropka[42]);
    if (sekundy >= 43) wlacz(kropka[43]);
    if (sekundy >= 44) wlacz(kropka[44]);
    if (sekundy >= 45) wlacz(kropka[45]);
    if (sekundy >= 46) wlacz(kropka[46]);
    if (sekundy >= 47) wlacz(kropka[47]);
    if (sekundy >= 48) wlacz(kropka[48]);
    if (sekundy >= 49) wlacz(kropka[49]);
    if (sekundy >= 50) wlacz(kropka[50]);
    if (sekundy >= 51) wlacz(kropka[51]);
    if (sekundy >= 52) wlacz(kropka[52]);
    if (sekundy >= 53) wlacz(kropka[53]);
    if (sekundy >= 54) wlacz(kropka[54]);
    if (sekundy >= 55) wlacz(kropka[55]);
    if (sekundy >= 56) wlacz(kropka[56]);
    if (sekundy >= 57) wlacz(kropka[57]);
    if (sekundy >= 58) wlacz(kropka[58]);
    if (sekundy == 59) wlacz(kropka[59]);
}

/* run the clock drawing function*/
zegar = () => {
    rysujSekundy();
}

setInterval(zegar, 1000);
zegar();

body {
    background-color: black;
    margin: 0;
    padding: 0;
}

.box {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zegar {
    /*background-color: darkblue;*/
    height: 81.4699vmin;
    aspect-ratio: 1/1;
    position: relative;
}

/*formatting all dots*/
.kropka {
    position: absolute;
    height: 2.4818%;
    aspect-ratio: 1/1;
    background-color: #fff;
    border-radius: 50%;

}


/*dots positions*/
.kropka0 {
    left: 48.75%;
    top: 0%;
}
.kropka0a {
    left: 48.75%;
    top: 3.06%;
}
.kropka1 {
    right: 43.66%;
    top: .27%;
}
.kropka2 {
    right: 38.67%;
    top: 1.07%;
}
.kropka3 {
    right: 33.69%;
    top: 2.39%;
}
.kropka4 {
    right: 28.93%;
    top: 4.22%;
}

.kropka5 {
    right: 24.38%;
    top: 6.54%;
}
.kropka5a {
    right: 25.92%;
    top: 9.19%;
}
.kropka6 {
    right: 20.1%;
    top: 9.32%;
}
.kropka7 {
    right: 16.14%;
    top: 12.53%;
}
.kropka8 {
    right: 12.53%;
    top: 16.14%;
}
.kropka9 {
    right: 9.32%;
    top: 20.1%;
}

.kropka10 {
    right: 6.54%;
    top: 24.38%;
}
.kropka10a {
    right: 9.19%;
    top: 25.92%;
}
.kropka11 {
    right: 4.22%;
    top: 28.92%;
}
.kropka12 {
    right: 2.39%;
    top: 33.65%;
}
.kropka13 {
    right: 1.07%;
    top: 38.67%;
}
.kropka14 {
    right: .27%;
    top: 43.66%;
}

.kropka15 {
    right: 0%;
    top: 48.76%;
}
.kropka15a {
    right: 3.06%;
    top: 48.75%;
}
.kropka16 {
    bottom: 43.66%;
    right: .27%;
}
.kropka17 {
    bottom: 38.67%;
    right: 1.07%;
}
.kropka18 {
    bottom: 33.69%;
    right: 2.39%;
}
.kropka19 {
    bottom: 28.93%;
    right: 4.22%;
}

.kropka20 {
    bottom: 24.38%;
    right: 6.54%;
}
.kropka20a {
    bottom: 25.92%;
    right: 9.19%;
}
.kropka21 {
    bottom: 20.1%;
    right: 9.32%;
}
.kropka22 {
    bottom: 16.14%;
    right: 12.53%;
}
.kropka23 {
    bottom: 12.53%;
    right: 16.14%;
}
.kropka24 {
    bottom: 9.32%;
    right: 20.1%;
}

.kropka25 {
    bottom: 6.54%;
    right: 24.38%;
}
.kropka25a {
    bottom: 9.19%;
    right: 25.92%;
}
.kropka26 {
    bottom: 4.22%;
    right: 28.92%;
}
.kropka27 {
    bottom: 2.39%;
    right: 33.65%;
}
.kropka28 {
    bottom: 1.07%;
    right: 38.67%;
}
.kropka29 {
    bottom: .27%;
    right: 43.66%;
}

.kropka30 {
    left: 48.75%;
    bottom: 0%;
}
.kropka30a {
    left: 48.75%;
    bottom: 3.06%;
}
.kropka31 {
    left: 43.66%;
    bottom: .27%;
}
.kropka32 {
    left: 38.67%;
    bottom: 1.07%;
}
.kropka33 {
    left: 33.69%;
    bottom: 2.39%;
}
.kropka34 {
    left: 28.93%;
    bottom: 4.22%;
}

.kropka35 {
    left: 24.38%;
    bottom: 6.54%;
}
.kropka35a {
    left: 25.92%;
    bottom: 9.19%;
}
.kropka36 {
    left: 20.1%;
    bottom: 9.32%;
}
.kropka37 {
    left: 16.14%;
    bottom: 12.53%;
}
.kropka38 {
    left: 12.53%;
    bottom: 16.14%;
}
.kropka39 {
    left: 9.32%;
    bottom: 20.1%;
}

.kropka40 {
    left: 6.54%;
    bottom: 24.38%;
}
.kropka40a {
    left: 9.19%;
    bottom: 25.92%;
}
.kropka41 {
    left: 4.22%;
    bottom: 28.92%;
}
.kropka42 {
    left: 2.39%;
    bottom: 33.65%;
}
.kropka43 {
    left: 1.07%;
    bottom: 38.67%;
}
.kropka44 {
    left: .27%;
    bottom: 43.66%;
}

.kropka45 {
    left: 0%;
    bottom: 48.76%;
}
.kropka45a {
    left: 3.06%;
    bottom: 48.75%;
}
.kropka46 {
    top: 43.66%;
    left: .27%;
}
.kropka47 {
    top: 38.67%;
    left: 1.07%;
}
.kropka48 {
    top: 33.69%;
    left: 2.39%;
}
.kropka49 {
    top: 28.93%;
    left: 4.22%;
}

.kropka50 {
    top: 24.38%;
    left: 6.54%;
}
.kropka50a {
    top: 25.92%;
    left: 9.19%;
}
.kropka51 {
    top: 20.1%;
    left: 9.32%;
}
.kropka52 {
    top: 16.14%;
    left: 12.53%;
}
.kropka53 {
    top: 12.53%;
    left: 16.14%;
}
.kropka54 {
    top: 9.32%;
    left: 20.1%;
}

.kropka55 {
    top: 6.54%;
    left: 24.38%;
}
.kropka55a {
    top: 9.19%;
    left: 25.92%;
}
.kropka56 {
    top: 4.22%;
    left: 28.92%;
}
.kropka57 {
    top: 2.39%;
    left: 33.65%;
}
.kropka58 {
    top: 1.07%;
    left: 38.67%;
}
.kropka59 {
    top: .27%;
    left: 43.66%;
}

/*turn dots on/off*/
.on  {
   visibility: visible;
    opacity: 1;
}

.off {
    visibility: hidden;
     opacity: 0;
}

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="clock.css">
</head>

<body>
    <div class="box">
        <div class="zegar">
            <div class="kropka kropka0a on"></div>
            <div class="kropka kropka0 on" id="kropka0"></div>
            <div class="kropka kropka1 on" id="kropka1"></div>
            <div class="kropka kropka2 on" id="kropka2"></div>
            <div class="kropka kropka3 on" id="kropka3"></div>
            <div class="kropka kropka4 on" id="kropka4"></div>

            <div class="kropka kropka5a on"></div>
            <div class="kropka kropka5 on" id="kropka5"></div>
            <div class="kropka kropka6 on" id="kropka6"></div>
            <div class="kropka kropka7 on" id="kropka7"></div>
            <div class="kropka kropka8 on" id="kropka8"></div>
            <div class="kropka kropka9 on" id="kropka9"></div>

            <div class="kropka kropka10a on"></div>
            <div class="kropka kropka10 on" id="kropka10"></div>
            <div class="kropka kropka11 on" id="kropka11"></div>
            <div class="kropka kropka12 on" id="kropka12"></div>
            <div class="kropka kropka13 on" id="kropka13"></div>
            <div class="kropka kropka14 on" id="kropka14"></div>

            <div class="kropka kropka15a on"></div>
            <div class="kropka kropka15 on" id="kropka15"></div>
            <div class="kropka kropka16 on" id="kropka16"></div>
            <div class="kropka kropka17 on" id="kropka17"></div>
            <div class="kropka kropka18 on" id="kropka18"></div>
            <div class="kropka kropka19 on" id="kropka19"></div>

            <div class="kropka kropka20a on"></div>
            <div class="kropka kropka20 on" id="kropka20"></div>
            <div class="kropka kropka21 on" id="kropka21"></div>
            <div class="kropka kropka22 on" id="kropka22"></div>
            <div class="kropka kropka23 on" id="kropka23"></div>
            <div class="kropka kropka24 on" id="kropka24"></div>

            <div class="kropka kropka25a on"></div>
            <div class="kropka kropka25 on" id="kropka25"></div>
            <div class="kropka kropka26 on" id="kropka26"></div>
            <div class="kropka kropka27 on" id="kropka27"></div>
            <div class="kropka kropka28 on" id="kropka28"></div>
            <div class="kropka kropka29 on" id="kropka29"></div>

            <div class="kropka kropka30a on"></div>
            <div class="kropka kropka30 on" id="kropka30"></div>
            <div class="kropka kropka31 on" id="kropka31"></div>
            <div class="kropka kropka32 on" id="kropka32"></div>
            <div class="kropka kropka33 on" id="kropka33"></div>
            <div class="kropka kropka34 on" id="kropka34"></div>

            <div class="kropka kropka35a on"></div>
            <div class="kropka kropka35 on" id="kropka35"></div>
            <div class="kropka kropka36 on" id="kropka36"></div>
            <div class="kropka kropka37 on" id="kropka37"></div>
            <div class="kropka kropka38 on" id="kropka38"></div>
            <div class="kropka kropka39 on" id="kropka39"></div>

            <div class="kropka kropka40a on"></div>
            <div class="kropka kropka40 on" id="kropka40"></div>
            <div class="kropka kropka41 on" id="kropka41"></div>
            <div class="kropka kropka42 on" id="kropka42"></div>
            <div class="kropka kropka43 on" id="kropka43"></div>
            <div class="kropka kropka44 on" id="kropka44"></div>

            <div class="kropka kropka45a on"></div>
            <div class="kropka kropka45 on" id="kropka45"></div>
            <div class="kropka kropka46 on" id="kropka46"></div>
            <div class="kropka kropka47 on" id="kropka47"></div>
            <div class="kropka kropka48 on" id="kropka48"></div>
            <div class="kropka kropka49 on" id="kropka49"></div>

            <div class="kropka kropka50a on"></div>
            <div class="kropka kropka50 on" id="kropka50"></div>
            <div class="kropka kropka51 on" id="kropka51"></div>
            <div class="kropka kropka52 on" id="kropka52"></div>
            <div class="kropka kropka53 on" id="kropka53"></div>
            <div class="kropka kropka54 on" id="kropka54"></div>

            <div class="kropka kropka55a on"></div>
            <div class="kropka kropka55 on" id="kropka55"></div>
            <div class="kropka kropka56 on" id="kropka56"></div>
            <div class="kropka kropka57 on" id="kropka57"></div>
            <div class="kropka kropka58 on" id="kropka58"></div>
            <div class="kropka kropka59 on" id="kropka59"></div>

        </div>
    </div>
    <script src="clock.js"></script>
</body>

</html>

Share Improve this question edited Mar 27 at 21:17 isherwood 61.2k16 gold badges121 silver badges170 bronze badges asked Mar 27 at 20:09 Grzegorz K 213 bronze badges

3 Aside: The long sequence of if statements in rysujSekundy() should be a for loop. for (i = sekundy; i <= 59; i++) { wlacz(kropka[i]); } – Barmar Commented Mar 27 at 20:28
2 Please see How to Ask, then revise your title to ask a clear, specific question. Don't add tags (especially abbreviated ones). – isherwood Commented Mar 27 at 21:16

Add a comment |

3 Answers 3

Sorted by: Reset to default 4

The problem is that you are only reading the current time at page load. You should do this in the function that is called by setInterval.

I took the opportunity to eliminate some repetitive code, making use of loops, and creating the HTML dynamically so you don't have those hard-coded percentages to maintain in your CSS, nor all those div elements in your HTML.

Also, you should declare all your variables with var, let or const, and not rely on the implicit global declaration that happens in non-strict mode when you don't use those keywords:

const container = document.querySelector(".zegar");
// Create all dots dynamically 
//    including their positions (saving static HTML & CSS)
const radius = 48.75;
const inner = 3;
const dx = i => 1 - Math.cos(Math.PI / 30 * i);
const createDot = (offset, radius, ang) => {
    const dot = document.createElement("div");
    dot.style.top = offset + radius * dx(ang) + "%";
    dot.style.left = offset + radius * dx(45-ang) + "%";
    container.appendChild(dot);
    return dot;
};
const kropka = Array.from({length: 60}, (_, i) => createDot(0, radius, i));
for (let i = 0; i < 60; i+=5) createDot(inner, radius-inner, i);

/* turn a dot on/off*/
const wlacz = (element) => element.classList.remove("off");
const wylacz = (element) => element.classList.add("off");

/* draw second dots */
const rysujSekundy = () => {
    kropka.forEach(wylacz); // turn all outer dots off
    // Moved the time update inside this function:
    kropka.slice(0, new Date().getSeconds()+1).forEach(wlacz);
}

/* run the clock drawing function*/
setInterval(rysujSekundy, 1000);
rysujSekundy();

body {
    background-color: black;
    margin: 0;
    padding: 0;
}

.box {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zegar {
    /*background-color: darkblue;*/
    height: 81.4699vmin;
    aspect-ratio: 1/1;
    position: relative;
}

/*formatting all dots*/
.zegar > div {
    position: absolute;
    height: 2.4818%;
    aspect-ratio: 1/1;
    background-color: #fff;
    border-radius: 50%;

}
/*turn dots off*/
.off {
    visibility: hidden;
}

<div class="box">
    <div class="zegar"></div>
</div>

@Trincot already mentioned and fixed the most important points in his answer. He also removed some redundant code. But you can reduce the code even further, as you can see below. I also added two digits on the clock face for minutes and hours.

function placeDots(dots,r,hideAsOf=60){
 let ang=0, da=2*Math.PI/dots.length;
 dots.forEach((d,i)=>{
  dot(d,r,ang);
  if (i>hideAsOf) d.style.display="none";
  ang+=da;
 })
}
function dot(d,r,ang){
  const pos=110-d.clientHeight/2;
  d.style.left=pos+r*Math.sin(ang)+"px";
  d.style.top =pos-r*Math.cos(ang)+"px";
}
function smh(){ // seconds, minutes, hours
 const d=new Date(), pi2=2*Math.PI,
       s=d.getSeconds(),m=d.getMinutes(),h=d.getHours()+m/60;
 dot(allDots[72],80,pi2*m/60); // minutes digit
 dot(allDots[73],50,pi2*h/12); // hours digit
 return s;
}
const clock=document.querySelector(".clock");
clock.innerHTML=Array(74).fill("<div></div>").join("");
let allDots=[...clock.children], s=smh();
placeDots(allDots.slice(0,60),100,s);
placeDots(allDots.slice(60,72),92);
allDots.slice(72).forEach(d=>d.style.height="10px");

setInterval(_=>{
 s=(s+1)%60;
 if (!s){
  s=smh();
  allDots.slice(0,60).forEach(d=>d.style.display="none");
 }
 allDots[s].style.display="";
},1000);

body {
background-color: black;
}
.clock div {
position: absolute;
height: 4px;
aspect-ratio: 1/1;
background-color: #fff;
border-radius: 50%;
}

<div class="clock"></div>

60 Second Analog Timer, 12 Hour Analog Timer, and an Analog Clock

Example A - 60 Second Analog Timer

Example A relies on CSS animation derived from a simple class (eg .appear):

.appear {
  animation: appear 0.4s forwards;
}

@keyframes appear {
  0% {
    background-color: #000;
  }

  100% {
    background-color: #FFF;
  }
}

Instead of using setInterval() to reveal a dot each second, each dot is assigned a CSS property animation-delay with a value of 1 second more than the previous dot.

// dots is an array of 60 <mark>s (I don't like using <div>s)
dots.forEach((dot, idx) => dot.style.animationDelay = idx + "s");

The last dot (eg 60th dot) is registered to listen for the "animationend" event so when the animation ends on the last dot the following callback runs:

lastDot.addEventListener("animationend", (e) => {
  dots.forEach(dot => dot.classList.remove("appear"));
  setTimeout(() => {
    dots.forEach(dot => dot.classList.add("appear"));
  }, 0);
});

All of the outer dots disappear momentarily, and then start all over again. Note the setTimeout() of 0 seconds. That is to insure that the removal of the .appear class runs before the addition of the .appear class to each dot.

Example A

const clock = document.querySelector(".clock");

const dot = (qty) => {
  const o = document.createElement("object");
  const m = document.createElement("mark");
  o.className = `spoke q${qty}`;
  m.className = "dot";
  o.append(m);
  return o;
};

const genDots = (qty) => {
  return [...Array(qty)].map((_, i) => {
    const deg = 360 / qty;
    const D = dot(qty);
    D.style.transform = `rotate(${deg * i}deg)`;
    clock.append(D);
    return D.firstElementChild;
  });
};

const dots = genDots(60);
genDots(12);

const lastDot = dots[dots.length - 1];

dots.forEach((dot, idx) => dot.style.animationDelay = idx + "s");
lastDot.style.animationDuration = "1s";

lastDot.addEventListener("animationend", (e) => {
  dots.forEach(dot => dot.classList.remove("appear"));
  setTimeout(() => {
    dots.forEach(dot => dot.classList.add("appear"));
  }, 0);
});

dots.forEach(dot => dot.classList.add("appear"));

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --width: 30vw;
  font: 2vmax/1 Consolas;
}

html,
body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: #000;
}

.clock {
  position: relative;
  display: block;
  width: var(--width);
  aspect-ratio: 1/1;
  border-radius: 50%;
  transform: rotate(180deg);
}

.spoke {
  position: absolute;
  top: 50%;
  left: calc(50% - 0.125rem);
  display: flex;
  align-items: flex-end;
  width: 0.25rem;
  height: var(--height);
  text-align: right;
  transform-origin: center 0;
}

.dot {
  width: 0.25rem;
  aspect-ratio: 1/1;
  border-radius: 50%;
}

.q60 {
  --height: calc(var(--width) / 2);
}

.q60 .dot {
  background-color: #000;
}

.q12 {
  z-index: 1;
  --height: calc(var(--width) / 2 - 0.5rem);
}

.q12 .dot {
  background-color: #FFF;
}

.appear {
  animation: appear 0.4s forwards;
}

@keyframes appear {
  0% {
    background-color: #000;
  }

  100% {
    background-color: #FFF;
  }
}

<time class="clock"></time>

Example B - 12 Hour Analog Timer

Example B relies heavily on classes but its timing is based on setTimeout(). Accuracy is dependant upon this part:

tick = new Date().getTime() + 1000;
const manager = () => {
  tick += 1000;
  schedule = setTimeout(manager, tick - new Date().getTime());
  callback();
};
schedule = setTimeout(manager, tick - new Date().getTime());

The last expression is were setTimeout() is adjusted for accuracy. For more details, see this article.

The blinking red dot represents the total minutes elapsed and the blinking blue dot represents the total hours elapsed.

Example B

const clock = document.querySelector(".clock");
let S = 0;

const dot = (qty) => {
  const o = document.createElement("object");
  const m = document.createElement("mark");
  o.className = `spoke q${qty}`;
  m.className = "dot";
  o.append(m);
  return o;
};
const genDots = (qty) => {
  return [...Array(qty)].map((_, i) => {
    const deg = 360 / qty;
    const D = dot(qty);
    D.style.transform = `rotate(${deg * i}deg)`;
    clock.append(D);
    return D.firstElementChild;
  });
};

const dots = genDots(60);
const hDots = genDots(12);

const timer = (callback, delay = 1000) => {
  let tick, schedule;
  tick = new Date().getTime() + delay;
  const manager = () => {
    tick += delay;
    schedule = setTimeout(manager, tick - new Date().getTime());
    callback();
  };
  schedule = setTimeout(manager, tick - new Date().getTime());
};

const start = () => {
  let hrs, min, sec;
  timer(() => {
    S++;
    hrs = Math.floor(S / 3600);
    min = Math.floor(S / 60);
    sec = S % 60;
    hrs = hrs > 11 ? 0 : hrs;
    min = min > 59 ? 0 : min;
    sec = sec > 59 ? 0 : sec;
    clock.datetime = S;
    dots.forEach((dot, idx) => {
      if (sec === 0) {
        dots.forEach(dot => dot.classList.remove("appear"));
      }
      if (idx <= sec) {
        dot.classList.add("appear");
      }
      if (dot.matches(".min")) {
        dot.classList.remove("appear");
      }
    });
    dots.forEach(dot => dot.classList.remove("min"));
    dots[min].classList.add("min");
    hDots.forEach(dot => dot.classList.remove("hrs"));
    hDots[hrs].classList.add("hrs");
  });
};

start();

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --width: 35vw;
  font: 2vmax/1 Consolas;
}

html,
body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: #000;
}

.clock {
  position: relative;
  display: block;
  width: var(--width);
  aspect-ratio: 1/1;
  border-radius: 50%;
  transform: rotate(180deg);
}

.spoke {
  position: absolute;
  top: 50%;
  left: calc(50% - 0.25rem);
  display: flex;
  align-items: flex-end;
  width: 0.5rem;
  height: var(--height);
  text-align: right;
  transform-origin: center 0;
}

.dot {
  width: 0.5rem;
  aspect-ratio: 1/1;
  border-radius: 50%;
}

.q60 {
  --height: calc(var(--width) / 2);
}

.q60 .dot {
  background-color: #000;
}

.q12 {
  z-index: 1;
  --height: calc(var(--width) / 2 - 1rem);
}

.q12 .dot {
  background-color: #FFF;
}

.appear {
  animation: appear 0.4s forwards;
}

@keyframes appear {
  0% {
    background-color: #000;
  }

  100% {
    background-color: #FFF;
  }
}

.min {
  animation: blink 2s infinite, red 0.5s infinite;
}

.hrs {
  animation: blink 2s infinite, blue 0.5s infinite;
}

@keyframes blink {

  0%,
  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes red {
  0% {
    background-color: #FC0000;
  }

  100% {
    background-color: #E30F84;
  }
}

@keyframes blue {
  0% {
    background-color: #00FFCC;
  }

  100% {
    background-color: #0000FF;
  }
}

<time class="clock"></time>

Example C - Analog Clock

Example C is identical to Example B with the following exception:

timer(() => {
  S++;
  hrs = new Date().getHours();
  min = new Date().getMinutes();
  sec = new Date().getSeconds();
  hrs = hrs > 11 ? hrs - 12 : hrs;
  ...

Example C

const clock = document.querySelector(".clock");
let S = new Date().getTime();

const dot = (qty) => {
  const o = document.createElement("object");
  const m = document.createElement("mark");
  o.className = `spoke q${qty}`;
  m.className = "dot";
  o.append(m);
  return o;
};
const genDots = (qty) => {
  return [...Array(qty)].map((_, i) => {
    const deg = 360 / qty;
    const D = dot(qty);
    D.style.transform = `rotate(${deg * i}deg)`;
    clock.append(D);
    return D.firstElementChild;
  });
};

const dots = genDots(60);
const hDots = genDots(12);

const timer = (callback, delay = 1000) => {
  let tick, schedule;
  tick = new Date().getTime() + delay;
  const manager = () => {
    tick += delay;
    schedule = setTimeout(manager, tick - new Date().getTime());
    callback();
  };
  schedule = setTimeout(manager, tick - new Date().getTime());
};

const start = () => {
  let hrs, min, sec;
  timer(() => {
    S++;
    hrs = new Date().getHours();
    min = new Date().getMinutes();
    sec = new Date().getSeconds();
    hrs = hrs > 11 ? hrs - 12 : hrs;
    clock.datetime = S;
    dots.forEach((dot, idx) => {
      if (sec === 0) {
        dots.forEach(dot => dot.classList.remove("appear"));
      }
      if (idx <= sec) {
        dot.classList.add("appear");
      }
      if (dot.matches(".min")) {
        dot.classList.remove("appear");
      }
    });
    dots.forEach(dot => dot.classList.remove("min"));
    dots[min].classList.add("min");
    hDots.forEach(hDot => hDot.classList.remove("hrs"));
    hDots[hrs].classList.add("hrs");
  });
};

start();

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --width: 35vw;
  font: 2vmax/1 Consolas;
}

html,
body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: #000;
}

.clock {
  position: relative;
  display: block;
  width: var(--width);
  aspect-ratio: 1/1;
  border-radius: 50%;
  transform: rotate(180deg);
}

.spoke {
  position: absolute;
  top: 50%;
  left: calc(50% - 0.25rem);
  display: flex;
  align-items: flex-end;
  width: 0.5rem;
  height: var(--height);
  text-align: right;
  transform-origin: center 0;
}

.dot {
  width: 0.5rem;
  aspect-ratio: 1/1;
  border-radius: 50%;
}

.q60 {
  --height: calc(var(--width) / 2);
}

.q60 .dot {
  background-color: #000;
}

.q12 {
  z-index: 1;
  --height: calc(var(--width) / 2 - 1rem);
}

.q12 .dot {
  background-color: #FFF;
}

.appear {
  animation: appear 0.4s forwards;
}

@keyframes appear {
  0% {
    background-color: #000;
  }

  100% {
    background-color: #FFF;
  }
}

.min {
  animation: blink 2s infinite, red 0.5s infinite;
}

.hrs {
  animation: blink 2s infinite, blue 0.5s infinite;
}

@keyframes blink {

  0%,
  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes red {
  0% {
    background-color: #FC0000;
  }

  100% {
    background-color: #E30F84;
  }
}

@keyframes blue {
  0% {
    background-color: #00FFCC;
  }

  100% {
    background-color: #0000FF;
  }
}

<time class="clock"></time>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Why isn't my time value updated in my interval function? - Stack Overflow