시계 만들기(HTML, CSS, JAVASCRIPT)

body

{

    display: flex;

    justify-content: center;

    align-items: center;

    margin : 300px auto;

    background-color: rgba(0, 0, 0, 0.863);

}

.clk

{

    width: 280px;

    height: 280px;

    display: flex;

    justify-content: center;

    align-items: center;

    background-size: cover;

    background-color: rgba(255, 255, 255, 0.554);

    border: 4px solid #0a181f;

    border-radius: 50%;

    box-shadow: 0 -15px 15px rgb(255, 255, 255),

                inset 0 -15px 15px 15px rgb(255, 255, 255),

                0 15px 15px rgba(0, 0, 0, 0.3),

                inset 0 15px 15px rgba(0, 0, 0, 0.3);

}

.clk::before{

    content: '';

    position: absolute;

    width: 20px;

    height: 20px;

    background-color: black;

    border-radius: 50%;

    z-index: 10000;

}

.clk .hour, .clk .min, .clk .sec {

    position: absolute;

}

.clk .hour, .hour_1 {

    width: 150px;

    height: 150px;

}

.clk .min, .min_1 {

    width: 180px;

    height: 180px;

}

.clk .sec, .sec_1 {

    width:220px;

    height: 220px;

}

.hour_1, .min_1, .sec_1 {

    display: flex;

    justify-content: center;

    position: absolute;

    border-radius: 50%;

}

.hour_1:before {

    content: '';

    position: absolute;

    width: 8px;

    height: 80px;

    background-color: rgb(0, 0, 0);

    z-index: 12;

    border-radius: 10px 6px 0 0;

}

.min_1:before {

    content: '';

    position: absolute;

    width: 4px;

    height: 90px;

    background: rgb(46, 5, 5);

    z-index: 13;

    border-radius: 6px 6px 0 0;

}

.sec_1:before {

    content: '';

    position: absolute;

    width: 2px;

    height: 150px;

    background: rgb(22, 85, 3);

    z-index: 14;

    border-radius: 6px 6px 0 0;

}

    <div class="clk">

      <div class="hour">

        <div class="hour_1" id="hour_1"></div>

      </div>

      <div class="min">

        <div class="min_1" id="min_1"></div>

      </div>

      <div class="sec">

        <div class="sec_1" id="sec_1"></div>

      </div>

    </div>

      var deg = 6;

      var hour_1 = document.querySelector("#hour_1");

      var min_1 = document.querySelector("#min_1");

      var sec_1 = document.querySelector("#sec_1");

      setInterval(() => {

        var day = new Date();

        var hh = day.getHours() * 30;

        var mm = day.getMinutes() * deg;

        var ss = day.getSeconds() * deg;

        hour_1.style.transform = `rotateZ(${hh + mm / 12}deg)`;

        min_1.style.transform = `rotateZ(${mm}deg)`;

        sec_1.style.transform = `rotateZ(${ss}deg)`;

      }, 500);