js 달력 기능 object_javascript 기술-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

js 달력 기능 object_javascript 기술

May 16, 2016 pm 05:57 PM

달력

수요로 인한 문제: 원래 인터넷에서 js 코드를 찾고 싶었지만 너무 복잡하거나, 제어하기 어렵거나, 호환성이 좋지 않다는 것을 발견했습니다...
문제 분석: 우수하거나 우수한 것으로 나타났습니다. 아니면 최고... 당신에게 어울리는 것이 최고입니다.
문제 해결 방법: 달력 기능을 직접 작성하기로 결정했습니다.
코드 제시:
캘린더 메인 프로그램

코드 복사 코드는 다음과 같습니다.

 
 var Calendar={ 
STR:function(){with(this.data)return "" Y "연도," M "월," D "숫자, 주" WN[W];}, 
V: 함수(o,spli,sx){with(this)return o[sx]="" data.Y spli data.M spli data.D}, 
T:function(){with(this) 데이터를 반환합니다. TABLE}, 
dnY:function(){with(this){calendarChange(data.Y 1,data.M-1,data.D)}}, 
dnM:function(){with (이) {calendarChange(data.Y,data.M,data.D)}}, 
upY:function(){with(this){calendarChange(data.Y-1,data.M-1,data .D) }}, 
upM:function(){with(this){calendarChange(data.Y,data.M-2,data.D)}}, 
day:function(o){with (이) {data.D=o;calendarChange(data.Y,data.M-1,data.D)}}, 
data:{Y:null,M:null,D:null,W:null ,H: null,U:null,YMD:null,YMD_C:"hot",ARR:null,TABLE:null,MN:null,WN:null,SELECT:null,TADAY:new Date(),TADAY_C:"taday ",ROWLEN :7,VALUE:null}, 
creatTable:function(){with(this){ 
var table="<테이블 높이=100% 너비=100%><tr>" 
 for(var i=0;i<data.ROWLEN;i ){var t=data.WN[i]||" ";table ="<th>" t "</th>"; } 
for(var i in data.ARR){var showText=data.ARR[i]||" ",br=i�ta.ROWLEN,title,css 
if(!br){table ="&lt ;/tr><tr>"}; 
data.ARR[i]?title=data.Y "-" data.M "-" showText:title="" 
문자열( data.TADAY .getDate())==String(data.ARR[i])? 
(data.YMD.getFullYear()==data.TADAY.getFullYear()&&data.YMD.getMonth()==data .TADAY.getMonth()&&data.YMD.getDate()==data.TADAY.getDate())? 
css=data.TADAY_C " " data.YMD_C:css=data.YMD_C:css="" 
table ="<td title='" title "' class=" css ">" showText "</td>" 
}table ="</tr></table>" 
 data.TABLE=table;return table; 
}}, 
calendarStarArr:function(userY,userM,userD){with(this){ 
var Arr=[] 
var now = new Date(userY,userM,userD); 
var LastDay = now.getLastDay(); 
var FirstDayofWeek() 
data.YMD=now;data.Y=now .getFullYear( ); 
data.M=now.getMonth() 1;data.D=now.getDate();data.W=now.getDay() 
while(Arr.length!=FirstDayofWeek) ){Arr .push(false)} 
for(var i=0;i<LastDay;i ){Arr.push(i 1)} 
while(Arr.length�ta.ROWLEN!=0) {Arr.push(false)} 
data.ARR=Arr; return Arr; 
}}, 
calendarChange:function(userY,userM,userD){with(this){ 
calendarStarArr( userY,userM ,userD);creatTable() 
}}, 
calendarStar:function(userY,userM,userD){with(this){ 
data.MN = ["zero","one" ,"2","3","4","5","6","7","8","9","10","11","12"] 
데이터 . WN = ["일","일","이","삼","사","오","六"] 
calendarChange(userY,userM,userD); , 
init:function(){with(this){ 
Date.prototype.getLastDay=function(){return(new Date(this.getFullYear(),this.getMonth() 1,0).getDate ( ))} 
Date.prototype.FirstDayofWeek=function(){return(new Date(this.getFullYear(),this.getMonth(),1).getDay())} 
calendarStar(new Date( ) .getFullYear(),new Date().getMonth(),new Date().getDate()) 
}} 
} 

 

코드 적용 설명:

코드 복사 코드는 다음과 같습니다.

var aa=new Calendar()//새 달력 만들기 
aa .init()//캘린더 초기화

코드 복사 코드는 다음과 같습니다.

obj.innerHTML=aa.STR()//날짜 문자열 표시
obj.innerHTML=aa.T()//테이블 표시
aa.dnY()//다음 연도
aa .upY()//전년도
aa.dnM()//다음 달
aa.upM()//이전 달
aa.day(숫자)//변경 캘린더 표시 숫자(숫자 매개변수를 전달해야 하는 숫자) 

 

이 캘린더 개체는 캘린더의 핵심 기능을 구현합니다.
특히 캘린더가 배치된 위치,
어떤 이벤트가 트리거되는지 function 저는 이것을 쓰지 않았습니다.
그렇다면 이 달력을 쓴 본래의 목적을 잃게 될 것입니다.
왜 아무도 응답하지 않았나요? 예를 들어 보겠습니다.

코드를 복사하세요. 코드는 다음과 같습니다.

 
<html> 
<머리> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>js日历效果-wangzf</title> 
</head> 
<스타일> 
html,body{높이:100%;너비:100%;} 
*{margin:0;padding:0;} 
.calendarBox{너비:100%;} 
#calendar_control{ 배경:#a3a3b4;} 
#calendar_control 입력{min-width:inherit;} 
#calendarBox{width:100%;height:100%;} 
#calendar_str{cursor:pointer;text-align :center;font-weight:lighter;} 
#calendar_body td{배경:#f0f0f0;cursor:pointer;} 
#calendar_body td.taday{배경:#0CF;} 
#calendar_body td.hot {배경:#FF6;} 
#calendar_body th{배경:#3f526f;color:#fff;} 
#calendar_body td,#calendar_body th{text-align:center;} 
</style> ; 
<스크립트> 
var Calendar={ 
STR:function(){with(this.data)return "" Y "年，" M "月，" D "号，星期" WN[W];}, 
V:함수(spli){with(this)return "" 데이터.Y spli 데이터.M spli 데이터.D}, 
T:function(){with(this)return 데이터.TABLE}, 
 dnY:function(){with(this){calendarChange(data.Y 1,data.M-1,data.D)}}, 
dnM:function(){with(this){calendarChange(data.Y ,data.M,data.D)}}, 
upY:function(){with(this){calendarChange(data.Y-1,data.M-1,data.D)}}, 
 upM:function(){with(this){calendarChange(data.Y,data.M-2,data.D)}}, 
day:function(o){with(this){data.D=o ;calendarChange(data.Y,data.M-1,data.D)}}, 
데이터:{Y:null,M:null,D:null,W:null,H:null,U:null, YMD:null,YMD_C:"hot",ARR:null,TABLE:null,MN:null,WN:null,SELECT:null,TADAY:new Date(),TADAY_C:"taday",ROWLEN:7,VALUE:null }, 
creatTable:function(){with(this){ 
var table="<테이블 높이=100% 너비=100%><tr>" 
for(var i=0;i<data.ROWLEN;i ){var t=data.WN[i]||" ";table ="<th>" t "</th>";} 
for(var i in data.ARR){var showText=data.ARR[i]||" ",br=i�ta.ROWLEN,title,css=" "; 
if(!br){table ="</tr><tr>"}; 
data.ARR[i]?title=data.Y "-" data.M "-" showText:title=""; 
if(String(data.D)==String(data.ARR[i])){css =" " data.YMD_C;} 
if(data.YMD.getFullYear()==data.TADAY .getFullYear()&&data.YMD.getMonth()==data.TADAY.getMonth()&&String(data.TADAY.getDate())==String(data.ARR[i])){css=" " data.TADAY_C } 
테이블 ="<td title='" 제목 "' class=" css ">" showText "</td>"; 
}테이블 ="</tr></table>" 
data.TABLE=테이블;테이블 반환; 
}}, 
calendarStarArr:function(userY,userM,userD){with(this){ 
var Arr=[]; 
var now = new Date(userY,userM,userD); 
var LastDay = now.getLastDay(); 
var FirstDayofWeek = now.FirstDayofWeek(); 
data.YMD=now;data.Y=now.getFullYear(); 
data.M=now.getMonth() 1;data.D=now.getDate();data.W=now.getDay(); 
while(Arr.length!=FirstDayofWeek){Arr.push(false)} 
for(var i=0;i<LastDay;i ){Arr.push(i 1)} 
while( Arr.length�ta.ROWLEN!=0){Arr.push(false)} 
data.ARR=Arr;return Arr; 
}}, 
calendarChange:function(userY,userM,userD){with(this){ 
calendarStarArr(userY,userM,userD);creatTable() 
}}, 
calendarStar :function(userY,userM,userD){with(this){ 
data.MN = ["零","一","two","三","四","五","六" ,"七","八","九","十","十一","十이"]; 
data.WN = ["일","일","이","삼","사","오","六"]; 
calendarChange(userY,userM,userD); 
}}, 
init:function(){with(this){ 
Date.prototype.getLastDay=function(){return(new Date(this.getFullYear(),this.getMonth() 1 ,0).getDate())} 
Date.prototype.FirstDayofWeek=function(){return(new Date(this.getFullYear(),this.getMonth(),1).getDay())} 
 CalendarStar(new Date().getFullYear(),new Date().getMonth(),new Date().getDate()) 
}} 
}
</script> 
<body id="body"> 
<table width="100%" height="100%" border="0" cellpacing="0" cellpadding="0"> 
<tr height="10%"> 
<td><table width="100%" height="100%" border="0"cellspacing="0" cellpadding="0" id="calendar_control"> 
<tr> 
<th width="20%" align="left"scope="col"> 
<input type="button" title="상일년" value="<<" id="calendar_upY" /> 
<input type="button" title="상일월" value="<" id="calendar_upM" /></th> 
<th width="56%" id="calendar_str"scope="col" title="点击返回今天."></th> 
<th width="24%" align="right"scope="col"> 
<input type="button" title="下一年" value=">>" id="calendar_dnY" /> 
<input type="button" title="下一月" value=">" id="calendar_dnM" /></th> 
</tr> 
</table></td> 
</tr> 
<tr> 
<td height="90%" id="calendar_body"></td> 
</tr> 
</테이블> 
<스크립트> 
calendar.init() 
함수 CalendarChange(){ 
var Calendar_body=document.getElementById("calendar_body") 
calendar_body.innerHTML=calendar.T()//显示表格 
var Calendar_str=document.getElementById("calendar_str") 
calendar_str.innerHTML=calendar.STR()//显示日期字符串 
calendarControl()//调用日历控제 
} 
calendarChange()/ /日历更新 
function CalendarControl(){ 
var Calendar_str=document.getElementById("calendar_str") 
calendar_str.onclick=function(){ Calendar.init();calendarChange()}//返回今天功能实现 
var Calendar_dnY=document.getElementById("calendar_dnY") 
calendar_dnY.onclick=function(){ Calendar.dnY();calendarChange()}//下一年 功能实现 
var Calendar_dnM= document.getElementById("calendar_dnM") 
calendar_dnM.onclick=function(){ Calendar.dnM();calendarChange()}//下一月 功能实现 
var Calendar_upY=document.getElementById("calendar_upY") 
calendar_upY.onclick=function(){ Calendar.upY();calendarChange()}//上一年 功能实现 
var Calendar_upM=document.getElementById("calendar_upM") 
calendar_upM.onclick=function (){ Calendar.upM();calendarChange()}//上一月 功能实现 
var Calendar_day=document.getElementById("calendar_body").getElementsByTagName("td"); 
for(variable i in Calendar_day){calendar_day[i].onclick=function(){var N=Number(this.innerText);if(N){calendar.day(N);calendarChange()}}} //当天日期 功能实现 
} 
</script> 
</body> 
</html> 