jsを使ってシンプルなディスククロックを実現する

<スタイル>
        .ディスク{
            位置: 相対的;
            マージン: 200px 自動;
            幅: 300ピクセル;
            高さ: 300px;
            境界線: 1px実線 #000;
            境界線の半径: 50%;
        }
        
        .軸{
            位置: 絶対;
            上: 150px;
            左: 150px;
            変換: translate(-50%, -50%);
            幅: 10px;
            高さ: 10px;
            境界線の半径: 50%;
            背景色: #000;
        }
        
        .hourHand {
            位置: 絶対;
            上: 150px;
            左: 147px;
            幅: 6px;
            高さ: 80px;
            背景色: #000;
            変換の原点: 3px 0;
        }
        
        .分ハンド{
            位置: 絶対;
            上: 150px;
            左: 148ピクセル;
            幅: 4px;
            高さ: 110px;
            背景色: #000;
            変換の原点: 2px 0;
        }
        
        。中古 {
            位置: 絶対;
            上: 150px;
            左: 149px;
            幅: 2px;
            高さ: 130px;
            背景色: #000;
            変換の原点: 1px 0;
        }
        
        .スケール{
            位置: 絶対;
            上: 0;
            左: 150px;
            変換の原点: 2.5px 150px;
            幅: 2px;
            高さ: 5px;
            背景色: #000;
        }
        
        .nu​​m {
            位置: 絶対;
            上: 15px;
            左: 150px;
            幅: 20px;
            高さ: 20px;
            色: 16px;
            テキスト配置: 中央;
            行の高さ: 20px;
            変換の原点: 50% 135px;
        }
        
        .nu​​m スパン {
            表示: ブロック;
            変換の原点: 50% 50%;
        }
</スタイル>

<div class="disc">
        <div class="axis"></div>
        <div class="hourHand"></div>
        <div class="minuteHand"></div>
        <div class="secondHand"></div>

</div>

// 要素を取得します var disc = document.getElementsByClassName('disc')[0];
        var hourHand = document.getElementsByClassName('hourHand')[0];
        var minuteHand = document.getElementsByClassName('minuteHand')[0];
        var secondHand = document.getElementsByClassName('secondHand')[0];
        var scale = document.getElementsByClassName('scale');

        // スケールを生成する for (var i = 0; i < 60; i++) {
            var scale = document.createElement('div');
            scale.classList に 'scale' を追加します。
            scale.style.transform = `translate(-50%) 回転(${i*6}deg)`;
            disc.appendChild(スケール);
            scale.style.transform = `translate(-50%) 回転(${i*6}deg)`;
            (i % 5 === 0)の場合{
                scale.style.width = 4 + 'px';
                scale.style.height = 12 + 'px';
            }
        }

        // 数値を生成する for (var i = 0; i < 12; i++) {
            var num = document.createElement('div');
            var numx = document.createElement('span');
            num.classList.add('num');
            num.style.transform = `translate(-50%)rotate(${i*30+30}deg)`;
            numx.style.transform = `rotate(${-i*30-30}deg)`;
            numx.innerHTML = i + 1;
            disc.appendChild(数値);
            num.appendChild(numx);
        }


        // ブラウザが開かれるとすぐに一時停止せずに表示します var h = getTime().hours;
        h = h > 12 ? h - 12 : h;
        hourHand.style.transform = `rotate(${h*30-180+(getTime().minute*0.5)}deg)`;
        minuteHand.style.transform = `rotate(${getTime().minute*6-180}deg)`;
        secondHand.style.transform = `rotate(${getTime().second*6-180}deg)`;

        // タイマー、1秒ごとに実行 setInterval(function() {
            var h = getTime().hours;
            h = h > 12 ? h - 12 : h;
            hourHand.style.transform = `rotate(${h*30-180+(getTime().minute*0.5)}deg)`;
            minuteHand.style.transform = `rotate(${getTime().minute*6-180}deg)`;
            secondHand.style.transform = `rotate(${getTime().second*6-180}deg)`;
        }, 1000)


        // 関数: 時間を取得する function getTime() {
            var date = 新しい Date();
            var 年 = date.getFullYear();
            var 月 = date.getMonth();
            月 = 月 < 10 ? '0' + 月 : 月;
            日付を取得する
            日 = 日 < 10 ? '0' + 日 : 日;
            var week = date.getDay();
            var weeks = ['日', '月', '火', '水', '木', '金', '土'];
            var weekZn = weeks[週];
            var hou = date.getHours();
            hou = hou < 10 ? '0' + hou : hou;
            var min = date.getMinutes();
            min = min < 10 ? '0' + min : min;
            var sec = date.getSeconds();
            秒 = 秒 < 10 ? '0' + 秒 : 秒;
            戻る {
                年: 年、
                月: 月、
                日: 日、
                週: weekZn、
                時間: hou、
                分: 分、
                秒: 秒
            }
        }