최근에 나는 JS 날짜에 대한 몇 가지 기능을 살펴보고 갑자기 달력 제어를 생각했습니다. 그래서 나는 하나를 쓰려고 노력했다. 배경 프로그래머로서 저는 수준에서 제한됩니다. 학습 태도를 취하고 내가 쓴 예를 살펴 보겠습니다. 함께 진전을 이루기 위해 함께 배우자!
첫째, 일반적으로 사용되는 날짜 기능 :
날짜 (연도, 월, 일)
var date = 새 날짜 ();
한 해를 가지십시오
var year = this.date.getlyear ();
월, 월별 색인이 있으므로 +1이 필요합니다.
var month = this.date.getmonth ()+1;
취득 날짜는 얼마입니까?
var day = this.date.getDate ();
요일을 받고, 반환 0. 일요일 1. 월요일 2. 화요일 3. 수요일 4. 목요일 5. 금요일 6. 토요일 토요일.
var Week = this.date.getday ();
그 달에 어떤 요일을 얻으십시오
var getweekday = function (연도, 월, 일) {var date = 새 날짜 (연도, 월, 일); 반환 날짜 .getday (); } var weekstart = getweekday (this.year, this.month-1, 1)매월 일수를 얻으십시오
var getmonthdays = function (연도, 월) {var date = 새 날짜 (연도, 월, 0); 반환 날짜 .getDate (); } var monthdays = this.getmonthdays (this.year, this.month);좋아, 우리는 너무 많은 매개 변수 만 사용했습니다. 다음은 실제로 일주일에 해당하는 날짜, 동적 스 플라이 싱 레이블에 대한 일부 작업 및 판단입니다. 내가 쓴 예제를 직접 게시합시다.
생식 이미지 :
<html> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"> <head> <style type = "text/css"> td {text-align : center;} </style> <script type = "text/javascript"> window.onload () {var calender = {function () { this.init.apply (this, harments); } calender.prototype = {init : 함수 (컨테이너, 옵션) {this.date = new Date (); this.year = this.date.getlyear (); this.month = this.date.getmonth ()+1; this.day = this.date.getDate (); this.week = this.date.getday (); this.weekstart = this.getWeekday (this.year, this.month-1, 1); this.monthdays = this.getmonthdays (this.year, this.month); this.containerDiv = document.getElementById (컨테이너); this.options = 옵션! = null? 옵션 : {테두리 : '1px solid green', 너비 : '400px', 높이 : '200px', BackgroundColor : 'lightgrey', fontcolor : 'blue'}}, getmonthdays : function (연도, 월) {var date = new date (연도, 월, 0); 반환 날짜 .getDate (); }, getweekday : function (연도, 월, 일) {var date = 새 날짜 (연도, 월, 일); 반환 날짜 .getday (); }, view : function () {var tablest = '<pable>'; Tablest+= '<tr> <td colspan = "3"> </td> <td> 년 :'+this.year+'</td> <td colspan = "3"> Month :'+this.month+'</td> </tr>'; Tablestr+= '<tr> <td> day </td> <td> 둘 </td> <td> Four </td> <td> 5 </td> <td> Six </td> </tr>'; var index = 1; // 매월 첫날이 var style = ''인 곳을 판단하십시오. if (this.weekstart <7) {tableStrest+= '<tr>'; for (var i = 0; i <this.weekstart; i ++) {tableStret+= '<Td> </td>'; }; for (var i = 0; i <7-this.weekstart; i ++) {style = this.day == (i+1)? "배경색 : 녹색;": ""; 색인 ++; TableStrs+= '<td style = "'+style+'"val ='+(this.year+'-'+this.month+'-'+(i+1))+'>'+(i+1)+'</td>'; }; TableStrest+= '</tr>'; } /// 나머지 일에 해당하는 위치 // 정수 행을 판단하고 해당 위치 var var this. this.monthdays- (7-this.weekstart)에 해당합니다. var row = math.floor (나머지%7 == 0? 나머지 날/7 : ((나머지/7) +1); var count = math.floor (나머지/7); for (var i = 0; i <count; i ++) {tableStrest+= '<tr>'; for (var k = 0; k <7; k ++) {style = this.day == (index+k)? "배경색 : 녹색;": ""; Tabest+= '<td style = "'+style+'" "val ='+(this.year+'-'+this.month+'-'+(index+k))+'>'; tableStres+= index+k; tablestr+= '</td>';}; tablest+= '</tr>'; index+= 7;};};};};};}; 남은 this. TableStrest+= 색인; 탁자+= '</td>'; 색인 ++; }; TableStrest+= '</tr>'; 탁자+= '</table>'; 반환 탁자; }, render : function () {var calendardiv = document.createElement ( 'div'); Calendardiv.style.border = this.options.border; Calendardiv.style.width = this.options.width; Calendardiv.style.height = this.options.height; Calendardiv.style.cursor = '포인터'; Calendardiv.style.backgroundColor = this.Options.backgroundColor; // calendardiv.style.color = this.options.fontColor; Calendardiv.style.color = '빨간색'; Calendardiv.onclick = function (e) {var evt = e || window.event; var target = evt.srcelement || evt.target; if (target && target.getAttribute ( 'val')) {alert (target.getAttribute ( 'val')); }} var tablest = this.view (); 이 .Tabrest = Tablest; Calendardiv.innerhtml = 탁자; var div = document.createelement ( 'div'); div.style.width = 'auto'; div.style.height = 'Auto'; Div.AppendChild (CalenderDiv); /// Page Div var PagerDiv = document.createElement ( 'div'); PagerDiv.style.width = 'Auto'; PagerDiv.style.height = 'Auto'; var that = this; /// 매개 변수 var resetpara = function (연도, 월, 일) {that.date = 새 날짜 (연도, 월, 일); that.year = that.date.getsyear (); that.month = that.date.getmonth ()+1; that.day = that.date.getDate (); that.week = that.date.getday (); that.weekstart = that.getweekday (that.year, that.month-1, 1); monthdays = that.getmonthdays (that.year, that.month); } // 이전 페이지 var prebtn = document.createElement ( 'input'); prebtn.type = '버튼'; prebtn.value = '<'; prebtn.onclick = function () {that.containerdiv.removechild (div); Resetpara (그. that.render (); } // 다음 페이지 var nextbtn = document.createElement ( 'input'); nextBtn.type = '버튼'; nextBtn.Value = '>'; nextBtn.onclick = function () {that.containerDiv.RemoveChild (div); Resetpara (그. that.render (); } pagerdiv.appendChild (prebtn); PagerDiv. AppendChild (NextBtn); Div.AppendChild (PagerDiv); var dropdiv = document.createElement ( 'div'); var dropdivstr = ''; // 연도 선택 dropdivstr+= '<select id = "ddlyear">'; for (var i = 1900; i <= 2100; i ++) {dropdivstr+= i = i == that.year? '<옵션 값 = "'+i+'"selected = "true">'+i+'</옵션>': '옵션 값 = "'+i+'">'+i+'</옵션>'; }; dropdivstr+= '</select>'; // 월을 선택하여 dropdivstr+= '<select id = "ddlmonth">'; for (var i = 1; i <= 12; i ++) {dropdivstr+= i = i == that.month? '<옵션 값 = "'+i+'"selected = "true">'+i+'</옵션>': '옵션 값 = "'+i+'">'+i+'</옵션>'; }; dropdivstr+= '</select>'; dropdiv.innerhtml = dropdivstr; Div.AppendChild (DropDiv); that.containerdiv. AppendChild (div); /// 연도 및 월을 선택한 이벤트 var var ddlchange = function () {var ddlyear = document.getElementById ( 'ddlyear'); var ddlmonth = document.getElementById ( 'ddlmonth'); var yearindex = ddlyear.selectedIndex; var year = ddlyear.options [yearindex] .Value; var monthindex = ddlmonth.selectedIndex; var month = ddlmonth.options [monthindex] .Value; that.containerdiv.removechild (div); Resetpara (연도, Month-1, Th.day); that.render (); } ddlyear.onchange = function () {ddlchange (); } ddlmonth.onchange = function () {ddlchange (); }}} var calendar = new Calender ( 'dvtest', {border : '1px solid green', 너비 : '400px', 높이 : '200px', backgroundColor : ''}); calendar.render (); } </script> </head> <hod> <div id = "dvtest"> </div> </body> </html>코드가 다시 변경되었고 IE의 TableInnerHTML의 읽기 전용 문제를 해결하기 위해 뷰의 테이블이 DIV로 대체되었습니다. 또한 구성 가능성을 위해 옵션이 추가됩니다.
위의 코드에는 간단한 설명이 있으며 기능이 가장 기본적입니다. 깊이 있으면 확장 할 수 있습니다. 이 기사가 당신에게 영감을 줄 수 있기를 바랍니다.