⌛ HTML CSS Js SVG 시계 🕐

html, css, svg 이미지 및 javascript를 사용하여 매우 간단한 시계를 만드는 방법은 무엇입니까?

몇 가지 핵심 사항만 염두에 두면 그리 복잡하지 않습니다.
다음과 같은 방법으로 svg circle 이미지를 Html 페이지에 직접 배치해야 합니다.

<div class="clock-container flex">
  <svg class="svg-seconds" width="24px" height="24px" viewBox="0 0 24 24"  xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486  10-10S17.514 2 12 2z"/></svg>
  <svg class="svg-minutes" width="24px" height="24px" viewBox="0 0 24 24"  xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486  10-10S17.514 2 12 2z"/></svg>
  <svg class="svg-hours" width="24px" height="24px" viewBox="0 0 24 24"    xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486  10-10S17.514 2 12 2z"/></svg>
    
   <div class="time-box">
            <div class="time">00:00:00</div>
   </div>
</div>

이것이 실제로 필요한 모든 HTML 코드입니다.

Css 부분의 경우 시간 상자 div에 상대적인 위치를 지정해야 하므로 Svg 원을 그 안에 절대적으로 배치할 수 있습니다.

.time-box{
    position: relative;
...
}

/* SVGS  */
svg.svg-seconds{  
    position: absolute;
    width: 360px;
    height: 360px;
    fill: var(--second);
    stroke: var(--third);
    stroke-width: 0.5;
    stroke-dasharray: 63;
}

svg.svg-minutes{  
    position: absolute;
    width: 330px;
    height: 330px;
    fill: transparent;
    stroke: var(--fourth);
    stroke-width: 0.6;
    stroke-dasharray: 63;
}

svg.svg-hours{  
    position: absolute;
    width: 270px;
    height: 270px;
    fill: transparent;
    stroke: var(--seventh);
    stroke-width: 3;
    stroke-dasharray: 63;
}

대신 javascript 부분의 경우 Svg 원의 스트로크를 변경하고 시간 문자열을 반환하는 간단한 함수를 만들어야 합니다.

// TIME FN
function timeFn (){
    let time = new Date();
    let hours = addZero(time.getHours());
    let minutes = addZero(time.getMinutes());
    let seconds = time.getSeconds().toString().padStart(2,0);
    // 4 SVG OFFSET
    secCircle.style.strokeDashoffset = -(63 - (64 * seconds) / 60);
    minCircle.style.strokeDashoffset = -(63 - (64 * minutes) / 60);
    hoursCircle.style.strokeDashoffset = -(63 - (64 * hours) / 24)
    // FULL TIME
    let fullTime = `${hours}:${minutes}:${seconds}`;
    // console.log(fullTime)
    return fullTime;
}

0을 추가하려면 함수를 사용할 수 있습니다.

function addZero (timeValue) {
    return Number(timeValue) >= 10 ? timeValue : '0'+ timeValue;
};

또는 padStart() 메서드를 사용하십시오.

.toString().padStart(2,0);

이제 간격을 1초(기본값)로 설정하고 매번 time div의 내부 HTML을 변경하기만 하면 됩니다.

setInterval(()=> time.innerHTML = timeFn());

여기에서 코드를 찾을 수 있습니다github.

이것은 간단합니다video guide

👋