웹팁 분류

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

작성자 정보

  • 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
웹팁 77 / 1 페이지
RSS
  • 새탭이 아닌 새창으로 띄우기 스크랩트
    등록자 GW
    등록일 09.13 조회 602

    웹팁 스크립트로 띄워보세요.클릭하면 새창을 띄울 타겟에 onclick="javascript:펑션명();" 넣고스크립트에function 펑션명(){wi…

  • 인풋버튼 원하는 페이지를 원하는 사이즈로 새창띄우기 input 활용
    등록자 GW
    등록일 08.27 조회 599

    웹팁 인풋버튼 원하는 페이지를 원하는 사이즈로 새창띄우기 input 활용<INPUT type="button" value="Click" onCli…

  • 일정시간 지나면 새창 띄우고 자동으로 닫히기
    등록자 GW
    등록일 06.20 조회 748

    웹팁 PC 모바일 브라우져등에 따라 동작하지 않을수있습니다<head> 와 </head> 123456789101112131415&…

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

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

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

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

  • 컴퓨터 그림 그리기 모바일 그림 그리기
    등록자 GW
    등록일 11.14 조회 1938

    웹팁 드로잉 보드드로잉 보드란 무엇인가요?그림을 그리기 위해 매번 노트북을 켜지 마세요.모바일로 충분히 그림을 그릴 수 있습니다.작성한 그림을 서버로…

  • <a> 태그 속성 링크 방법 target 속성
    등록자 GW
    등록일 11.07 조회 1958

    웹팁 하이퍼 링크(hyperlink) 만들기하이퍼 링크를 간단히 링크(link)라고를 구현하는 방법은HTML에서는 <a>태그 표현텍스트 링…

  • CSS 버튼 자동 생성 사이트
    등록자 GW
    등록일 09.25 조회 1759

    웹팁 CSS 버튼 자동 생성기CSS버튼 만드는 방법 초보자도 쉽게 만들 수 있는CSS버튼 자동으로 만들어주는 사이트CSS버튼 자동 생성기를 소개합니다…

  • 실시간 날짜 요일 시간 스크립트
    등록자 GW
    등록일 04.05 조회 6277

    웹팁 실시간 현재 날짜 보여주기실시간 시각 보여주기오늘이 몇 요일인지 보여주기 <div id="clock"> <div1><…

  • 5초마다 이미지 변경되는 페이지 만들기
    등록자 GW
    등록일 01.25 조회 6167

    웹팁 페이지에 삽입된 이미지가 원하는 시간이 지나면자동으로 다른 이미지로 변경됩니다.먼저 1.2.3.4 이미지를 준비후계정에 업로드된 이미지 경로를 …

  • jfif 이미지 파일 JPG 변환 JFIF TO JPG PNG
    등록자 GW
    등록일 12.20 조회 4768

    웹팁 이미지 파일을 저장했는데 .jfif 파일?자동 변환 사이트를 이용하면 쉽게 원하는 이미지파일 형식으로 다운로드가 가능합니다JFIF 이미지 파일J…

  • 마우스 우측 경고창 띄우기
    등록자 GW
    등록일 10.05 조회 4872

    웹팁 100% 막을수 있는 방법은 없을겁니다오른쪽 마우스 사용시 경고문을 띄웁니다. <head> 와 </head> 사이에 삽입하…

  • 절대경로 확인하기
    등록자 GW
    등록일 06.13 조회 4059

    웹팁 절대경로를 확인할때 유용한 팁입니다 123456789<?php$path=getcwd();echo"ThisIsYourAbsolutePath:…

  • 오늘 날짜, 요일 구하는 자바스크립트
    등록자 GW
    등록일 02.23 조회 4085

    웹팁 오늘 날짜 요일 구하는 자바스크립트(javascript)날짜 월 일 날짜까지 간단하게 출력해주는 소스입니다.어디에 어떻게 사용할지...응용은 우…

  • 파비콘 만들기 favicio 적용하기
    등록자 GW
    등록일 01.18 조회 3843

    웹팁 피비콘 적용 예 :ico 또는 png의 확장자의 이미지를도메인(domain)의 루트(root) 디렉토리에업로드하여 주소창 앞에 파비콘 출력시킵니…

알림 0