<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>