나는 최근에 프로젝트를 위해 서두르고있다. 이 프로젝트는 마침내 안정적인 상태에 있으며 수정 만 가능합니다. 배경 프로그래머로서 저는 정말 힘들어요. 웹에서 모바일 인터페이스에 이르기까지 모든 것을 써야합니다. . . 나는 이틀 동안 마침내 유휴 상태였다. 나는 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 donthdays = this.getmonthdays (this.year, this.month);
좋아, 우리는 너무 많은 매개 변수 만 사용했습니다. 다음은 실제로 일주일에 해당하는 날짜, 동적 스 플라이 싱 레이블에 대한 일부 작업 및 판단입니다. 내가 쓴 예제를 직접 게시합시다.
코드 사본은 다음과 같습니다.
<html>
<meta http-equiv = "content-type"content = "text/html; charset = utf-8">
<헤드>
<스타일 유형 = "텍스트/CSS">
td {텍스트-정렬 : 중심;}
</스타일>
<script type = "text/javaScript">
Window.onload = function () {
var calender = function () {
this.init.apply (this, harments);
}
Calender.prototype = {
init : 함수 (컨테이너, 옵션) {
this.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',
BuckgrendColor : 'Lightgrey',
FontColor : 'Blue'
}
},
getmonthdays : function (연도, 월) {
var date = 새 날짜 (연도, 월, 0);
반환 날짜 .getDate ();
},
getweekday : 기능 (연도, 월, 일) {
var date = 새 날짜 (연도, 월, 일);
반환 날짜 .getday ();
},
보기 : function () {
var tablest = '<pable>';
Tablest+= '<tr> <td colspan = "3"> </td> <td> 년 :'+this.year+'</td> <td colspan = "3"> Month :'+this.month+'</td> </tr>';
TableStres+= '<tr> <td> day </td> <td> one </td> <td> 둘 </td> <td> Three </td> <td> 5 </td> <td> Six </td> </tr>';
var index = 1;
// 매월 첫날이 어디에 있는지 판단하십시오
var style = '';
if (this.weekstart <7)
{
탁자+= '<tr>';
for (var i = 0; i <this.weekstart; i ++) {
TableStres+= '<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 나머지 날짜 = 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 ++) {
탁자+= '<tr>';
for (var k = 0; k <7; k ++) {
스타일 = this.day == (index+k)? "배경색 : 녹색;": "";
TableStrs+= '<td style = "'+style+'"val ='+(this.year+'-'+this.month+'-'+(index+k))+'>';
탁자+= 색인+k;
탁자+= '</td>';
};
TableStrest+= '</tr>';
색인+= 7;
};
// 남은 날의 해당 위치 (일주일의 해당 일을 채울 수 없습니다)
var remaincols = this.monthdays- (색인 -1);
탁자+= '<tr>';
for (var i = 0; i <남은 콜스; i ++) {
스타일 = this.day == 색인? "배경색 : 녹색;": "";
TableStres+= '<td style = "'+style+'"val ='+(this.year+'-'+this.month+'-'+(index))+'>';
TableStrest+= 색인;
탁자+= '</td>';
색인 ++;
};
TableStrest+= '</tr>';
탁자+= '</table>';
반환 탁자;
},
렌더 : 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);
/// 페이지 회전 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 == that.year
? '<옵션 값 = "'+i+'"selected = "true">'+i+'</옵션>'
: '<옵션 값 = "'+i+'">'+i+'</옵션>';
};
dropdivstr+= '</select>';
// 월을 선택하십시오
dropdivstr+= '<select id = "ddlmonth">';
for (var i = 1; i <= 12; i ++) {
dropdivstr+=
나는 == That.month
? '<옵션 값 = "'+i+'"selected = "true">'+i+'</옵션>'
: '<옵션 값 = "'+i+'">'+i+'</옵션>';
};
dropdivstr+= '</select>';
dropdiv.innerhtml = dropdivstr;
Div.AppendChild (DropDiv);
that.containerdiv. AppendChild (div);
/// 연도와 월을 선택한 이벤트를 바인딩합니다
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 (Year, Month-1, That.day);
that.render ();
}
ddlyear.onchange = function () {
ddlchange ();
}
ddlmonth.onchange = function () {
ddlchange ();
}
}
}
var calendar = new Calender ( 'dvtest', {
국경 : '1px solid green',
너비 : '400px',
높이 : '200px',
BackgroundColor : ''
}
);
calendar.render ();
}
</스크립트>
</head>
<body>
<div id = "dvtest"> </div>
</body>
</html>
코드가 다시 변경되었고 IE의 TableInnerHTML의 읽기 전용 문제를 해결하기 위해 뷰의 테이블이 DIV로 대체되었습니다. 또한 구성 가능성을 위해 옵션이 추가됩니다.
위의 코드에는 간단한 설명이 있으며 기능이 가장 기본적이며 더 깊이있는 경우 확장 할 수 있습니다.