캘린더 디스플레이, 선택 등은 웹 페이지의 여러 곳에서 사용됩니다. 이 기사는 HTML, CSS 및 JavaScript를 사용하여 간단한 캘린더를 구현합니다. 완료 후, 효과는 페이지의 왼쪽에 미치는 영향과 유사합니다. 전달 또는 다음 달로 전환 할 수 있습니다. 실제 조건에 따라 확장 될 수도 있습니다.
HTML
HTML 부분은 비교적 간단하고 DIV를 선언하며 특정 HTML은 JavaScript를 사용하여 생성됩니다. 전체 내용은 다음과 같습니다.
<! docType html> <html> <head> <메타 charset = 'utf-8'> <link rel = 'stylesheet'href 'href ='외부 CSS 파일 경로 '/> <title> demo </title> </head> <바디> <div class ='calendar 'id ='calendar '> JavaScript 파일 경로 '> </script> </body> </html>
CSS
/*전체 설정*/*{마진 : 0px; 패딩 : 0px;}/***캘린더 크기를 설정*/. 캘린더 {너비 : 240px; 높이 : 400px; 디스플레이 : 블록;}/*** 캘린더의 상단 상자를 설정*/. 캘린더 .calendar-title-box {위치 : 상대; 너비 : 100%; 높이 : 36px; 라인 높이 : 36px; 텍스트 정렬 : 센터; Border-Bottom : 1px solid #ddd;}/*** 지난 달의 버튼 아이콘 설정*/. Calendar .prev-Month {위치 : 절대; 상단 : 12px; 왼쪽 : 0px; 디스플레이 : 인라인 블록; 너비 : 0px; 높이 : 0px; 왼쪽 경계 : 0px; 테두리 : 6px 고체 투명; 경계 오른쪽 : 8px 솔리드 #999; 국경-바닥 : 6px 고체 투명; 커서 : 포인터;}/*** 다음 달의 버튼 아이콘 설정*/. 캘린더 .next-month {위치 : 절대; 상단 : 12px; 오른쪽 : 0px; 디스플레이 : 인라인 블록; 너비 : 0px; 높이 : 0px; 경계 오른쪽 : 0px; 테두리 : 6px 고체 투명; 좌파 : 8px 솔리드 #999; 국경-바닥 : 6px 고체 투명; 커서 : 포인터;}/* 세트 캘린더 테이블 스타일 설정*/. 캘린더 테이블 {너비 : 100%; 국경-콜라스 : 붕괴; 텍스트-정렬 : 중심;}/* 테이블 라인 높이*/. 캘린더-테이블 tr {높이 : 30px; Line-Height : 30px;}/* 현재의 날 색상 특수 디스플레이*/. Currentday {color : red;}/* 이번 달의 텍스트 색상*/. Current Month {color : #999;}/* 기타 달 색상*/. Other Month {컬러 : #EDE;}기본적으로 스타일 설정, 간단한 설정에 대해 할 말이 없습니다. 예를 들어, 특별한 것은 "마지막 달"과 "다음 달"을 나타내는 아이콘으로, 절대 포지셔닝을 채택하고 CSS의 테두리 속성을 사용하여 스타일을 설정합니다.
JavaScript 날짜 개체
공식 JS 코드를 시작하기 전에 JS의 날짜 개체를 이해해야합니다. 날짜 개체를 통해 연도, 월, 일, 시간 및 타임 스탬프와 같은 정보를 얻을 수 있습니다. 구체적인 참조 : http://www.w3school.com.cn/jsref/jsref_obj_date.asp
var d1 = 새로운 날짜 (); // 현재 시스템 시간을 얻습니다 내 현재 시간은 2016 년 4 월 25 일 월요일 D1.getLyEar (); // 연간 정보 받기, 2016 d1.getMonth (); // 월간 정보를 가져옵니다 (0 : 0-11부터 시작) 3 d1.getDate (); // 여기에서 하루 정보를 얻습니다. 결과는 다음과 같습니다. 25 d1.getday (); // 여기에서 주간 정보를 얻습니다 (0-6) 결과 결과 : 1
초기화 중에 직접 연도, 월 및 날짜 정보를 설정할 수도 있습니다.
# 2016 년 3 월 15 일 Set var d2 = 새로운 날짜 (2016, 2, 15); // 달은 0에서 계산되며 하나의 d2.getLyEar ()를 빼야합니다. // 2016 d2.getMonth (); // 2 d2.getDate (); // 15 D2.TOLOCALEDATESTRING (); // "2016/3/15"는 설정이 정확하다는 것을 증명합니다
캘린더에는 한 달에 며칠과 같은 문제가 포함됩니다. JS에서는 매우 간단합니다. 연도, 월 및 일이 설정되면 현재 달을 초과하면 JS는 다음 달을 자동으로 계산합니다. 예를 들어, 4 월에는 30 일 밖에되지 않습니다. 31로 설정되면 획득 된 날짜 유형은 5 월 1 일을 자동으로 계산합니다. 0으로 설정되면 JS는 4 월 30 일로 처리되며 5 월 1 일은 4 월 29 일입니다.
var d3 = 새로운 날짜 (2016, 3, 30); d3.tolocaledatestring (); // "2016/4/30"var d4 = 새로운 날짜 (2016, 3, 31); d4.tolocaledatestring (); // "2016/5/1"var d5 = 새로운 날짜 (2016, 3, 33); d5.TolocalEdatestring (); // "2016/5/3"var d6 = 새로운 날짜 (2016, 4, 1); d6.tolocaledatestring (); // "2016/5/1"var d7 = 새로운 날짜 (2016, 4, 0); d7.tolocaledatestring (); // "2016/4/30"var d8 = 새로운 날짜 (2016, 4, -3); d8.tolocaledatestring (); // "2016/4/27"
자바 스크립트
JS의 기본 날짜 사용 객체를 이해 한 후 다음 단계는 코드 구현 부분입니다. 전반적인 아이디어는 다음과 같습니다. 표에 표시되어야하는 연도 및 월 정보를 기록하기 위해 글로벌 DateObj 변수를 정의합니다. 제목의 내용은 DateObj를 기반으로합니다. 테이블의 날짜는 dateobj의 연도 및 월에 해당하는 모든 No. 1의 모든 정보를 취한 다음, 테이블의 첫 번째 행에서 1 위의 위치를 결정하여 전달의 마지막 며칠의 데이터를 뒤집고 이번 달과 다음 달의 데이터가 다시 추진됩니다.
특정 단계 :
1. DateObj 변수를 선언하고 초기 값을 현재 시스템 시간에 할당합니다.
2. 캘린더 Div에서 HTML 요소 렌더링
3. DateObj를 통해 달의 첫 번째 정보를 가져 와서 테이블의 모든 날짜를 가로 지르십시오.
4. 이전 달과 다음 달 아이콘의 이벤트 바인드
(function () { /** 날짜를 기록하는 데 사용됩니다. 표시되면 dateobj* / var dateobj = ()의 날짜와 월에 따라 표시됩니다. } () (); // TITLE BOX는 다음 달에 var bodybox = createElement ( "div")의 제목을 설정합니다. // 테이블 영역은 html titlebox = 'calendar-title-box'; id = 'calendartitle'> </span> " +"<span id = 'nextmonth'class = 'next month'> </span> "; calendar.appendChild (titlebox); // calendar div에 추가 // 테이블 영역의 html 구조를 설정합니다. </th> " +"<th> 2 </th> " +"<Th> Three </th> " +"<Th> " +"<Th> " +"<Th> " +"</tr> "; = 0; i <6) {_bodyhtml + = "<tr>" + "<td> </td>" + "<td> <td> </td> " +"<td> </td> " +"</tr> "; 클래스 이름*/ function showcalendardata () {var _year = dateObj.getDate (). var _DONTH = DATEOBJ.GETDATE (); getElementById ( "Calendartitle"); _table.getEmentsByTagName ( "TD"); _ -YEAR, _MONTH -1, 1); _thisdaystr = _THSDDS [i] day_tds [classname = 'currentday'} else if (_thisdaystr.substr (0, 6) .substr (0, 6)) {. } / *** 다음 달의 이벤트* / fort indeplevent (var prevmonth addevent (dom, etype, func) {if (dom.addeventListener) {// dom 2.0 dom.addeventListener (E) {func (e); // dom [on + etype] = funce (e)}}} * / function toprevmonth () {var date = dateObj.getDate () / *** 다음 달의 아이콘을 클릭하여 tonextmonth () {var date = dateobj.getDate (date.get.getlyear (), ggetmonth () + 1, 1); getDatest (var _ var _D); ( "0" + _d);이 예에서는 테이블에서 날짜를 클릭 할 때의 이벤트가 추가되지 않습니다. 다음 코드를 Bindevent 함수에 추가하여 클릭 된 날짜에 대한 정보를 얻을 수 있습니다.
var table = document.getElementById ( "calendArledable"); var tds = table.getElementsByTagName ( 'td'); for (var i = 0; i <tds.length; i ++) {addevent (tds [i], 'click', function (e) {console.log (e.target.getAttrippute ( 'data'));위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.