자바스크립 시계 [한국시간 고정]
초보인 주제에 이걸 해결할라고 너무 힘들었습니다.
공유하도록 하겠습니다.
[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에서 해주시기 바랍니다.
| 번호 | 분류 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|---|
| 5396 | 기타 |
슈퍼스타맨
|
4개월 전 | 355 | |
| 5395 | PHP |
untitled
|
6개월 전 | 824 | |
| 5394 | MySQL |
선택과집중
|
6개월 전 | 601 | |
| 5393 | 웹서버 |
techstar
|
8개월 전 | 865 | |
| 5392 |
|
1년 전 | 1222 | ||
| 5391 | 10개월 전 | 1122 | |||
| 5390 | 10개월 전 | 908 | |||
| 5389 | 9개월 전 | 876 | |||
| 5388 | 9개월 전 | 978 | |||
| 5387 | 8개월 전 | 811 | |||
| 5386 | JavaScript |
nekoieye
|
8개월 전 | 974 | |
| 5385 | 웹서버 | 8개월 전 | 990 | ||
| 5384 | JavaScript |
|
9개월 전 | 821 | |
| 5383 | 기타 | 10개월 전 | 1131 | ||
| 5382 | 기타 |
|
10개월 전 | 580 | |
| 5381 | JavaScript | 10개월 전 | 911 | ||
| 5380 | 기타 |
|
10개월 전 | 698 | |
| 5379 | JavaScript | 11개월 전 | 696 | ||
| 5378 | 11개월 전 | 1200 | |||
| 5377 | 기타 |
|
11개월 전 | 764 | |
| 5376 | jQuery |
|
11개월 전 | 579 | |
| 5375 | jQuery |
techstar
|
11개월 전 | 732 | |
| 5374 | 기타 |
|
11개월 전 | 785 | |
| 5373 | MySQL |
|
1년 전 | 813 | |
| 5372 | 기타 |
|
1년 전 | 1017 | |
| 5371 | JavaScript |
|
1년 전 | 730 | |
| 5370 | JavaScript |
|
1년 전 | 735 | |
| 5369 | PHP |
|
1년 전 | 1245 | |
| 5368 | PHP | 1년 전 | 1412 | ||
| 5367 | 기타 |
nekoieye
|
1년 전 | 1287 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기