<최종 화면> 날짜를 표시하는 객체를 알아보고, 버튼 클릭시 날짜 계산, 버튼 클릭시 현재 시간이 나오는 예제이다.
날짜를 가지고 있는 객체 Date()에 대해 알아보자.
모든 객체의 자료형은 object이다.
현재 날짜를 가지고 있는 객체를 문자로 표시하면 요일, 월, 일, 년도가 나온다. 영어로..
toLocaleString() 메소드로 한국 기준으로 표시 가능하다.
getYear()은 년도를 알려준다. 그러나 기준이 1900년도를 기준으로 얼마나 지났는지 반환해준다.
(현재 년도는 2019년이므로 2019-1900 = 119이다.)
2019가 나오기 위해 getFullYear()로 사용하면 된다.
년도와 마찬가지로 월, 일, 시간을 얻을 수 있다. (단, 월은 0부터 카운트 하기 때문에 +1을 해야 현재 12월 달이 나온다.)
분, 시, 초도 얻을 수 있다.
특정 날짜를 바꿀 수 도 있다. 우선 b에 현재 날짜를 주자.
이제 년도를 바꿔보자. 2019 -> 2018
처음부터 특정 날짜를 지정 가능하다.
날짜 차이도 구할 수 있다.
그러나 두 날짜 차이는 밀리 초로 나오고, 그것을 일수로 바꿔서 했지만 소주점이 나온다..
소수점을 제거 해보자.
이제 현재 날짜로 부터 선택한 기준일이 얼마나 차이 나는지 알려주는 웹페이지 한 부부을 만들어보자.
우선 날짜 선택창과 버튼을 만들자.
버튼을 클릭했을 때, 선택한 날짜가 나오고 오늘 날짜로 부터 얼마나 차이나는지 보여주자.
위 사진에서 문제점은 차이가 3일인데 +3일 인지, -3일인지 모른다. (현재 12월 13일이였고 10일을 선택했다.)
전일인지 후일인지 표시하자.
버튼을 클릭했을 시, 현재 날짜와 시간을 표시해보자.
클릭했을때 메소드 내용을 적어보자.
버튼을 눌러야 그때마다 시간이 갱신된다. 한번 누르면 알아서 시간이 갱신되게 해보자.
<복붙용 코드>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Date</title>
<script>
// 유용한 내장 생성자 함수(class)들 [Date, Number, String, Math, Array]
// 1. Date
var a= new Date(); //현재 날짜를 가지고 있는 객체
document.write(a+"<br>"); //자동 toString()
document.write(typeof(a)+"<br>"); //모든 객체의 자료형은 object임
// 주요 기능들(메소드)
document.write(a.toDateString()+"<br>");
document.write(a.toLocaleString()+"<br>");
document.write(a.getYear()+"<br>"); //1900년부터 기준.. 2019년은 119
document.write(a.getFullYear()+"<br>"); //2019
document.write(a.getMonth()+"<br>"); //0~11
document.write(a.getDate()+"<br>");
document.write(a.getHours()+"<br>"); // 0~23
document.write(a.getMinutes()+"<br>");
document.write(a.getSeconds()+"<br>");
document.write(a.getTime()+"<br>"); //currentTimeMillis() 1970/01/01 09:00기준
//set도 가능함
var b= new Date();
document.write(b.toLocaleString()+"<br>");
b.setFullYear(2018);
document.write(b.toLocaleString()+"<br><br>");
// 생성자의 파라미터로 특정 날짜 지정가능
var c= new Date(2025,7,23); //2025년 8월 23일
document.write(c.toLocaleString()+"<br>");
var c= new Date("Wed Sep 13 2017 13:40:13 GMT+0900");
document.write(c.toLocaleString()+"<br>");
var c= new Date("Wed Sep 13 2017");
document.write(c.toLocaleString()+"<br>");
var c= new Date("2017. 9. 13");
document.write(c.toLocaleString()+"<br>");
var c= new Date("154789424100"); //밀리세컨드 시간
document.write(c.toLocaleString()+"<br>");
// 두 날짜사이의 비교
var a=new Date("2018. 12. 13");
var b=new Date();
var diff= b.getTime()- a.getTime();
diff=b-a; //이렇게 써도 자동으로 getTime()의 결과로 연산을 함
document.write("두 날짜 차이 : "+diff+"<br>");
var sec= diff/1000; //밀리초 => 초
var min= sec/60; //초->분
var hour= min/60; //분->시
var day= hour/24; //시->일
document.write("두 날짜 일수 차이 : "+day+"<br>");
// 소수점 제거
day= Math.floor(day);
document.write("두 날짜 일수 차이 : "+day+"<br>");
// 기준일 계산하는 웹페이지
function clickBtn(){
// 입력된 날짜 얻어오기
var e= document.getElementById('ss');
var s=e.value;
document.write(s+'<br>');
var a= new Date(s); // 입력된 날짜로 Date()객체 생성
var b= new Date(); //현재 날짜
// 입력된 날짜와 현재 날짜의 차이 계산
var diff= b-a;
if(day>0) document.write('오늘로 부터 :'+day+'일전 <br>');
else if(day<0) document.write('오늘로 부터 :'+(-day)+'일후 <br>');
else document.write('오늘 <br>');
}
// 디지털 시계... 일정시간(1초)마다 현재 날짜 출력
function showClock(){
var s =new Date(); //현재 시간
var e= document.getElementById('kk');
e.value=s.toLocaleString();
// 1초 후에 showClock()함수를 실행하시오.
setTimeout('showClock()', 1000); //JS에 이미 존재하는 함수
}
</script>
</head>
<body>
<hr>
<input type="date" id="ss">
<button onclick="clickBtn()">기준일 입력</button>
<hr>
<h4>Digital Clock</h4>
<button onclick="showClock()">show clock</button>
<input type="text" id="kk" size="30" readonly>
</body>
</html>
|
'안드로이드 웹앱 콘테츠 개발자 양성(국비지원) > HTML+Java script' 카테고리의 다른 글
| HTML+Java script (기초) String (문자열 탐색/대체/자르기/변경) (0) | 2019.12.13 |
|---|---|
| HTML+Java script (기초) Number (지수, 소수점, 진법 변환) (0) | 2019.12.13 |
| HTML + Java script (기초) 프로토타입 (전역 변수,함수 처럼.. 상속처럼) (0) | 2019.12.13 |
| HTML+Java script (기초) 객체 사용방법 (0) | 2019.12.12 |
| HTML+Java script (기초) 함수 사용 (0) | 2019.12.12 |
댓글