js zur Realisierung einer einfachen Scheibenuhr

<Stil>
        .Scheibe {
            Position: relativ;
            Rand: 200px automatisch;
            Breite: 300px;
            Höhe: 300px;
            Rand: 1px durchgezogen #000;
            Randradius: 50 %;
        }
        
        .Achse {
            Position: absolut;
            oben: 150px;
            links: 150px;
            transformieren: übersetzen(-50 %, -50 %);
            Breite: 10px;
            Höhe: 10px;
            Randradius: 50 %;
            Hintergrundfarbe: #000;
        }
        
        .Stundenzeiger {
            Position: absolut;
            oben: 150px;
            links: 147px;
            Breite: 6px;
            Höhe: 80px;
            Hintergrundfarbe: #000;
            Transform-Ursprung: 3px 0;
        }
        
        .minuteHand {
            Position: absolut;
            oben: 150px;
            links: 148px;
            Breite: 4px;
            Höhe: 110px;
            Hintergrundfarbe: #000;
            Transform-Ursprung: 2px 0;
        }
        
        .aus zweiter Hand {
            Position: absolut;
            oben: 150px;
            links: 149px;
            Breite: 2px;
            Höhe: 130px;
            Hintergrundfarbe: #000;
            Transform-Ursprung: 1px 0;
        }
        
        .Skala {
            Position: absolut;
            oben: 0;
            links: 150px;
            Transform-Ursprung: 2,5px 150px;
            Breite: 2px;
            Höhe: 5px;
            Hintergrundfarbe: #000;
        }
        
        .Nummer {
            Position: absolut;
            oben: 15px;
            links: 150px;
            Breite: 20px;
            Höhe: 20px;
            Farbe: 16px;
            Textausrichtung: zentriert;
            Zeilenhöhe: 20px;
            Transform-Ursprung: 50 % 135 Pixel;
        }
        
        .num Spanne {
            Anzeige: Block;
            Transform-Ursprung: 50 % 50 %;
        }
</Stil>

<div Klasse="Scheibe">
        <div Klasse="Achse"></div>
        <div Klasse="Stundenzeiger"></div>
        <div Klasse = "Minutenzeiger"></div>
        <div Klasse="SecondHand"></div>

</div>

//Element abrufen var disc = document.getElementsByClassName('disc')[0];
        var StundeZeiger = document.getElementsByClassName('StundeZeiger')[0];
        var minuteHand = document.getElementsByClassName('minuteHand')[0];
        var zweite Hand = document.getElementsByClassName('zweite Hand')[0];
        var Maßstab = document.getElementsByClassName('Maßstab');

        // Maßstab generieren für (var i = 0; i < 60; i++) {
            var Skala = Dokument.createElement('div');
            scale.classList.add('Skala');
            scale.style.transform = `verschieben(-50%) drehen(${i*6}deg)`;
            disc.appendChild(Waage);
            scale.style.transform = `verschieben(-50%) drehen(${i*6}deg)`;
            wenn (i % 5 === 0) {
                Maßstab.Stil.Breite = 4 + 'px';
                Maßstab.Stil.Höhe = 12 + 'px';
            }
        }

        // Zahlen generieren für (var i = 0; i < 12; i++) {
            var num = document.createElement('div');
            var numx = document.createElement('span');
            num.classList.add('num');
            num.style.transform = `verschieben(-50%)drehen(${i*30+30}deg)`;
            numx.style.transform = `drehen(${-i*30-30}deg)`;
            numx.innerHTML = i + 1;
            disc.appendChild(num);
            num.appendChild(numx);
        }


        // Anzeige, sobald der Browser geöffnet wird, ohne Pause var h = getTime().hours;
        h = h > 12? h - 12 : h;
        hourHand.style.transform = `drehen(${h*30-180+(getTime().minute*0.5)}Grad)`;
        minuteHand.style.transform = `rotieren(${getTime().minute*6-180}Grad)`;
        secondHand.style.transform = `drehen(${getTime().second*6-180}deg)`;

        // Timer, wird jede Sekunde ausgeführt setInterval(function() {
            var h = getTime().Stunden;
            h = h > 12? h - 12 : h;
            hourHand.style.transform = `drehen(${h*30-180+(getTime().minute*0.5)}Grad)`;
            minuteHand.style.transform = `rotieren(${getTime().minute*6-180}Grad)`;
            secondHand.style.transform = `drehen(${getTime().second*6-180}deg)`;
        }, 1000)


        // Funktion: Uhrzeit ermitteln function getTime() {
            var date = neues Datum();
            var Jahr = Datum.getFullYear();
            var Monat = Datum.getMonth();
            Monat = Monat < 10? '0' + Monat : Monat;
            var Tag = Datum.getDate();
            Tag = Tag < 10? '0' + Tag : Tag;
            var Woche = Datum.getDay();
            var Wochen = ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'];
            var WocheZn = Wochen[Woche];
            var hou = date.getHours();
            hou = hou < 10 ? '0' + hou : hou;
            var min = date.getMinutes();
            min = min < 10? '0' + min: min;
            var sec = date.getSeconds();
            Sek. = Sek. < 10 ? '0' + Sek. : Sek.;
            zurückkehren {
                Jahr: Jahr,
                Monat: Monat,
                Tag: Tag,
                Woche: WocheZn,
                Stunden: Std.,
                Minute: min,
                Sekunde: Sek
            }
        }