실시간 날짜 요일 시간 스크립트
작성자 정보
- GW 작성
- 작성일
컨텐츠 정보
- 6,276 조회
-
목록
본문
실시간 현재 날짜 보여주기
실시간 시각 보여주기
오늘이 몇 요일인지 보여주기
<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>
출처 : 그누 "오땡스"
아재감성 아재공간 다온네
-
등록일 10.04
-
등록일 08.19
-
등록일 10.14
-
등록일 09.04
-
등록일 10.30
-
등록일 09.06
-
등록일 10.31
-
등록일 08.26
-
등록일 08.26
-
등록일 09.30
-
등록일 09.11
-
등록일 09.13
-
등록일 11.02
-
등록일 10.30
-
등록일 09.06
-
등록일 10.11
-
등록일 08.05
-
등록일 09.01
-
등록일 08.26
-
등록일 10.25
-
등록일 08.27
-
등록일 11.08
-
등록일 11.02
-
등록일 11.08
-
등록일 10.11
-
등록일 09.25
-
등록일 10.14
-
등록일 08.16
-
등록일 10.07