○ Date 객체
- 날짜 관련 내장 객체
var d=new Date(); //시스템의 현재 날짜 정보 가져오기
document.write(d); //Wed May 04 2022 12:00:26 GMT+0900 (한국 표준시)
document.write(d.getFullYear()); //현재연도
document.write(d.getMonth()); //현재월 (월은 '현재월-1'로 출력)
document.write(d.getDate()); //현재일
document.write(d.getHours()); //현재시 (24시간제)
document.write(d.getMinutes()); //현재분
document.write(d.getSeconds()); //현재초
document.write(d.getDay()); //현재요일 (0일 1월 2화 3수 4목 5금 6토)
● PRACTICE 연습문제
Q1) 디지털 시계 만들기
- 시작 버튼을 누르면 현재 날짜와 시간이 나오고, 중지 버튼을 누르면 멈춤
- 시계는 <div id="clock">에 출력
- 참고) setTimeout / clearTimeout 함수
① setTimeout(함수명, 시간) : 해당 함수를 해당 시간이 지난 후에 호출한다 (시간은 1000=1초)
② clearTimeout(변수) : setTimeout을 취소
<body>
<h3>디지털시계</h3>
<div id="clock"></div>
<hr>
<input type="button" value="시작" onclick="showtime()">
<input type="button" value="중지" onclick="killtime()">
<script>
function showtime(){ //시간 보여주는 함수
const d = new Date();
var today = "";
today += d.getFullYear(); //년
today += ".";
var cMonth = d.getMonth()+1; //월
if(cMonth>=10){
today += cMonth;
}else{
today += "0" + cMonth;
}//if end
today += ".";
var cDate = d.getDate(); //일
if(cDate>=10){
today += cDate;
}else{
today += "0" + cDate;
}//if end
today += " ("; //요일
var days = ["일", "월", "화", "수", "목", "금", "토"];
today += days[d.getDay()];
today += ") ";
if(d.getHours()<12){ //시
today += "AM "
today += d.getHours()
}else{
today += "PM "
today += d.getHours() - 12
}//if end
today += ":";
if(d.getMinutes()>=10){ //분
today += d.getMinutes();
}else{//if end
today += "0" + d.getMinutes();
}//if end
today += ":";
if(d.getSeconds()>=10){ //초
today += d.getSeconds();
}else{
today += "0" + d.getSeconds();
}//if end
today += ":";
if(d.getMilliseconds()>=100){ //밀리세컨드
today += d.getMilliseconds();
}else if(d.getMilliseconds()>=10){
today += "0" + d.getMilliseconds ();
}else{
today += "00" + d.getMilliseconds ();
}//if end
document.getElementById("clock").innerHTML=today;
timer = setTimeout(showtime, 10); // 0.01초 후에 매 0.01초마다 showtime 함수를 호출
} //showtime() end
var timer; // 전역변수
function killtime(){//시간 중지하는 함수
clearTimeout(timer);
} //killtime() end
</script>
</body>↓
'Frontend > JavaScript' 카테고리의 다른 글
| 17. JavaScript 이벤트(Event) (0) | 2022.05.10 |
|---|---|
| 16. JavaScript 내장객체 (0) | 2022.05.06 |
| 14. JavaScript 함수 (Function: 사용자 정의 함수, 변수의 유효범위) (0) | 2022.05.03 |
| 13. JavaScript 연습문제 모음 (Array) (0) | 2022.05.02 |
| 12. JavaScript 배열(Array) (0) | 2022.05.02 |
댓글