테스트 사이트 - 개발 중인 베타 버전입니다

자바스크립 시계 [한국시간 고정]

· 2년 전 · 1318 · 8

초보인 주제에 이걸 해결할라고 너무 힘들었습니다.

공유하도록 하겠습니다.

[code]

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

[/code]

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 8개

2년 전
잘 되네요. 공유 감사합니다. ^^
2년 전
잘 동작합니다.
생뚱맞은 질문인데... 한수 배워야 겠습니다.
첨부한 이미지처럼 제 노트++ 에디터에서는
clockTime.innerHTML = `<span>${hours}</span>:${minutes}:${seconds} ${amPm}`;
아래단은 하일라이트가 잘못 표시되는군요.
혹시 해결책을 아실까 싶은..

[http://sir.kr/data/editor/2303/0b05ed89cf449dc9799257f601223ccd_1678498344_9136.png]
2년 전
@타버린나무
저도 노트뿔뿔 쓰는데 노트뿔뿔에서는 모던 js 의 벡틱(역따옴표) 이 하일라이팅을 인식하지 못합니다. 그래서 벡틱변수를 클래식변수로 바꿔야 하일라이팅 처리가 제대로 됩니다.

예를 들어서
clockTime.innerHTML = `<span>${hours}</span>:${minutes}:${seconds} ${amPm}`;
는 아래처럼
clockTime.innerHTML = "<span>" + hours + "</span>:" + minutes + ":" + seconds + amPm;

위 전체코드에는 벡틱이 두 군데 들어가 있네요.
하지만 결과물만 생각한다면 벡틱을 익히시길 권해 드려요.

참고사항입니다. https://sir.kr/g5_tip/18447
2년 전
@비타주리 감사합니다.
어제 검색해보니 깃허브에 ES6의 하일라이트 적용이된 자료가 있어보이긴 한데 까막눈이라 적용은 못하고 포기했네요.
2년 전
@비타주리 역시 선생님이시다. 잘 배웁니다.
한수 배우고 갑니다~ ^^ 꾸벅!
잘 되네요 감사합니다!
감사합니다.

게시글 목록

번호 제목
18200
18195
18193
18181
18179
18173
18170
18164
18158
18155
18152
18151
18150
18140
18139
18138
18131
18130
18120
18119
18118
18117
18116
18111
18110
18108
18107
18106
18100
18090