티스토리 뷰
반응형
* Date
- 날짜와 관련된 작업을 지원한다.
- 객체 생성 방법
1. var object = new Date();
2. var object = new Date(년,월,일,시,분,초,밀리초);
* Date 메소드
- 중요 메소드
1. getYear() : 1970년 이후의 연도를 알아내는 메소드이다.
2. getMonth() : 월을 알아내는 메소드이다. 이 메소드의 반환값을 0부터 11까지이므로 정확한 현재 월을 알려면 getMonth()의 반환값에 1을 더해야한다.
3. getDate() : 날짜를 알아내는 메소드이다.
4. getDay() : 요일을 알아내는 메소드이다. 이 메소드의 반환값은 0부터 7까지이며 0은 '일요일', 1을 '월요일' 순으로 해당된다.
* 달력을 만들어 보자. 현재달, 지난달, 다음달 모두 정확히 나타내야한다.
|
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
114
115
116
117
118
119
120
121
122
123
124
125
126
127 |
<!DOCTYPE html>
<html>
<head>
<title>달력</title>
<style type="text/css">
td{
width: 50px;
height: 50px;
text-align: center;
font-size: 20px;
font-family: 굴림;
border:2px border-color:#3333FF;
border-radius: 8px;/*모서리 둥글게*/
}
</style>
<script type="text/javascript">
var today = new Date();//오늘 날짜//내 컴퓨터 로컬을 기준으로 today에 Date 객체를 넣어줌
var date = new Date();//today의 Date를 세어주는 역할
function prevCalendar() {//이전 달
// 이전 달을 today에 값을 저장하고 달력에 today를 넣어줌
//today.getFullYear() 현재 년도//today.getMonth() 월 //today.getDate() 일
//getMonth()는 현재 달을 받아 오므로 이전달을 출력하려면 -1을 해줘야함
today = new Date(today.getFullYear(), today.getMonth() - 1, today.getDate());
buildCalendar(); //달력 cell 만들어 출력
}
function nextCalendar() {//다음 달
// 다음 달을 today에 값을 저장하고 달력에 today 넣어줌
//today.getFullYear() 현재 년도//today.getMonth() 월 //today.getDate() 일
//getMonth()는 현재 달을 받아 오므로 다음달을 출력하려면 +1을 해줘야함
today = new Date(today.getFullYear(), today.getMonth() + 1, today.getDate());
buildCalendar();//달력 cell 만들어 출력
}
function buildCalendar(){//현재 달 달력 만들기
var doMonth = new Date(today.getFullYear(),today.getMonth(),1);
//이번 달의 첫째 날,
//new를 쓰는 이유 : new를 쓰면 이번달의 로컬 월을 정확하게 받아온다.
//new를 쓰지 않았을때 이번달을 받아오려면 +1을 해줘야한다.
//왜냐면 getMonth()는 0~11을 반환하기 때문
var lastDate = new Date(today.getFullYear(),today.getMonth()+1,0);
//이번 달의 마지막 날
//new를 써주면 정확한 월을 가져옴, getMonth()+1을 해주면 다음달로 넘어가는데
//day를 1부터 시작하는게 아니라 0부터 시작하기 때문에
//대로 된 다음달 시작일(1일)은 못가져오고 1 전인 0, 즉 전달 마지막일 을 가져오게 된다
var tbCalendar = document.getElementById("calendar");
//날짜를 찍을 테이블 변수 만듬, 일 까지 다 찍힘
var tbCalendarYM = document.getElementById("tbCalendarYM");
//테이블에 정확한 날짜 찍는 변수
//innerHTML : js 언어를 HTML의 권장 표준 언어로 바꾼다
//new를 찍지 않아서 month는 +1을 더해줘야 한다.
tbCalendarYM.innerHTML = today.getFullYear() + "년 " + (today.getMonth() + 1) + "월";
/*while은 이번달이 끝나면 다음달로 넘겨주는 역할*/
while (tbCalendar.rows.length > 2) {
//열을 지워줌
//기본 열 크기는 body 부분에서 2로 고정되어 있다.
tbCalendar.deleteRow(tbCalendar.rows.length-1);
//테이블의 tr 갯수 만큼의 열 묶음은 -1칸 해줘야지
//30일 이후로 담을달에 순서대로 열이 계속 이어진다.
}
var row = null;
row = tbCalendar.insertRow();
//테이블에 새로운 열 삽입//즉, 초기화
var cnt = 0;// count, 셀의 갯수를 세어주는 역할
// 1일이 시작되는 칸을 맞추어 줌
for (i=0; i<doMonth.getDay(); i++) {
/*이번달의 day만큼 돌림*/
cell = row.insertCell();//열 한칸한칸 계속 만들어주는 역할
cnt = cnt + 1;//열의 갯수를 계속 다음으로 위치하게 해주는 역할
}
/*달력 출력*/
for (i=1; i<=lastDate.getDate(); i++) {
//1일부터 마지막 일까지 돌림
cell = row.insertCell();//열 한칸한칸 계속 만들어주는 역할
cell.innerHTML = i;//셀을 1부터 마지막 day까지 HTML 문법에 넣어줌
cnt = cnt + 1;//열의 갯수를 계속 다음으로 위치하게 해주는 역할
if (cnt % 7 == 1) {/*일요일 계산*/
//1주일이 7일 이므로 일요일 구하기
//월화수목금토일을 7로 나눴을때 나머지가 1이면 cnt가 1번째에 위치함을 의미한다
cell.innerHTML = "<font color=#F79DC2>" + i
//1번째의 cell에만 색칠
}
if (cnt%7 == 0){/* 1주일이 7일 이므로 토요일 구하기*/
//월화수목금토일을 7로 나눴을때 나머지가 0이면 cnt가 7번째에 위치함을 의미한다
cell.innerHTML = "<font color=skyblue>" + i
//7번째의 cell에만 색칠
row = calendar.insertRow();
//토요일 다음에 올 셀을 추가
}
/*오늘의 날짜에 노란색 칠하기*/
if (today.getFullYear() == date.getFullYear()
&& today.getMonth() == date.getMonth()
&& i == date.getDate()) {
//달력에 있는 년,달과 내 컴퓨터의 로컬 년,달이 같고, 일이 오늘의 일과 같으면
cell.bgColor = "#FAF58C";//셀의 배경색을 노랑으로
}
}
}
</script>
</head>
<body>
<p></p>
<h3 align="center">★Jerry의 달력★</h3>
<table id="calendar" border="3" align="center" style="border-color:#3333FF ">
<tr><!-- label은 마우스로 클릭을 편하게 해줌 -->
<td><label onclick="prevCalendar()"><</label></td>
<td align="center" id="tbCalendarYM" colspan="5">
yyyy년 m월</td>
<td><label onclick="nextCalendar()">>
</label></td>
</tr>
<tr>
<td align="center"><font color ="#F79DC2">일</td>
<td align="center">월</td>
<td align="center">화</td>
<td align="center">수</td>
<td align="center">목</td>
<td align="center">금</td>
<td align="center"><font color ="skyblue">토</td>
</tr>
</table>
<script language="javascript" type="text/javascript">
buildCalendar();//
</script>
</body>
</html> |
cs |
* 완성 모습
반응형
'Web > JavaScript & JQuery' 카테고리의 다른 글
| [JavaScript] 뒤로가기 버튼 막기 (3) | 2018.05.11 |
|---|---|
| [JavaScript]회원가입 유효성 만들기 (0) | 2018.04.06 |
| [JavaScript]계산기 만들기,문자열 검색,배열 (1) | 2018.04.05 |
| [JavaScript]HTML 에서 JavaScript 호출하기 (0) | 2018.04.04 |
| [JavaScript]글자 변경 폼 만들기 (0) | 2018.04.04 |
댓글
공지사항