달력 출력결과 입니다.
양옆에 9월과 11월을 누르면 전달과 다음달로 넘어가게 만들었고
오늘날짜 배경색, 토요일과 일요일 글자 색을 넣었습니다.
사용 메소드
getMonth() - 달 불러오기
getData() -오늘 날짜 불러오기
getFullYear() -년도 불러오기
전체 코드입니다.
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 | <!DOCTYPE html> <html> <head> <meta charset="EUC-KR"> <title>testCalendar</title> <style> table { border:1px solid #BDBDBD; text-align:center; width:30%; } </style> <script language="javascript"> var today = new Date(); // 오늘 날짜 var date = new Date(); function beforem() //이전 달을 today에 값을 저장 { today = new Date(today.getFullYear(), today.getMonth() - 1, today.getDate()); build(); //만들기 } function nextm() //다음 달을 today에 저장 { today = new Date(today.getFullYear(), today.getMonth() + 1, today.getDate()); build(); } function build() { var nMonth = new Date(today.getFullYear(), today.getMonth(), 1); //현재달의 첫째 날 var lastDate = new Date(today.getFullYear(), today.getMonth() + 1, 0); //현재 달의 마지막 날 var tbcal = document.getElementById("calendar"); // 테이블 달력을 만들 테이블 var yearmonth = document.getElementById("yearmonth"); // 년도와 월 출력할곳 yearmonth.innerHTML = today.getFullYear() + "년 "+ (today.getMonth() + 1) + "월"; //년도와 월 출력 if(today.getMonth()+1==12) // 눌렀을 때 월이 넘어가는 곳 { before.innerHTML=(today.getMonth())+"월"; next.innerHTML="1월"; } else if(today.getMonth()+1==1) // 1월 일 때 { before.innerHTML="12월"; next.innerHTML=(today.getMonth()+2)+"월"; } else // 12월 일 때 { before.innerHTML=(today.getMonth())+"월"; next.innerHTML=(today.getMonth()+2)+"월"; } // 남은 테이블 줄 삭제 while (tbcal.rows.length > 2) { tbcal.deleteRow(tbcal.rows.length - 1); } var row = null; row = tbcal.insertRow(); var cnt = 0; // 1일 시작칸 찾기 for (i = 0; i < nMonth.getDay(); i++) { cell = row.insertCell(); cnt = cnt + 1; } // 달력 출력 for (i = 1; i <= lastDate.getDate(); i++) // 1일부터 마지막 일까지 { cell = row.insertCell(); cell.innerHTML = i; cnt = cnt + 1; if (cnt % 7 == 1) {//일요일 계산 cell.innerHTML = "<font color=#FF9090>" + i//일요일에 색 } if (cnt % 7 == 0) { // 1주일이 7일 이므로 토요일 계산 cell.innerHTML = "<font color=#7ED5E4>" + i//토요일에 색 row = calendar.insertRow();// 줄 추가 } if(today.getFullYear()==date.getFullYear()&&today.getMonth()==date.getMonth()&&i==date.getDate()) { cell.bgColor = "#BCF1B1"; //오늘날짜배경색 } } } </script> </head> <body onload="build();"> <table align="center" id="calendar"> <tr> <td><font size=1%; color="#B3B6B3"><label onclick="beforem()" id="before" ></label></font></td> <td colspan="5" align="center" id="yearmonth"></td> <td><font size=1%; color="#B3B6B3"><label onclick="nextm()" id="next"></label></font></td> </tr> <tr> <td align="center"> <font color="#FF9090">일</font></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=#7ED5E4>토</font></td> </tr> </table> </body> </html> | cs |
'JavaScript' 카테고리의 다른 글
| [JavaScript]시간이 흘러가는 시계 만들기 (0) | 2018.10.23 |
|---|---|
| [Java Script]글자 나타내기 (0) | 2018.10.23 |
| [JavaScript]랜덤 이미지 변경 (0) | 2018.10.23 |
| JavaScript를 이용한 배경색 바꾸기 (1) | 2018.10.19 |
| Java Script 이용 계산기 만들기 (0) | 2018.10.18 |