웹사이트 실시간 시간 위젯 만들기 HTML 스크립트

웹사이트 시간표시 위젯 소스

쇼핑몰 또는 기타 웹사이트, 블로그 등에 많이 사용하는 시간 위젯 스크립트입니다. 블로그의 경우 사이드바 위젯이 고정되어 있는 곳에서 많이 사용합니다. 간단하게 자바스크립트를 통해 원하는 스타일로 만드는 방법을 알려드리도록 하겠습니다.

Date 객체

현재시간과 날짜를 구하려면 자바스크립트 Date 객체를 이용하면 됩니다. Date 객체의 시간값은 UTC기준으로 가져옵니다. 아래코드 참고.

<!-- 자바스크립트의 Date 객체 사용 -->
const date = new Date();  // 현재날짜와 시간
console.log(date); // output : Tue Feb 22 2022 23:20:01 GMT+0900 (한국 표준시)

new Date()를 호출하면 새로운 Date 객체를 만들 수 있습니다. 날짜와 시간의 표시방법을 각자의 취향대로 Date 객체의 메서드를 활용하시면 됩니다.

Html 사용법

만든 위젯을 사용하기 위해 원하는 위치에 Html 코드를 붙여 넣습니다. 아래코드 형식으로 붙여 넣으시면 됩니다.

<h1 class="clock"></h1>
<h2 class="today"></h2>

JS 사용법

Html 코드가 적용되기 위한 자바스크립트를 준비합니다. 아래 코드는 제가 원하는 스타일로 만든 스크립트입니다. 그대로 사용하셔도 되고, 원하는 스타일로 변경하셔서 사용하시면 됩니다.

const clock = document.querySelector(".clock");
const today = document.querySelector(".today");

function getClock() {
    const date = new Date();
    const hours = String(date.getHours()).padStart(2, "0");
    const minutes = String(date.getMinutes()).padStart(2, "0");
    const seconds = String(date.getSeconds()).padStart(2, "0");

    clock.innerText = `${hours}:${minutes}:${seconds} `;
}

getClock();
setInterval(getClock, 1000);

function getToday() {
    const todaydate = new Date();
    const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
    const days_num = todaydate.getDay();

    const month = months[todaydate.getMonth()];
    const date = todaydate.getDate();
    const year = todaydate.getFullYear();
    const day = days[days_num];

    today.innerText = `${month} . ${date} . ${year} ${day}`;
}

getToday();

코드 적용 예시

위 코드로 만든 Html, JS 코드 적용화면입니다. 마음에 드시면 그대로 사용하시고, 각자의 스타일로 변경하셔서 사용해 보세요.

See the Pen Untitled by MOAZUM (@MOAZUM) on CodePen.