웹팁 분류

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

작성자 정보

  • 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,358 / 1 페이지
RSS
  • 세탁 노하우 - 김치국물 지우는 방법
    등록자 GW
    등록일 14:55 조회 8

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • 카카오톡 사진 저장 경로 문자메시지 사진 저장 폴더
    등록자 GW
    등록일 03.13 조회 55

    멀티 몇일전 누군가가 잔뜩 보내준 사진을 저장했는데..폰에 있는 사진을 PC작업하려고 찾는데...안보여서^^폰 환경에 따라 다르겠지만...PC에 연결…

  • 딸들과 함께 보던 토이스토리
    등록자 GW
    등록일 03.13 조회 41

    영화 토이 스토리 (Toy Story)6살 짜리 소년 앤디가 갖고 있는 인형들 중 우디는 그가 아끼는 카우보이 인형이다.평화롭던 장난감들은 앤디가 없…

  • 슬렌더 : 디 어라이벌 최신버전 슬렌더 한글패치
    등록자 GW
    등록일 03.11 조회 211

    게임 Slender : The Arrival (슬렌더 : 디 어라이벌)Slender Man이 그 어느 때보다 더 무시무시하게 돌아왔습니다. 당신은 당…

  • 연신내 교통사고 14명 사상
    등록자 GW
    등록일 03.08 조회 32

    소식 시장 근처 도로에서 사람들이 잇따라 횡단보도를 건너갑니다.갑자기 전조등을 켠 회색 승용차가 빠르게 돌진합니다.승용차는 한 남성을 들이받고도 속도…

  • 이사전 도시가스 막음조치 신청 안내
    등록자 GW
    등록일 03.08 조회 49

    정보 이사전 도시가스 막음조치 신청 안내▣ 이사전 가스 막음조치 신청 안내 ▣-이사철을 맞이하여 이사 들어오고 가실 때 가스레인지를 철거하거나 연결할…

  • 불법촬영 범죄예방을 위한 화장실 정기점검 신청 안내
    등록자 GW
    등록일 03.08 조회 134

    소식 불법촬영 범죄예방을 위한 화장실 정기점검 신청 안내작성일 : 2024.02.29담당부서:가족정책과연락처:351-6234은평구는 불법촬영에 대한 …

  • 은평구 상자텃밭 보급사업 참여자 모집 안내
    등록자 GW
    등록일 03.08 조회 36

    소식 2024년 상자텃밭 보급사업 참여자 모집 안내작성일 : 2024.03.07담당부서 : 공원녹지과연락처:02-351-8033은평구에서는 가정에서 …

알림 0