재밌는 이벤트의 세계, JavaScript
Date 객체는 웹 브라우저가 설치된 PC의 현재 시각을 얻어와요.
변수 변수이름 = new Date( );
<script>
let mydate = new Date();
</script>
<script>
// 년 구하기
let mydate = new Date();
let yy = mydate.getFullYear();
</script>
<script>
// 월 구하기
let mydate = new Date();
// 월은 0이 1월, 11이 12월을 의미한다.
let mm = mydate.getMonth() + 1;
</script>
<script>
// 일 구하기
let mydate = new Date();
let yy = mydate.getDate();
</script>
<script>
let mydate = new Date();
// 요일 배열 만들기
let days = ['일', '월', '화', '수', '목', '금', '토'];
// 0 = 일요일 ~ 6 = 토요일 값이 리턴
let i = mydate.getDay();
let day = days[i];
</script>
<script>
// 시 구하기
let mydate = new Date();
let hh = mydate.getHours();
</script>
<script>
// 분 구하기
let mydate = new Date();
let mi = mydate.getMinutes();
</script>
<script>
// 초 구하기
let mydate = new Date();
let ss = mydate.getSeconds();
</script>
<script>
let mydate = new Date();
// 년 구하기
let yy = mydate.getFullYear();
// 월 구하기
let mm = mydate.getMonth() + 1;
// 일 구하기
let dd = mydate.getDate();
// 요일 구하기
let days = ['일', '월', '화', '수', '목', '금', '토'];
let i = mydate.getDay();
const day = days[i];
// 현재 시각을 출력하기
let hh = mydate.getHours();
let mi = mydate.getMinutes();
let ss = mydate.getSeconds();
</script>
<script>
// 년 재정의하기
let mydate = new Date();
let yy = mydate.setYear();
</script>
<script>
// 월 재정의하기
let mydate = new Date();
let mm = mydate.setMonth() + 1;
</script>
<script>
// 일 재정의하기
let mydate = new Date();
let yy = mydate.setDate();
</script>
<script>
// 시 재정의하기
let mydate = new Date();
let hh = mydate.setHours();
</script>
<script>
// 분 재정의하기
let mydate = new Date();
let mi = mydate.setMinutes();
</script>
<script>
// 초 재정의하기
let mydate = new Date();
let ss = mydate.setSeconds();
</script>
<script>
// 파라미터 기입으로 날짜 재정의하기
let mydate = new Date(2022, 11, 31);
</script>
<script>
// Date 객체에 임의의 날짜 / 시간 정하기
const days = ['일', '월', '화', '수', '목', '금', '토'];
let mydate = new Date();
// Date 객체안에 저장된 시각을 임의 날짜로 변경하기
mydate.setYear(2010);
mydate.setMonth(1); // 0부터 시작하니까 2월
mydate.setDate(14);
mydate.setHours(12);
mydate.setMinutes(16);
mydate.setSeconds(30);
// 년, 월, 일, 시, 분, 초를 리턴
let yy = mydate.getFullYear();
let mm = mydate.getMonth() + 1;
let dd = mydate.getDate();
let i = mydate.getDay();
let day = days[i];
let hh = mydate.getHours();
let mi = mydate.getMinutes();
let ss = mydate.getSeconds();
const result = yy + "-" + mm + "-" + dd + "-" + day + " " + hh + ":" + mi + ":" + ss;
document.write("<h1>" + result + "</h1>");
</script>
<script>
// 날짜 객체
let theday = new Date(2022, 0, 1); // 객체에 파라미터를 넘기면 날짜를 임의로 세팅할 수 있다.
let today = new Date();
let cnt = today.getTime() - theday.getTime();
let day = Math.floor( cnt / (24 * 60 * 60 * 1000) ) ;
document.write("<h1>올해는 " + day + "일 지났습니다.</h1>");
</script>
다른 함수의 이름과 1/1000초 단위의 시간값을 파라미터로 설정하여 정해진 시간에 한번 씩 파라미터로 전달된 함수를 반복적으로 호출해요.
<script>
// 함수를 1초에 한 번씩 반복해서 자동 호출한다.
setInterval(함수, 1000);
// 익명함수(: 함수의 이름이 없다.)를 1초에 한 번씩 반복해서 자동 호출한다.
// 파라미터 형태로 전달되는 함수를 콜백함수라고 한다.
setInterval(function(){
.. 1초마다 반복 실행될 구문 ..
}, 1000);
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<!--
onload : 페이지가 load 되었을 때 실행할 function
-->
<body onload="startTime()">
<h1 id="timer"></h1>
<script>
function printTime(){
// 현재시간을 구한다.
let days = ['일', '월', '화', '수', '목', '금', '토'];
let mydate = new Date();
let yy = mydate.getFullYear();
let mm = mydate.getMonth() + 1;
let dd = mydate.getDate();
let i = mydate.getDay();
let day = days[i];
let hh = mydate.getHours();
let mi = mydate.getMinutes();
let ss = mydate.getSeconds();
// 완성된 현재 시각
let result = yy + "-" + mm + "-" + dd + "-" + day + " " + hh + ":" + mi + ":" + ss;
// getElemnetById : id 속성값이 timer인 요소에게 결과를 출력한다.
document.getElementById("timer").innerHTML = result;
}
function startTime(){
// printTime 함수를 1초에 한 번씩 반복해서 자동 호출한다.
setInterval(printTime, 1000);
}
</script>
</body>
</html>
출처
https://media.giphy.com/media/qqtvGYCjDNwac/giphy.gif
https://media.giphy.com/media/26tPplGWjN0xLybiU/giphy.gif