Google's friends who often use google will surely remember the beautiful calendar controls of google, so we will also implement a process. Although the functions and effects are not comparable, what is important is the implementation process.
The following is the html structure to be implemented::
<Div id = "a"> <div id = "head"> <span id = "yface"> year: <select id = "year"> </select> </span> <span id = "mface"> month: <select id = "month"> </select> </span> </div> <div id = "biaoti"> </div> <div id = "body"> </div>
Let's talk about the calendar query algorithm:
W = y + parseInt (y/4) + parseInt (c/4)-2 * c + parseInt (26 * (m + 1)/10) + D-1;
The following is a detailed description of the process. If you are interested, you can look at it:
Http://www.jb51.net/article/32572.htm
The following javascript code is implemented::
Copy codeThe Code is as follows: sx. activex. calender = {
Bind: function (target ){
Var a = document. createElement ("div ");
Var head = document. createElement ("div ");
Var biaoti = document. createElement ("div ");
Var select = document. createElement ("select ");
Var yface = document. createElement ("span ");
Var mface = document. createElement ("span ");
Var body = document. createElement ("div ");
Var select1 = document. createElement ("select ");
Yface. appendChild (select );
Mface. appendChild (select1 );
Head. appendChild (yface );
Head. appendChild (mface );
A. appendChild (head );
A. appendChild (biaoti );
A. appendChild (body );
Yface. insertBefore (document. createTextNode ("year"), yface. firstChild)
Mface. insertBefore (document. createTextNode ("month"), mface. firstChild)
A. style. position = "absolute ";
Biaoti. style. height = "10% ";
For (var I = 0; I <7; I ++ ){
Var can = document. createElement ("span ")
Can. style. width = "14% ";
You can. style. height = "100% ";
Can. style. textAlign = "center ";
Biaoti. appendChild (can );
}
Biaoti. all [0]. innerText = "day"
Biaoti. all [1]. innerText = "1"
Biaoti. all [2]. innerText = "2"
Biaoti. all [3]. innerText = "3"
Biaoti. all [4]. innerText = "4"
Biaoti. all [5]. innerText = "5"
Biaoti. all [6]. innerText = "6"
Head. style. height = "20% ";
A. style. position = "absolute ";
A. style. height = "200px ";
A. style. width = "302px ";
A. style. border = "1px red solid ";
Yface. style. width = "50% ";
Yface. style. padding = "5px ";
Yface. style. height = "100% ";
Select. style. width = "80% ";
For (var I = 1960; I <2010; I ++ ){
Var option = document. createElement ("option ");
Option. text = I;
Select. add (option );
}
Mface. style. width = "50% ";
Mface. style. padding = "5px ";
Mface. style. height = "100% ";
Select1.style. width = "80% ";
For (var I = 1; I <= 12; I ++ ){
Var option = document. createElement ("option ");
Option. text = I;
Select1.add (option );
}
Body. style. height = "70% ";
For (var I = 0; I <42; I ++ ){
Var span = document. createElement ("span ");
Span. style. width = "14% ";
Span. style. height = "16% ";
Span. style. textAlign = "center ";
Span. onmouseover = function (){
This. style. cursor = "hand ";
This. tempcolor = this. style. backgroundColor;
This. style. backgroundColor = "lightblue ";
}
Span. onmouseout = function (){
This. style. backgroundColor = this. tempcolor;
}
Span. onclick = function (){
Target. value = select. options [select. selectedIndex]. text + "year" + select1.options [select1.selectedIndex]. text + "month" + this. innerText + "day ";
A. parentNode. removeChild ();
}
Body. appendChild (span );
}
Select. onchange = function (){
For (var o in body. all ){
Body. all [o]. innerText = "";
If (o. toString ()! = "Length ")
Body. all [o]. style. backgroundColor = "";
}
Var year1 = this. options [this. selectedIndex]. text;
Var month1 = select1.options [select1.selectedIndex]. text;
Var y = parseInt (year1.substr (2, 2)-0 );
Var c = parseInt (year1.substr (0, 2 ));;
Var m = parseInt (month1 );;
M = m> = 3? M :( y = Y-1, m + 12 );
Var d = 1;
Var w = y + parseInt (y/4) + parseInt (c/4)-2 * c + parseInt (26 * (m + 1)/10) + D-1;
If (w <0) w = w + 700;
W = w % 7;
Switch (parseInt (month1 )){
Case 2:
If (parseInt (year1) % 4 = 0)
Var r = 29;
Else
Var r = 28;
Var day = w;
For (var d = 1; d <= r; d ++ ){
Body. all [day ++]. innerText = d;
If (parseInt (year1) = (new Date ()). getYear () & parseInt (month1) = (new Date ()). getMonth () + 1 & d = (new Date ()). getDate ())
Body. all [day-1]. style. backgroundColor = "red ";
Body. all [41]. innerText = "close ";
}
Break;
Default:
If (parseInt (month1) = 1 | parseInt (month1) = 3 | parseInt (month1) = 5 | parseInt (month1) = 7 | parseInt (month1) = 8 | parseInt (month1) = 10 | parseInt (month1) = 12)
Var r = 31;
Else
Var r = 30;
Var day = w;
For (var d = 1; d <= r; d ++ ){
Body. all [day ++]. innerText = d;
If (parseInt (year1) = (new Date ()). getYear () & parseInt (month1) = (new Date ()). getMonth () + 1 & d = (new Date ()). getDate ())
Body. all [day-1]. style. backgroundColor = "red ";
Body. all [41]. innerText = "close ";
}
Break;
}
}
Select1.onchange = function (){
For (var o in body. all ){
Body. all [o]. innerText = "";
If (o. toString ()! = "Length ")
Body. all [o]. style. backgroundColor = "";
}
Var month1 = this. options [this. selectedIndex]. text;
Var year1 = select. options [select. selectedIndex]. text;
Var y = parseInt (year1.substr (2, 2)-0 );
Var c = parseInt (year1.substr (0, 2 ));
Var m = parseInt (month1 );
M = m> = 3? M :( y = Y-1, m + 12 );
Var d = 1;
Var w = y + parseInt (y/4) + parseInt (c/4)-2 * c + parseInt (26 * (m + 1)/10) + D-1;
If (w <0) w = w + 700;
W = w % 7;
Switch (parseInt (month1 )){
Case 2:
If (parseInt (year1) % 4 = 0)
Var r = 29;
Else
Var r = 28;
Var day = w;
For (var d = 1; d <= r; d ++ ){
Body. all [day ++]. innerText = d;
If (parseInt (year1) = (new Date ()). getYear () & parseInt (month1) = (new Date ()). getMonth () + 1 & d = (new Date ()). getDate ())
Body. all [day-1]. style. backgroundColor = "red ";
Body. all [41]. innerText = "close ";
}
Break;
Default:
If (parseInt (month1) = 1 | parseInt (month1) = 3 | parseInt (month1) = 5 | parseInt (month1) = 7 | parseInt (month1) = 8 | parseInt (month1) = 10 | parseInt (month1) = 12)
Var r = 31;
Else
Var r = 30;
Var day = w;
For (var d = 1; d <= r; d ++ ){
Body. all [day ++]. innerText = d;
If (parseInt (year1) = (new Date ()). getYear () & parseInt (month1) = (new Date ()). getMonth () + 1 & d = (new Date ()). getDate ())
Body. all [day-1]. style. backgroundColor = "red ";
Body. all [41]. innerText = "close ";
}
Break;
}
}
Var date = new Date ();
For (var s1 = 0; s1 <select. options. length; s1 ++ ){
If (parseInt (select. options [s1]. text) = parseInt (date. getYear ())){
Select. options [s1]. selected = true;
Break;
}
}
For (var s2 = 0; s2 <select1.options. length; s2 ++ ){
If (parseInt (select1.options [s2]. text) = parseInt (date. getMonth () + 1 ){
Select1.options [s2]. selected = true;
Break;
}
}
Select. onchange ();
For (var I in body. all ){
If (body. all [I]. innerText = date. getDate ()){
Body. all [I]. style. backgroundColor = "red ";
}
}
Target. onfocus = function (){
Document. body. appendChild ();
A. style. left = target. offsetLeft + "px ";;
A. style. top = target. offsetTop + target. offsetHeight + "px ";
}
Target. onblur = function (){
If (a & window. event. clientY>. offsetTop & window. event. clientY <. offsetTop +. offsetHeight & window. event. clientX>. offsetLeft & window. event. clientX <. offsetLeft +. offsetWidth)
Return;
If (! A) return;
A. parentNode. removeChild ();
}
Body. all [41]. innerText = "close ";
Body. all [41]. onclick = function (){
This. style. backgroundColor = "";
A. parentNode. removeChild ();
}
}
}
The entry parameter is the html object to be bound, which is generally text input.
The following is the call code:
<Html>
<Head>
<Title> Untitled Document </title>
</Head>
<Body>
<Script src = "kongjian. js"> </script>
<Input type = "text" id = "a">
<Script>
Sx. activex. calender. bind (document. getElementById (""));
</Script>
</Body>
</Html>
In this case, the code is too long and not very good. If any of you have a better solution, please contact me more.