📄 time29.htm

📁 javascript各种效果的实例及源代码
💻 HTM
字号:
<html>
<head>
<title>自己创建日历</title>
<style type="text/css">
<!--
body {  font-family: "宋体"; font-size: 9pt; margin-top: 0px; margin-left: 0px; margin-right: 0px}
A { COLOR: black; FONT-SIZE: 9pt; FONT-WEIGHT: 400; TEXT-DECORATION: none }
 A:hover { COLOR: red; FONT-SIZE: 9pt; FONT-WEIGHT: 400; TEXT-DECORATION: underline }
a:active     { font: 9pt "宋体"; cursor: hand; color: #FF0033 }

-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<SCRIPT LANGUAGE="JavaScript">
<!-- 



function displayCalendar(init) {       

   var i;

   var now = new Date();

        var nowYear = now.getYear() - 95;

   var nowMonth = now.getMonth();

   var nowDay   = now.getDate();



   // on open of document

   if (init==1)  {

        document.calControl.month.selectedIndex = nowMonth;

        document.calControl.year.selectedIndex = nowYear;

   }

        var month=document.calControl.month.selectedIndex

        var year=document.calControl.year.selectedIndex+1995



        var days=getDaysInMonth(month+1,year);



        var firstOfMonth = new Date (year, month, 1);



        var startingPos=firstOfMonth.getDay()+7;



        days+=startingPos;



   // label days of week

   i=0;

        document.calButtons.elements[i++].value = " S ";

   document.calButtons.elements[i++].value = " M ";

   document.calButtons.elements[i++].value = " T ";

   document.calButtons.elements[i++].value = " W ";

   document.calButtons.elements[i++].value = " T ";

   document.calButtons.elements[i++].value = " F ";

   document.calButtons.elements[i++].value = " S ";



   // blank out non date buttons

   for (i=7; i<startingPos; i++) 

         document.calButtons.elements[i].value = "   ";



        for (i=startingPos; i<days; i++)  

                document.calButtons.elements[i].value = i-startingPos+1;



   // show focus on today if the calendar is the proper month and year

   if (month==nowMonth && year==nowYear+1995)  

      document.calButtons.elements[nowDay+startingPos-1].focus();



  

   // blank out rest of non date buttons

        for (i=days; i<49; i++)  

      document.calButtons.elements[i].value = "   ";

}



function leapYear (Year) {

        if (((Year % 4)==0) && ((Year % 100)!=0) || ((Year % 400)==0))

                return (1);

        else

                return (0);

}



function getDaysInMonth(month,year)  {

   var days;

   if (month==1 || month==3 || month==5 || month==7 || month==8 ||

      month==10 || month==12)  days=31;

   else if (month==4 || month==6 || month==9 || month==11) days=30;

   else if (month==2)  {

      if (leapYear (year)==1)  days=29;

      else days=28;

   }

        return (days);

}

// -->



</SCRIPT>
</head>

<body bgcolor="#fef4d9" ONLOAD="displayCalendar(1)">
<br>
<br>
<center><font color=red face="隶书" size=6>自己创建日历</font></center>
<br>
<center>
<table border=5 bordercolor=blue borderlight=green>
<tr><td align=center><font size=5 color=red face="Arial, Helvetica, sans-serif"><strong>下面为效果显示区!</strong></font></td></tr>
<tr><td align=center>
<FORM NAME="calControl">month&nbsp;<SELECT NAME="month"><OPTION>Jan&nbsp;<OPTION>Feb&nbsp;<OPTION>Mar&nbsp;<OPTION>Apr&nbsp;<OPTION>May&nbsp;<OPTION>Jun&nbsp;<OPTION>Jul&nbsp;<OPTION>Aug&nbsp;<OPTION>Sep&nbsp;<OPTION>Oct&nbsp;<OPTION>Nov&nbsp;<OPTION>Dec&nbsp;</SELECT>

year&nbsp;<SELECT NAME="year"><OPTION>1995&nbsp;<OPTION>1996&nbsp;<OPTION>1997&nbsp;<OPTION>1998&nbsp;<OPTION>1999&nbsp;<OPTION>2000&nbsp;</SELECT><INPUT TYPE="button" NAME="button1" VALUE="Create" 

   onClick="displayCalendar(0)"></FORM><FORM NAME="calButtons"><INPUT TYPE="button" NAME="but0"  value="     "><INPUT TYPE="button" NAME="but1"  value="     "><INPUT TYPE="button" NAME="but2"  value="     "><INPUT TYPE="button" NAME="but3"  value="     "><INPUT TYPE="button" NAME="but4"  value="     "><INPUT TYPE="button" NAME="but5"  value="     "><INPUT TYPE="button" NAME="but6"  value="     "></CENTER>



<CENTER><INPUT TYPE="button" NAME="but7"  value="     "><INPUT TYPE="button" NAME="but8"  value="     "><INPUT TYPE="button" NAME="but9"  value="     "><INPUT TYPE="button" NAME="but10" value="     "><INPUT TYPE="button" NAME="but11" value="     "><INPUT TYPE="button" NAME="but12" value="     "><INPUT TYPE="button" NAME="but13" value="     "></CENTER>



<CENTER><INPUT TYPE="button" NAME="but14" value="     "><INPUT TYPE="button" NAME="but15" value="     "><INPUT TYPE="button" NAME="but16" value="     "><INPUT TYPE="button" NAME="but17" value="     "><INPUT TYPE="button" NAME="but18" value="     "><INPUT TYPE="button" NAME="but19" value="     "><INPUT TYPE="button" NAME="but20" value="     "></CENTER>



<CENTER><INPUT TYPE="button" NAME="but21" value="     "><INPUT TYPE="button" NAME="but22" value="     "><INPUT TYPE="button" NAME="but23" value="     "><INPUT TYPE="button" NAME="but24" value="     "><INPUT TYPE="button" NAME="but25" value="     "><INPUT TYPE="button" NAME="but26" value="     "><INPUT TYPE="button" NAME="but27" value="     "></CENTER>



<CENTER><INPUT TYPE="button" NAME="but28" value="     "><INPUT TYPE="button" NAME="but29" value="     "><INPUT TYPE="button" NAME="but30" value="     "><INPUT TYPE="button" NAME="but31" value="     "><INPUT TYPE="button" NAME="but32" value="     "><INPUT TYPE="button" NAME="but33" value="     "><INPUT TYPE="button" NAME="but34" value="     "></CENTER>



<CENTER><INPUT TYPE="button" NAME="but35" value="     "><INPUT TYPE="button" NAME="but36" value="     "><INPUT TYPE="button" NAME="but37" value="     "><INPUT TYPE="button" NAME="but38" value="     "><INPUT TYPE="button" NAME="but39" value="     "><INPUT TYPE="button" NAME="but40" value="     "><INPUT TYPE="button" NAME="but41" value="     "></CENTER>



<CENTER><INPUT TYPE="button" NAME="but42" value="     "><INPUT TYPE="button" NAME="but43" value="     "><INPUT TYPE="button" NAME="but44" value="     "><INPUT TYPE="button" NAME="but45" value="     "><INPUT TYPE="button" NAME="but46" value="     "><INPUT TYPE="button" NAME="but47" value="     "><INPUT TYPE="button" NAME="but48" value="     "></CENTER>



<CENTER></FORM></td></tr></table></center>
<br>
<br>
<center>
<textarea name=source rows=12 cols=45 class=yk9>
脚本说明:
第一步:把如下代码加入<head>区域中
<SCRIPT LANGUAGE="JavaScript">
<!-- 



function displayCalendar(init) {       

   var i;

   var now = new Date();

        var nowYear = now.getYear() - 95;

   var nowMonth = now.getMonth();

   var nowDay   = now.getDate();



   // on open of document

   if (init==1)  {

        document.calControl.month.selectedIndex = nowMonth;

        document.calControl.year.selectedIndex = nowYear;

   }

        var month=document.calControl.month.selectedIndex

        var year=document.calControl.year.selectedIndex+1995



        var days=getDaysInMonth(month+1,year);



        var firstOfMonth = new Date (year, month, 1);



        var startingPos=firstOfMonth.getDay()+7;



        days+=startingPos;



   // label days of week

   i=0;

        document.calButtons.elements[i++].value = " S ";

   document.calButtons.elements[i++].value = " M ";

   document.calButtons.elements[i++].value = " T ";

   document.calButtons.elements[i++].value = " W ";

   document.calButtons.elements[i++].value = " T ";

   document.calButtons.elements[i++].value = " F ";

   document.calButtons.elements[i++].value = " S ";



   // blank out non date buttons

   for (i=7; i<startingPos; i++) 

         document.calButtons.elements[i].value = "   ";



        for (i=startingPos; i<days; i++)  

                document.calButtons.elements[i].value = i-startingPos+1;



   // show focus on today if the calendar is the proper month and year

   if (month==nowMonth && year==nowYear+1995)  

      document.calButtons.elements[nowDay+startingPos-1].focus();



  

   // blank out rest of non date buttons

        for (i=days; i<49; i++)  

      document.calButtons.elements[i].value = "   ";

}



function leapYear (Year) {

        if (((Year % 4)==0) && ((Year % 100)!=0) || ((Year % 400)==0))

                return (1);

        else

                return (0);

}



function getDaysInMonth(month,year)  {

   var days;

   if (month==1 || month==3 || month==5 || month==7 || month==8 ||

      month==10 || month==12)  days=31;

   else if (month==4 || month==6 || month==9 || month==11) days=30;

   else if (month==2)  {

      if (leapYear (year)==1)  days=29;

      else days=28;

   }

        return (days);

}

// -->



</SCRIPT>



第二步:把如下代码加入<body>区域中
<FORM NAME="calControl">month&nbsp;<SELECT NAME="month"><OPTION>Jan&nbsp;<OPTION>Feb&nbsp;<OPTION>Mar&nbsp;<OPTION>Apr&nbsp;<OPTION>May&nbsp;<OPTION>Jun&nbsp;<OPTION>Jul&nbsp;<OPTION>Aug&nbsp;<OPTION>Sep&nbsp;<OPTION>Oct&nbsp;<OPTION>Nov&nbsp;<OPTION>Dec&nbsp;</SELECT>

year&nbsp;<SELECT NAME="year"><OPTION>1995&nbsp;<OPTION>1996&nbsp;<OPTION>1997&nbsp;<OPTION>1998&nbsp;<OPTION>1999&nbsp;<OPTION>2000&nbsp;</SELECT><INPUT TYPE="button" NAME="button1" VALUE="Create" 

   onClick="displayCalendar(0)"></FORM><FORM NAME="calButtons"><INPUT TYPE="button" NAME="but0"  value="     "><INPUT TYPE="button" NAME="but1"  value="     "><INPUT TYPE="button" NAME="but2"  value="     "><INPUT TYPE="button" NAME="but3"  value="     "><INPUT TYPE="button" NAME="but4"  value="     "><INPUT TYPE="button" NAME="but5"  value="     "><INPUT TYPE="button" NAME="but6"  value="     "></CENTER>



<CENTER><INPUT TYPE="button" NAME="but7"  value="     "><INPUT TYPE="button" NAME="but8"  value="     "><INPUT TYPE="button" NAME="but9"  value="     "><INPUT TYPE="button" NAME="but10" value="     "><INPUT TYPE="button" NAME="but11" value="     "><INPUT TYPE="button" NAME="but12" value="     "><INPUT TYPE="button" NAME="but13" value="     "></CENTER>



<CENTER><INPUT TYPE="button" NAME="but14" value="     "><INPUT TYPE="button" NAME="but15" value="     "><INPUT TYPE="button" NAME="but16" value="     "><INPUT TYPE="button" NAME="but17" value="     "><INPUT TYPE="button" NAME="but18" value="     "><INPUT TYPE="button" NAME="but19" value="     "><INPUT TYPE="button" NAME="but20" value="     "></CENTER>



<CENTER><INPUT TYPE="button" NAME="but21" value="     "><INPUT TYPE="button" NAME="but22" value="     "><INPUT TYPE="button" NAME="but23" value="     "><INPUT TYPE="button" NAME="but24" value="     "><INPUT TYPE="button" NAME="but25" value="     "><INPUT TYPE="button" NAME="but26" value="     "><INPUT TYPE="button" NAME="but27" value="     "></CENTER>



<CENTER><INPUT TYPE="button" NAME="but28" value="     "><INPUT TYPE="button" NAME="but29" value="     "><INPUT TYPE="button" NAME="but30" value="     "><INPUT TYPE="button" NAME="but31" value="     "><INPUT TYPE="button" NAME="but32" value="     "><INPUT TYPE="button" NAME="but33" value="     "><INPUT TYPE="button" NAME="but34" value="     "></CENTER>



<CENTER><INPUT TYPE="button" NAME="but35" value="     "><INPUT TYPE="button" NAME="but36" value="     "><INPUT TYPE="button" NAME="but37" value="     "><INPUT TYPE="button" NAME="but38" value="     "><INPUT TYPE="button" NAME="but39" value="     "><INPUT TYPE="button" NAME="but40" value="     "><INPUT TYPE="button" NAME="but41" value="     "></CENTER>



<CENTER><INPUT TYPE="button" NAME="but42" value="     "><INPUT TYPE="button" NAME="but43" value="     "><INPUT TYPE="button" NAME="but44" value="     "><INPUT TYPE="button" NAME="but45" value="     "><INPUT TYPE="button" NAME="but46" value="     "><INPUT TYPE="button" NAME="but47" value="     "><INPUT TYPE="button" NAME="but48" value="     "></CENTER>



<CENTER></FORM>




第三步:把<body>区中内容改为
<body bgcolor="#fef4d9" ONLOAD="displayCalendar(1)">
</textarea>
<SCRIPT LANGUAGE="JavaScript">

<!-- hide

function goHist(a) 

{

   history.go(a);

}

//-->

</script>

<FORM METHOD="post">
<INPUT TYPE="button" VALUE="返回" onClick="goHist(-1)" style="background-color: #8000FF; color: rgb(255,255,255)">
</form>
</center>
<br>
<br>
</body>
</html>
💿 文件大小 1152 K
👤 上传用户 sujiwei
📂 所属分类 Java书籍
🏷️ 相关标签

#javascript #源代码
⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -