자바스크립 시계 [한국시간 고정]
초보인 주제에 이걸 해결할라고 너무 힘들었습니다.
공유하도록 하겠습니다.
[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에서 해주시기 바랍니다.
| 번호 | 분류 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|---|
| 4796 | jQuery | 8년 전 | 1545 | ||
| 4795 | jQuery | 8년 전 | 1449 | ||
| 4794 | jQuery | 8년 전 | 1569 | ||
| 4793 | jQuery | 8년 전 | 1623 | ||
| 4792 | jQuery | 8년 전 | 1639 | ||
| 4791 | jQuery | 8년 전 | 1800 | ||
| 4790 | jQuery | 8년 전 | 1737 | ||
| 4789 | jQuery | 8년 전 | 1600 | ||
| 4788 | jQuery | 8년 전 | 1663 | ||
| 4787 | jQuery | 8년 전 | 1476 | ||
| 4786 | jQuery | 8년 전 | 1437 | ||
| 4785 | jQuery | 8년 전 | 1652 | ||
| 4784 | jQuery | 8년 전 | 1535 | ||
| 4783 | jQuery | 8년 전 | 1241 | ||
| 4782 | jQuery | 8년 전 | 1606 | ||
| 4781 | jQuery | 8년 전 | 1347 | ||
| 4780 | jQuery | 8년 전 | 1587 | ||
| 4779 | jQuery | 8년 전 | 1991 | ||
| 4778 | jQuery | 8년 전 | 1964 | ||
| 4777 | jQuery | 8년 전 | 1540 | ||
| 4776 | jQuery | 8년 전 | 1591 | ||
| 4775 | jQuery | 8년 전 | 1981 | ||
| 4774 | jQuery | 8년 전 | 1493 | ||
| 4773 | jQuery | 8년 전 | 1418 | ||
| 4772 | jQuery | 8년 전 | 2211 | ||
| 4771 | jQuery | 8년 전 | 3625 | ||
| 4770 | PHP | 8년 전 | 5591 | ||
| 4769 | 기타 | 8년 전 | 1970 | ||
| 4768 | 기타 | 8년 전 | 1790 | ||
| 4767 | 기타 | 8년 전 | 2078 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기