js 달력 기능 object_javascript 기술

수요로 인한 문제: 원래 인터넷에서 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%>"
for(var i=0;i"; }
for(var i in data.ARR){var showText=data.ARR[i]||" ",br=i�ta.ROWLEN,title,css
if(!br){table ="< ;/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 ="" showText ""
}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;iwhile(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,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;}
<스크립트>
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%>"
for(var i=0;i";}
for(var i in data.ARR){var showText=data.ARR[i]||" ",br=i�ta.ROWLEN,title,css=" ";
if(!br){table =""};
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 }
테이블 ="" showText "";
}테이블 =""
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;iwhile( 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())
}}
}










<스크립트>
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()}}} //当天日期 功能实现
}

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

이전 기사：JSON 데이터 format_json 소개다음 기사：JSON 데이터 format_json 소개

관련 기사

더보기

• Bootstrap 목록 그룹 구성 요소에 대한 심층 분석
• JavaScript 함수 커링에 대한 자세한 설명
• JS 비밀번호 생성 및 강도 감지의 전체 예(데모 소스 코드 다운로드 포함)
• Angularjs는 WeChat UI(weui)를 통합합니다.
• JavaScript를 사용하여 중국어 번체와 중국어 간체 간을 빠르게 전환하는 방법과 중국어 간체와 중국어 번체 간 전환을 지원하는 웹사이트의 요령_javascript 기술

공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！

회사 소개부인 성명Sitemap

© php.cn All rights reserved