Demand generation problem: Originally want to find a JS code on the Internet, but found either too complex, or bad control, or bad compatibility ...
Problem Analysis: The discovery is not excellent is the best .... It is the best that suits you.
Problem solving: Decide to write a calendar function yourself.
Code rendering:
Calendar Main Program
Copy Code code as follows:
var calendar={
Str:function () {with (This.data) return "" +y+ "year," +m+ "month," +d+ "number, week" +wn[w ";
V:function (O,SPLI,SX) {with (this) return o[sx]= "" +data. Y+spli+data. M+spli+data. D},
T:function () {with [this] return data. 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)},
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= "<table height=100% width=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%data. Rowlen,title,css;
if (!BR) {table+= "</tr><tr>"};
Data. Arr[i]?title=data. y+ "-" +data. m+ "-" +showtext:title= "";
String (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 = now. FirstDayOfWeek ();
Data. Ymd=now;data. Y=now.getfullyear ();
Data. M=now.getmonth () +1;data. D=now.getdate ();d ATA. W=now.getday ();
while (Arr.length!=firstdayofweek) {Arr.push (FALSE)}
for (Var i=0;i<lastday;i++) {Arr.push (i+1)}
while (Arr.length%data. 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 = ["0", "one", "two", "three", "four", "five", "six", "seven", "eight", "Nine", "Ten", "11", "12"];
Data. WN = ["Day", "one", "two", "three", "four", "five", "six"];
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 ())
}}
}
Code Application Explanation:
Copy Code code as follows:
var aa=new calendar ()//Create a new one
Aa.init ()//Calendar Initial
Copy Code code as follows:
Obj.innerhtml=aa. STR ()//Display date string
Obj.innerhtml=aa. T ()//Display table
Aa.dny ()//next year
Aa.upy ()//Last year
AA.DNM ()/next month
AA.UPM ()//Last month
Aa.day (number)/change the calendar display of the date (numbers need to pass a numeric parameter)
This calendar object implements the core functional functions of the calendar,
Specifically where the calendar is placed,
Which event triggers which function this I didn't write,
In that case, I would lose my original purpose of writing this calendar.
How come everybody's not responding, let me get an example, everybody take a look
Copy Code code as follows:
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<TITLE>JS Calendar Effect-wangzf</title>
<style>
html,body{height:100%;width:100%;}
*{margin:0;padding:0;}
. calendarbox{width:100%;}
#calendar_control {background: #a3a3b4;}
#calendar_control Input{min-width:inherit;}
#calendarBox {width:100%;height:100%;}
#calendar_str {cursor:pointer;text-align:center;font-weight:lighter;}
#calendar_body td{background: #f0f0f0; cursor:pointer;}
#calendar_body td.taday{background: #0CF;}
#calendar_body td.hot{background: #FF6;}
#calendar_body th{background: #3f526f; color: #fff;}
#calendar_body TD, #calendar_body Th{text-align:center;}
</style>
<script>
var calendar={
Str:function () {with (This.data) return "" +y+ "year," +m+ "month," +d+ "number, week" +wn[w ";
V:function (spli) {with [This] return "" +data. Y+spli+data. M+spli+data. D},
T:function () {with [this] return data. 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)},
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= "<table height=100% width=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%data. 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}
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 = now. FirstDayOfWeek ();
Data. Ymd=now;data. Y=now.getfullyear ();
Data. M=now.getmonth () +1;data. D=now.getdate ();d ATA. W=now.getday ();
while (Arr.length!=firstdayofweek) {Arr.push (FALSE)}
for (Var i=0;i<lastday;i++) {Arr.push (i+1)}
while (Arr.length%data. 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 = ["0", "one", "two", "three", "four", "five", "six", "seven", "eight", "Nine", "Ten", "11", "12"];
Data. WN = ["Day", "one", "two", "three", "four", "five", "six"];
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" cellspacing= "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= "Previous year" value= "<<" id= "Calendar_upy"/>
<input type= "button" title= "Previous month" value= "<" id= "CALENDAR_UPM"/></th>
<th width= "56%" id= "Calendar_str" scope= "col" title= "click Back to return today." ></th>
<th width= "24%" align= "right" scope= "col" >
<input type= "button" title= "next year" value= ">>" id= "Calendar_dny"/>
<input type= "button" title= "next month" value= ">" id= "calendar_dnm"/></th>
</tr>
</table></td>
</tr>
<tr>
<TD height= "90%" id= "Calendar_body" ></td>
</tr>
</table>
<script>
Calendar.init ()
function Calendarchange () {
var Calendar_body=document.getelementbyid ("Calendar_body")
Calendar_body.innerhtml=calendar. T ()//Display table
var Calendar_str=document.getelementbyid ("Calendar_str")
Calendar_str.innerhtml=calendar. STR ()//Display date string
Calendarcontrol ()//Call Calendar control
}
Calendarchange ()//Calendar update
function Calendarcontrol () {
var Calendar_str=document.getelementbyid ("Calendar_str")
Calendar_str.onclick=function () {calendar.init (); Calendarchange ()}//returns today's feature implementation
var Calendar_dny=document.getelementbyid ("Calendar_dny")
Calendar_dny.onclick=function () {Calendar.dny (); Calendarchange ()}//next year function implementation
var Calendar_dnm=document.getelementbyid ("Calendar_dnm")
Calendar_dnm.onclick=function () {calendar.dnm (); Calendarchange ()}//next month function implementation
var Calendar_upy=document.getelementbyid ("Calendar_upy")
Calendar_upy.onclick=function () {calendar.upy (); Calendarchange ()}//last year feature implementation
var Calendar_upm=document.getelementbyid ("CALENDAR_UPM")
Calendar_upm.onclick=function () {calendar.upm (); Calendarchange ()}//last month feature implementation
var Calendar_day=document.getelementbyid ("Calendar_body"). getElementsByTagName ("TD");
for (var i in Calendar_day) {calendar_day[i].onclick=function () {var n=number (this.innertext); if (n) {calendar.day (n); Calendarchange ()}}}//Day Date function implementation
}
</script>
</body>
