[javascipt30]아날로그 시계 만들기

내가 만든 시계

javascript30 2일차 강의

순서대로 첫 번째부터 하려했지만 오디오 파일이 안나와서 두 번째부터 시작

 

//html

<div class="wrap">
    <div class="clock">
        <div class="clock_face">
            <span></span>
            <div class="hand hours"></div>
            <div class="hand minutes"></div>
            <div class="hand seconds"></div>
        </div>
        <div class="clock_num">
            <span>12</span>
            <span>3</span>
            <span>6</span>
            <span>9</span>
        </div>
    </div>
    <div class="digital"></div>
</div>

//css

<style>
    body {margin: 0;}
    .wrap {min-height: 100vh; display: flex; align-items: center; justify-content: center; flex-direction: column; background: #1D1D25;}
    .clock {position: relative; width: 350px; height: 350px; padding: 20px; border-radius: 50%; border: 20px solid #191720; box-shadow: 5px 5px 30px 2px #414141;}
    .clock::after {display: block; content: ""; clear: both; width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; box-shadow: inset -3px -3px 30px 2px #2c2c2c;}
    .clock::before {display: block; content: ""; clear: both; width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; box-shadow: inset 3px 3px 20px 2px #111111;} 
    .clock_face {position: relative; width: 100%; height: 100%; border-radius: 50%; }
    .clock_face span {position: absolute; width: 15px; height: 15px; background:#333; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; background-color:#ccc; border: 4px solid #151515;}
    .hand {border-radius: 3px; position: absolute; width: 50%; height: 6px; background-color: #333; transform: rotate(90deg); transform-origin: 100%; top: 50%; z-index: 5; transition: all 0.05s ease-in-out;}
    .hand.seconds { height: 4px; background-color: #ff5650;}
    .hand.hours {width: 40%; left: 10%; background-color:#ccc;}
    .hand.minutes {background-color:#ccc;}

    .clock_num {position: absolute; width: 360px; height: 360px; left:50%; top: 50%; transform: translate(-50%, -50%);}
    .clock_num span {position: absolute; color: #ccc;font-size: 35px;}
    .clock_num span:nth-child(1) { left: 50%; transform: translateX(-50%); }
    .clock_num span:nth-child(2) {right: 0; top: 50%; transform: translateY(-50%);}
    .clock_num span:nth-child(3) {bottom: 0; left: 50%; transform: translateX(-50%);;}
    .clock_num span:nth-child(4) {left: 0;top: 50%; transform: translateY(-50%);}

    .digital {margin-top: 60px; font-weight: 800; font-size: 60px; font-family: 'Orbitron', sans-serif; color: #ccc; letter-spacing: 5px; text-shadow: 0 0 10px #f8938f, 0 0 20px #f8938f, 0 0 30px #f8938f}
</style>

.hand 시계바늘에 있는 transition을 삭제했다ㅜㅠ

원래 무소음 시계로 만드려고 움직임을 부드럽게 했다가 강력새로고침 할 때마다 0도에서 돌아오는 것 때문에 포기.

그냥 초침 효과만 주려고 transition을 넣었는데

0초가 되면 바늘 위치가 이상해지는 오류가 난다. 그래서 일단 삭제..

나중의 내가 고쳐보기로 

 

 

//js

 const hoursHand = document.querySelector('.hours');
    const minutesHand = document.querySelector('.minutes');
    const secondsHand = document.querySelector('.seconds');

    function clock() {
        const now = new Date(); //현재 날짜, 시간 구하기

        const seconds = now.getSeconds();
        const secondsDegrees = seconds * 6 + 90;
        secondsHand.style.transform  = `rotate(${secondsDegrees}deg)`;

        const minutes = now.getMinutes();
        const minutesDegrees = minutes * 6 + 90;
        minutesHand.style.transform  = `rotate(${minutesDegrees}deg)`;

        const hours = now.getHours();
        const hoursDegrees = hours * 30 + 90;
        hoursHand.style.transform  = `rotate(${hoursDegrees}deg)`;

        //digital
        const digitalClock = document.querySelector('.digital');
        const digitalHours = String(hours).padStart(2,'0');
        const digitalMinutes = String(minutes).padStart(2,'0');
        const digitalSeconds = String(seconds).padStart(2,'0');

        digitalClock.innerText = `${digitalHours}:${digitalMinutes}:${digitalSeconds}`

    }
    clock();

    setInterval(clock, 1000)

각도 계산이 어려웠다... 시간 곱하기...360...60... 6...

seconds * 6 + 90

여기서 원래대로라면 ex) 5초 * (360/60) =  30으로 초침이 5분을 가리켜야 하는데 자꾸 이상한 시간이 나와서 알아봤더니 +90을 해야 제 시간으로 나온다. 

누워있던 시계바늘을 transform: rotate(90deg); 를 해서 세워줬기때문에 이거만큼 +90을 더해야 제 시간으로 표시되는 것 같다.