실시간 날짜 요일 시간 스크립트

실시간 현재 날짜 보여주기

실시간 시각 보여주기

오늘이 몇 요일인지 보여주기

<div id="clock">

    <div1></div1><div2></div2>

</div>

<script>

const clock = document.getElementById("clock"),

clockDate = clock.querySelector("div1"),

clockTime = clock.querySelector("div2")

const color = ["#D60000", "#FF6347", "#FFD700", "#32CD32", "#191970", "#8B008B"];

const whatDay = ["일요일", "월요일", "화요일", "수요일", "목요일", "금요일", "토요일"];

function time(){

    const data = new Date(); // 현재 시간

    const utcNow = data.getTime() + (data.getTimezoneOffset() * 60 * 1000); // 현재 시간을 utc로 변환한 밀리세컨드값

    const koreaTimeDiff = 9 * 60 * 60 * 1000; // 한국 시간은 UTC보다 9시간 빠름(9시간의 밀리세컨드 표현)

    const koreaNow = new Date(utcNow + koreaTimeDiff); // utc로 변환된 값을 한국 시간으로 변환시키기 위해 9시간(밀리세컨드)를 더함

    let amPm = 'AM'; 

    let year = koreaNow.getFullYear();

    let month = koreaNow.getMonth()+1;

    let currentDate = koreaNow.getDate();

    let day = koreaNow.getDay();

    let hours = koreaNow.getHours(); 

    let minutes = addZero(koreaNow.getMinutes());

    let seconds =  addZero(koreaNow.getSeconds());

    if(hours >= 12){ 

        amPm = 'PM';

        hours = hours - 12;

    }

    clockTime.innerHTML = `<span>${hours}</span>:${minutes}:${seconds} ${amPm}`;

    if(hours < 7){

        for(let i=0; i<6; i++){

            if(hours-1 == i){

                clockTime.querySelectorAll("span")[0].style.color = color[i];

            }

        }

    } else if(hours>=7 && hours<=12){

        for(let i=0; i<6; i++){

            if(hours-7 == i){

                clockTime.querySelectorAll("span")[0].style.color = color[i];

            }

        }

    } else if(hours>=13 && hours<=18){

        for(let i=0; i<6; i++){

            if(hours-13 == i){

                clockTime.querySelectorAll("span")[0].style.color = color[i];

            }

        }

    } else if(hours>=19 && hours<=24){

        for(let i=0; i<6; i++){

            if(hours-19 == i){

                clockTime.querySelectorAll("span")[0].style.color = color[i];

            }

        }

    }

    for(let j=0; j<7; j++){

        if(day == j){

            day = whatDay[j]

        }

    }

    clockDate.innerHTML = `${year}년 ${month}월 ${currentDate}일 ${day}`

}

function addZero(num) { 

  let zero = ''; 

  if (String(num).length < 2) {

      zero += '0';

  }

  return `${zero}${String(num)}`;

}

function init(){

    time();

    setInterval(time, 1000);

}

init()

</script>

미리보기

출처 : 그누 "오땡스"

https://sir.kr/g5_tip/20158 

아재감성 아재공간 다온네