Javascript/CSS로 시계 만들기

[HTML]

<template>
    <div class="clock">
        <div class="hour">
            <div class="hr" id="hr"></div>
        </div>
        <div class="min">
            <div class="mn" id="mn"></div>
        </div>
        <div class="sec">
            <div class="sc" id="sc"></div>
        </div>
    </div>
</template>

[CSS]

CSS에 clock.png를 기준으로 위치를 지정.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #091921;
}

.clock {
  width: 350px;
  height: 350px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url('./assets/clock.png');
  background-size: cover;
  border: 4px solid #091921;
  border-radius: 50%;
  box-shadow: 0 -15px 15px rgba(255, 255, 255, 0.05),
  inset 0 -15px 15px rgba(255, 255, 255, 0.05),
  0 15px 15px rgba(0, 0, 0, 0.3),
  inset 0 15px 15px rgba(0, 0, 0, 0.3);
}

.clock:before{
  content: '';
  position: absolute;
  width: 15px;
  height: 15px;
  background: #fff;
  border-radius: 50%;
  z-index: 5;
}

.clock .hour,
.clock .min,
.clock .sec{
  position: absolute;
}
.clock .hour, .hr{
  width: 160px;
  height: 160px;
}
.clock .min, .mn{
  width: 190px;
  height: 190px;
}
.clock .sec, .sc{
  width: 230px;
  height: 230px;
}
.hr, .mn, .sc{
  display: flex;
  position: absolute;
  justify-content: center;
  border-radius: 50%;
}

.hr:before{
  content: '';
  position: absolute;
  width: 8px;
  height: 80px;
  background: #ff105e;
  z-index: 1;
  border-radius: 6px 6px 0 0;
}

.mn:before{
  content: '';
  position: absolute;
  width: 4px;
  height: 90px;
  background: #fff;
  z-index: 2;
  border-radius: 6px 6px 0 0;
}

.sc:before{
  content: '';
  position: absolute;
  width: 2px;
  height: 150px;
  background: #fff;
  z-index: 3;
  border-radius: 6px 6px 0 0;
}

[Javascript - ES6]

<script>
    export default {
        name: "mainVue",
        mounted() {
            const deg = 6;
            const hr = document.querySelector('#hr');
            const mn = document.querySelector('#mn');
            const sc = document.querySelector('#sc');
            setClock();
            setInterval(() => {
                setClock();
            }, 1000);

            function setClock(){
                let day = new Date();
                let hh = day.getHours() * 30;
                let mm = day.getMinutes() * deg;
                let ss = day.getSeconds() * deg;

                hr.style.transform = `rotateZ(${(hh)+(mm/12)}deg)`;
                mn.style.transform = `rotateZ(${mm}deg)`;
                sc.style.transform = `rotateZ(${ss}deg)`;
            }
        }
    }
</script>

[Assets]

clock.png

[Working]

 

 

출처 : https://www.youtube.com/watch?v=8b2mTq0Xrtw