Почему мое значение не обновлено в моей функции интервала? ⇐ Html

[Anonymous]

Я делаю точечные часы в HTML/CSS/JS, где Divs с округлыми границами - это точки. Он отображает или скрывает точки в зависимости от количества секунд. Каждая вторая точка должна иметь применение класса «на», а класс «Выкл.». Когда количество секунд равно 0 (каждую целую минуту), все точки должны быть «выключены». Проблема в том, что часы показывают точное время, когда они загружаются, но не прогрессируют. Я что-то забуду?

Код: Выделить всё

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();< /code>
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 ; < b r   / > } <   / c o d e >   < b r   / >   < p r e   C l a s s   =   " S n i p p e t - C o d e - h t m l   l a n g - h t m l   p r e t t y p r i n t - o v e r r i d e " > < c o d e > & l t ; ! D O C T Y P E   h t m l & g t ; < b r   / > & l t ; h t m l & g t ; < b r   / > < b r   / > & l t ; h e a d & g t ; < b r   / >         & l t ; l i n k   r e l = " s t y l e s h e e t "   h r e f = " c l o c k . c s s " & g t ; < b r   / > & l t ; / h e a d & g t ; < b r   / > < b r   / > & l t ; b o d y & g t ; < b r   / >         & l t ; d i v   c l a s s = " b o x " & g t ; < b r   / >                 & l t ; d i v   c l a s s = " z e g a r " & g t ; < b r   / >                         & l t ; d i v   c l a s s = " k r o p k a   k r o p k a 0 a   o n " & g t ; & l t ; / d i v & g t ; < b r   / >                         & l t ; d i v   c l a s s = " k r o p k a   k r o p k a 0   o n "   i d = " k r o p k a 0 " & g t ; & l t ; / d i v & g t ; < b r   / >                         & l t ; d i v   c l a s s = " k r o p k a   k r o p k a 1   o n "   i d = " k r o p k a 1 " & g t ; & l t ; / d i v & g t ; < b r   / >                         & l t ; d i v   c l a s s = " k r o p k a   k r o p k a 2   o n "   i d = " k r o p k a 2 " & g t ; & l t ; / d i v & g t ; < b r   / >                         & l t ; d i v   c l a s s = " k r o p k a   k r o p k a 3   o n "   i d = " k r o p k a 3 " & g t ; & l t ; / d i v & g t ; < b r   / >                         & l t ; d i v   c l a s s = " k r o p k a   k r o p k a 4   o n "   i d = " k r o p k a 4 " & g t ; & l t ; / d i v & g t ; < b r   / > < b r   / >                         & l t ; d i v   c l a s s = " k r o p k a   k r o p k a 5 a   o n " & g t ; & l t ; / d i v & g t ; < b r   / >                         & l t ; d i v   c l a s s = " k r o p k a   k r o p k a 5   o n "   i d = " k r o p k a 5 " & g t ; & l t ; / d i v & g t ; < b r   / >                         & l t ; d i v   c l a s s = " k r o p k a   k r o p k a 6   o n "   i d = " k r o p k a 6 " & g t ; & l t ; / d i v & g t ; < b r   / >                         & l t ; d i v   c l a s s = " k r o p k a   k r o p k a 7   o n "   i d = " k r o p k a 7 " & g t ; & l t ; / d i v & g t ; < b r   / >                         & l t ; d i v   c l a s s = " k r o p k a   k r o p k a 8   o n "   i d = " k r o p k a 8 " & g t ; & l t ; / d i v & g t ; < b r   / >                         & l t ; d i v   c l a s s = " k r o p k a   k r o p k a 9   o n "   i d = " k r o p k a 9 " & g t ; & l t ; / d i v & g t ; < b r   / > < b r   / >                         & l t ; d i v   c l a s s = " k r o p k a   kropka10a on">

Подробнее здесь: https://stackoverflow.com/questions/795 ... l-function