Home > Developer > JavaScript
<!doctype HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd ">
<title></title>
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<meta http-equiv= "Content-language" content= "gb2312"/>
<meta content= "All" name= "robots"/>
<meta name= "Author" content= "Rainoxu"/>
<meta name= "Keywords" content= "" >
<meta name= "description" content= ""/>
<meta content= "xhtml+css,asp, web Design" name= "keywords"/>
<style type= "Text/css" >
*{
margin:0;
padding:0;
font:10px Tahoma;
}
#calender {
Text-align:center;
width:147px;
font-size:10px;
/*color: #27B0C1; * *
margin:12px 0 12px 6px;
border-top:1px solid #EEEEEE;
border-left:1px solid #EEEEEE;
}
#calender. arrow_over{
Color: #FF1493;
}
#calender. arrow_out{
Color: #FF8C00;
}
#calender td{
border-bottom:1px solid #EEEEEE;
border-right:1px solid #EEEEEE;
width:21px;
height:20px;
line-height:16px;
Color: #666666;
}
#calender #cal_title {
width:147px; Background: #EFEFEF;
}
#calender #week td{
Background: #F8F8F8;
}
#calender. current{
Background: #AAE7E8;
Display:block;
margin:2px;
}
#calender. notcurrent{
Display:block;
margin:2px;
Background: #EDEDED;
}
</style>
<script type= "Text/javascript" >
<!--
Document.writeln ("<div id= ' calenderdiv ' style> calendar load ...</div>");
var Press_tag;
function Changecal (action,year,month)
{
var strcal;
Switch (action)
{
Case "Nextmonth":
if (month==11)
{
month = 1;
Year = year*1 + 1;
}else{
month = month*1 + 2;
}
strcal = "<span onmouseover=\" this.classname= ' Arrow_over ' \ "onmouseout=\" this.classname= ' arrow_out ' \ "class= ' Arrow_out ' onclick= ' calender ("+ year +", "+ month +") ' title= ' under one months ' style= ' cursor:hand; ' >> </span> ";
Break
Case "Premonth":
if (month==0)
{
month = 12;
Year = Year*1-1;
}
strcal = "<span onmouseover=\" this.classname= ' Arrow_over ' \ "onmouseout=\" this.classname= ' arrow_out ' \ "class= ' Arrow_out ' onclick= ' calender ("+ year +", "+ month +") ' title= ' on one months ' style= ' cursor:hand; ' > <</span> ";
Break
Case "Nextyear":
Year = year*1 + 1;
month = month*1 + 1;
strcal = "<span onmouseover=\" this.classname= ' Arrow_over ' \ "onmouseout=\" this.classname= ' arrow_out ' \ "class= ' Arrow_out ' onclick= ' calender ("+ year +", "+ month +") ' title= ' Next ' style= ' Cursor:hand; ' >>></span> ";
Break
Case "Preyear":
Year = Year*1-1;
month = month*1 + 1;
strcal = "<span onmouseover=\" this.classname= ' Arrow_over ' \ "onmouseout=\" this.classname= ' arrow_out ' \ "class= ' Arrow_out ' onclick= ' calender ("+ year +", "+ month +") ' title= ' on previous ' style= ' Cursor:hand; ' ><<</span> ";
Break
Default:;
}
Strcal = "" + strcal + "";
return (strcal);
}
function Calender (cyear,cmonth)
{
var d,d_date,d_day,d_month;
Define an array of days per month
var monthdates = ["31", "28", "31", "30", "31", "30", "31", "31", "30", "31", "30", "31"]
D = new Date ();
D_year = D.getyear (); Get year
Judging the leap month, change Monthdates's February to 29
if (((d_year% 4 = = 0) && (d_year% 100! = 0)) | | (d_year% 400 = = 0)) MONTHDATES[1] = "29";
if ((Cyear! = "") | | (Cmonth! = ""))
{
If the user selects the month and year, the current time is changed to user settings
D.setyear (cyear);
D.setmonth (cmonth-1);
D.setdate (1);
}
D_month = D.getmonth (); Get Current is the month
D_year = D.getyear (); Get year
D_date = D.getdate (); Get Date
Fixed only two-bit error in 19XX year
if (d_year<2000) {d_year = d_year + 1900}
=========== Output Calendar ===========
var str;
str = "<table cellspacing= ' 0 ' cellpadding= ' 0 ' id= ' calender ' >";
str + = "<tr><td id= ' cal_title ' colspan= ' 7 ' >"
str + = changecal ("Preyear", D_year,d_month)
str + = changecal ("Premonth", D_year,d_month)
str + = D_year + "-" + (d_month*1+1)
str + = changecal ("Nextmonth", D_year,d_month)
str + = changecal ("Nextyear", D_year,d_month)
str + = "</td></tr>";
str + = "<tr id= ' Week ' ><td>Su</td><td>Mo</td><td>Tu</td><td>We< /td><td>th</td><td>fr</td><td>sa</td></tr> ";
str + = "<tr>";
var firstday,lastday,totalcounts,firstspace,lastspace,monthdays;
The months that need to be displayed can be obtained by using the defined array.
Monthdays = Monthdates[d.getmonth ()];
Set date is the first day of the month
D.setdate (1);
The first day of the month that needs to be displayed is the days of the week
FirstDay = D.getday ();
Number of empty cells in front of number 1th that need to be replenished
Firstspace = FirstDay;
Set the date to the last day of the month
D.setdate (monthdays);
The last day of the month that needs to be displayed is the days of the week
Lastday = D.getday ();
Empty cell count after last day
Lastspace = 6-lastday;
Front empty cell + total days + empty cells, used to control loops
totalcounts = firstspace*1 + monthdays*1 + lastspace*1;
Count: The variable of the large loop; F_space: The loop variable of the empty cell before the output; L_space: The loop variable for the empty cell after the output
var count,flag,f_space,l_space;
Flag: Before the empty cell is finished, the flag=1 no longer makes this small loop.
Flag = 0;
for (count=1;count<=totalcounts;count++)
{
Start flag=0, first output empty cells, after the loss of Flag=1, will not be executed this cycle
if (flag==0)
{
if (firstspace!=0)
{
for (f_space=1;f_space<=firstspace;f_space++)
{
str + = "<td> </td>";
if (f_space!= firstspace) count++;
}
flag = 1;
Continue
}
}
if ((count-firstspace) <=monthdays)
{
All days in the output month
Curday = d_year+ "," + (d_month*1+1) + "," + (Count-firstspace) + "|"
Linkday = d_year+ "," + (d_month*1+1) + "," + (Count-firstspace)
var today = new Date ();
if (d_year = = Today.getyear ()) && (D_month = = Today.getmonth ()) && ((count-firstspace) = = Today.getdate ( )) )
{
Highlight the current number of days in the local system
str + = "<td><span class= ' current ' >" + (count-firstspace) + "</span></td>";
}else{
No highlighted parts, no logs
str + = "<td>" + (count-firstspace) + "</td>";
}
if (count%7==0)
{
if (count<totalcounts)
{
str + = "</tr><tr>";
}else{
str + = "</tr>";
}
}
}else{
If the last day of the month has already been output, the empty cell is replenished after the output begins
for (l_space=1;l_space<=lastspace;l_space++)
{
str + = "<td> </td>";
if (l_space!= lastspace) count++;
}
Continue
}
}
str + = "<TR><TD colspan= ' 7 ' style= ' text-indent:9px; ' ><a href= ' http://www.rainoina.com ' title= ' visit Rainoxu's Station ' >WWW.RAINOINA.COM</A></TD></TR ></table> "
document.getElementById ("Calenderdiv"). InnerHTML = "<div id= ' Calenderdiv ' >" + str + "</div>";
}
Calling functions
Calender ("", "" ")
-
</script>
<body>
</body>
<a href= "http://js.alixixi.com/" > Welcome to Arisisi Web effects code Station,js.alixixi.com</a>
JavaScript js Write effect calendar
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
