자바스크립 시계 [한국시간 고정]
초보인 주제에 이걸 해결할라고 너무 힘들었습니다.
공유하도록 하겠습니다.
[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개
생뚱맞은 질문인데... 한수 배워야 겠습니다.
첨부한 이미지처럼 제 노트++ 에디터에서는
clockTime.innerHTML = `<span>${hours}</span>:${minutes}:${seconds} ${amPm}`;
아래단은 하일라이트가 잘못 표시되는군요.
혹시 해결책을 아실까 싶은..
[http://sir.kr/data/editor/2303/0b05ed89cf449dc9799257f601223ccd_1678498344_9136.png]
저도 노트뿔뿔 쓰는데 노트뿔뿔에서는 모던 js 의 벡틱(역따옴표) 이 하일라이팅을 인식하지 못합니다. 그래서 벡틱변수를 클래식변수로 바꿔야 하일라이팅 처리가 제대로 됩니다.
예를 들어서
clockTime.innerHTML = `<span>${hours}</span>:${minutes}:${seconds} ${amPm}`;
는 아래처럼
clockTime.innerHTML = "<span>" + hours + "</span>:" + minutes + ":" + seconds + amPm;
위 전체코드에는 벡틱이 두 군데 들어가 있네요.
하지만 결과물만 생각한다면 벡틱을 익히시길 권해 드려요.
참고사항입니다. https://sir.kr/g5_tip/18447
어제 검색해보니 깃허브에 ES6의 하일라이트 적용이된 자료가 있어보이긴 한데 까막눈이라 적용은 못하고 포기했네요.
게시판 목록
개발자팁
질문은 QA에서 해주시기 바랍니다.
| 번호 | 분류 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|---|
| 5336 | 1년 전 | 962 | |||
| 5335 | 1년 전 | 980 | |||
| 5334 | 1년 전 | 894 | |||
| 5333 | 1년 전 | 723 | |||
| 5332 |
바다클라우드
|
1년 전 | 3651 | ||
| 5331 |
뽕엄능브라
|
1년 전 | 1677 | ||
| 5330 | 1년 전 | 1337 | |||
| 5329 |
|
1년 전 | 2663 | ||
| 5328 | 1년 전 | 2468 | |||
| 5327 | 1년 전 | 3660 | |||
| 5326 | 1년 전 | 1559 | |||
| 5325 | JavaScript |
|
1년 전 | 696 | |
| 5324 | OS | 1년 전 | 763 | ||
| 5323 | PHP |
|
1년 전 | 904 | |
| 5322 | PHP |
|
1년 전 | 802 | |
| 5321 | PHP |
|
1년 전 | 660 | |
| 5320 | PHP |
|
1년 전 | 761 | |
| 5319 | PHP |
techstar
|
1년 전 | 809 | |
| 5318 | JavaScript |
|
1년 전 | 676 | |
| 5317 | PHP |
|
1년 전 | 622 | |
| 5316 | PHP |
|
1년 전 | 583 | |
| 5315 | PHP |
|
1년 전 | 692 | |
| 5314 | PHP |
|
1년 전 | 672 | |
| 5313 | PHP |
techstar
|
1년 전 | 770 | |
| 5312 | 정규표현식 |
|
1년 전 | 647 | |
| 5311 | JavaScript |
|
1년 전 | 716 | |
| 5310 | PHP |
|
1년 전 | 2128 | |
| 5309 | PHP |
techstar
|
1년 전 | 1618 | |
| 5308 | PHP |
techstar
|
2년 전 | 680 | |
| 5307 | node.js |
swallow
|
2년 전 | 1434 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기