[코드공유] 아날로그 시계 만들기

[코드 공유] 아날로그시계 만들기

아날로그시계에 대한 자료가 많이 없어 코드를 공유하고자 한다.

대부분 디지털 시계만 구현하던데.... 아날로그시계를 직접 만들어 보려 한다.

첨부파일을 올릴 테니 코드가 필요하면 다운로드 하면 된다.

제이쿼리 없이 코딩 한것이다.

도움이 되었다면 공감 혹은 덧글 부탁드려요

첨부 파일

clock.zip

0.01MB

참고 자료

↓↓↓↓

코드 리뷰

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>아날로그 시계</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <div class="clock">
        <div class="hour">
            <div id="hr" class="hr"></div>
        </div>
        <div class="min">
            <div id="mn" class="mn"></div>
        </div>
        <div class="sec">
            <div id="sc" class="sc"></div>
        </div>
    </div>
    <script src="./js/clock.js"></script>
</body>
</html>

HTML 문서 셋팅

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

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

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

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

.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; 
    justify-content: center; 
    border-radius: 50%;
}

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

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

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

관전 포인트

*로 초기화 및 초기 설정, before 선택자를 통한 시곗바늘 구현, .clock에 박스 쉐도우를 줘서 입체감을 살림

const deg = 6;
const hr = document.querySelector('#hr');
const mn = document.querySelector('#mn');
const sc = document.querySelector('#sc');

setInterval (()=> {
    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)`;
})