数字时钟and模拟时钟结合体

代码如下，部分自己注释就不丢人了，JS用ai.

<div class="clock">
        <div class="number">
            <div class="circle" id="sec" style="--clr:#04fc43;"><i></i></div>
            <div class="circle" id="min" style="--clr:#fee800;"><i></i></div>
            <div class="circle" id="hrs" style="--clr:#ff2972;"><i></i></div>
            <span style="--i:12;"><b>12</b></span> 
            <span style="--i:1;"><b>1</b></span>
            <span style="--i:2;"><b>2</b></span>
            <span style="--i:3;"><b>3</b></span>
            <span style="--i:4;"><b>4</b></span>
            <span style="--i:5;"><b>5</b></span>
            <span style="--i:6;"><b>6</b></span>
            <span style="--i:7;"><b>7</b></span>
            <span style="--i:8;"><b>8</b></span> 
            <span style="--i:9;"><b>9</b></span>
            <span style="--i:10;"><b>10</b></span>
            <span style="--i:11;"><b>11</b></span>   
        </div>
        <!-- Digital clock -->
        <div id="time">
            <div id="hour" style="--clr:#ff2972;">00</div>
            <div id="minutes" style="--clr:#fee800;">00</div>
            <div id="seconds" style="--clr:#04fc43;">00</div>
            <div id="ampm" style="--clr:#fff;">AM</div>
        </div>
    </div>

    <button id="myButton" class="button">
        <div class="outline"></div>
        <div class="state state--default">
          <div class="icon">
            <svg
              width="1em"
              height="1em"
              viewBox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <g style="filter: url(#shadow)">
                <path
                  d="M14.2199 21.63C13.0399 21.63 11.3699 20.8 10.0499 16.83L9.32988 14.67L7.16988 13.95C3.20988 12.63 2.37988 10.96 2.37988 9.78001C2.37988 8.61001 3.20988 6.93001 7.16988 5.60001L15.6599 2.77001C17.7799 2.06001 19.5499 2.27001 20.6399 3.35001C21.7299 4.43001 21.9399 6.21001 21.2299