웹팁 분류

실시간 날짜 요일 시간 스크립트

작성자 정보

  • GW 작성
  • 작성일

컨텐츠 정보

본문


 

실시간 현재 날짜 보여주기


실시간 시각 보여주기


오늘이 몇 요일인지 보여주기


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


미리보기


출처 : 그누 "오땡스"

https://sir.kr/g5_tip/20158 


 

아재감성 아재공간 다온네



추천 업체




아재 음악


관련자료

댓글 0
등록된 댓글이 없습니다.
kkk
전체 1,365 / 1 페이지
RSS
  • 병원 갈 때 신분증 꼭 지참
    등록자 GW
    등록일 04.13 조회 20

    소식 2024년 5월 20일부터 병원 갈 때 '신분증' 꼭 챙기세요5월20일부턴 병원 갈 때 신분증 챙겨가세요건강보험 본인 확인 강화 제도 시행그동안…

  • 이선희 라이브 콘서트 다시보기
    등록자 GW
    등록일 04.11 조회 31

    티비 이선희 라이브 콘서트 2014 75분 풀영상아름다운강산 라이브 역시 이선희!!사랑이 지는 이자리 1988년알고싶어요 1986년나항상그대를 198…

  • 서울형 아이돌봄비 지원
    등록자 GW
    등록일 04.08 조회 33

    정보 서울형 아이돌봄비 지원24~36개월 영아 가정(중위 150% 이하)에 월 30만 원, 최대 13개월 지원 누가 이용할 수 있나요?만24개월~36…

  • 은평구 불광천 벚꽃이 피다
    등록자 GW
    등록일 04.05 조회 113

    수다 은평구 불광천 벚꽃이 피었습니다다른 지역의 벚꽃축제와 다르게 은평구는 벚꽃이 피는 시기에 딱 맞춰 불광천에서 ‘벚꽃 있는 벚꽃 축제’를 열게되네…

  • 불광천 벚꽃과 함께 즐거운 축제
    등록자 GW
    등록일 04.05 조회 73

    소식 올해도 어김없이 불광천 벚꽃과 함께 즐거운 축제가 펼쳐집니다.함께 참여하셔서 행복한 많이 추억 만드시기 바랍니다. :)<프로그램 안내>…

  • 하늘에서 본 서대문구
    등록자 GW
    등록일 04.04 조회 30

    영상 하늘에서 본 서대문구하늘에서 본 서대문구 모습, 어떤 모습일까요?????명소부터 역세권까지 우리가 살고 있는 서대문 곳곳의 모습을드론뷰(Dron…

  • 비보호 좌회전 정확하게 알자
    등록자 GW
    등록일 03.25 조회 275

    정보 비보호좌회전이란사전적 의미는교차로에서, 별도의 좌회전 신호를 주지 않고 직진 신호일 때 좌회전을 허용하는 것을 말한다.즉 다시 말해 비보호 좌회…

  • 세탁 노하우 - 김치국물 지우는 방법
    등록자 GW
    등록일 03.19 조회 95

    정보 옷에 묻은 김치국물은 빨리 발견하는게 답입니다세탁 전 처리를 하여 김치국물을 지운 상태에서 세탁해야합니다.얼룩 제거가 되지 않은 상태에서 세탁을…

  • 초간단 레시피 : 양배추 토스트 만들기
    등록자 GW
    등록일 03.19 조회 268

    요리 아삭아삭 맛있는 양배추 토스트 :: 초간단 레시피 집에 양배추 하나만 있으면 맛있는 토스트 뚝딱 완성 !!!만드는 방법도 정말 간단하니, 집에서…

  • http 접속하면 https로 접속시키려면
    등록자 GW
    등록일 03.18 조회 82

    웹팁 항상 https:// 으로 접속되게 하려면만약, 홈페이지로 들어오는모든(http://도메인이름) 접속을(https://도메인이름)으로 넘겨 주고…

  • 확정일자 뜻! 확정일자 받는 곳
    등록자 GW
    등록일 03.18 조회 181

    정보 주택임대차,상가임대차 확정일자는 어디서 받나요?확정일자란?확정일자는 그 날짜에 임대차계약서가 존재한다는 사실을 증명하기 위하여 전/월세 계약서에…

  • 번아웃 증후군이란? Burn Out 뜻
    등록자 GW
    등록일 03.15 조회 185

    정보 번아웃 증후군이란한 가지 일에 몰두하던 사람이 극도의 피로감으로 인해 무기력증, 심한 불안감, 자기혐오 등에 빠지는 것을 말한다.번아웃 증후군은…

  • 기묘한 이야기-나에게 꼭 맞는 사람을
    등록자 GW
    등록일 03.15 조회 143

    영화 일본 드라마 일본 영화 다시보기기묘한 이야기나에게 꼭 맞는 사람을 만날 수 있는 확실한 방법일본 '기묘한 이야기'의 2013년 가을 스페셜로 방…

  • 극한의 생존 게임 윈터 서바이벌
    등록자 GW
    등록일 03.15 조회 547

    게임 Winter Survival장르: 어드벤처 게임, 대전 격투 게임, Early Access개발: Drago Entertainment최고의 겨울 …

  • 실시간 반응형웹 시뮬레이터
    등록자 GW
    등록일 03.15 조회 148

    웹팁 반응형웹 시뮬레이터Mobile simulator - responsive testing tool-본 페이지 구글번역-개요모바일 반응형 웹사이트를 …

알림 0