Amigo陶藝網頁教學

Amigo陶藝網頁教學

萬年曆

範例

說明:一. 請將下列程式碼複製下來(按複製鍵),然後貼置在您網頁上欲擺放的位罝

二. 更改紅色的部份 <div id="NavBar" style="position:relative;width:0px;left:280; top:5px;" align="center">

left:280 選單距左邊的距離

<div id="Calendar" style="position:absolute;width:0px;left:300; top:--2px;" align="center">

left:300 月曆距左邊的距離

三.再改<body>為 <body onload="Defaults()">就OK了

<script language="JavaScript">  
var Selected_Month;  
var Selected_Year;  
var Current_Date = new Date();  
var Current_Month = Current_Date.getMonth();  
 
var Days_in_Month = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);  
var Month_Label = new Array('一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月');  
 
var Current_Year = Current_Date.getYear();  
 
var Today = Current_Date.getDate();  
 
function Header(Year, Month) {  
 
   if (Month == 1) {  
      if ((Year % 400 == 0) || ((Year % 4 == 0) && (Year % 100 != 0))) {  
         Days_in_Month[1] = 29;  
      }  
   }  
   var Header_String = Month_Label[Month] + ' ' + Year;  
   return Header_String;  
}  
 
 
 
function Make_Calendar(Year, Month) {  
   var First_Date = new Date(Year, Month, 1);  
   var Heading = Header(Year, Month);  
   var First_Day = First_Date.getDay() + 1;  
   if (((Days_in_Month[Month] == 31) && (First_Day >= 6)) ||  
       ((Days_in_Month[Month] == 30) && (First_Day == 7))) {  
      var Rows = 6;  
   }  
   else if ((Days_in_Month[Month] == 28) && (First_Day == 1)) {  
      var Rows = 4;  
   }  
   else {  
      var Rows = 5;  
   }  
 
   var HTML_String = '<table><tr><td valign="top"><table BORDER=2 CELLSPACING=1 cellpadding=2 FRAME="box" BGCOLOR="yellow" BORDERCOLORLIGHT="orange">';  
 
   HTML_String += '<tr><th colspan=7 BGCOLOR="FF00FF" BORDERCOLOR="000000">' + Heading + '</font></th></tr>'; 
 
   HTML_String += '<tr><th ALIGN="CENTER" BGCOLOR="00FFFF" BORDERCOLOR="000000">Sun</th><th ALIGN="CENTER" BGCOLOR="00FFFF" BORDERCOLOR="000000">Mon</th><th ALIGN="CENTER" BGCOLOR="00FFFF" BORDERCOLOR="000000">Tue</th><th ALIGN="CENTER" BGCOLOR="00FFFF" BORDERCOLOR="000000">Wed</th>'; 
 
   HTML_String += '<th ALIGN="CENTER" BGCOLOR="00FFFF" BORDERCOLOR="000000">Thu</th><th ALIGN="CENTER" BGCOLOR="00FFFF" BORDERCOLOR="000000">Fri</th><th ALIGN="CENTER" BGCOLOR="00FFFF" BORDERCOLOR="000000">Sat</th></tr>'; 
 
   var Day_Counter = 1; 
   var Loop_Counter = 1; 
   for (var j = 1; j <= Rows; j++) { 
      HTML_String += '<tr ALIGN="center" VALIGN="top">'; 
      for (var i = 1; i < 8; i++) { 
         if ((Loop_Counter >= First_Day) && (Day_Counter <= Days_in_Month[Month])) { 
            if ((Day_Counter == Today) && (Year == Current_Year) && (Month == Current_Month)) { 
               HTML_String += '<td BGCOLOR="808000" BORDERCOLOR="000000"><strong><font color="red">' + Day_Counter + '</font></strong></td>'; 
            } 
            else { 
               HTML_String += '<td BGCOLOR="CCFFFF" BORDERCOLOR="000000">' + Day_Counter + '</td>'; 
            } 
            Day_Counter++;     
         } 
         else { 
            HTML_String += '<td BORDERCOLOR="C0C0C0"> </td>'; 
         } 
         Loop_Counter++; 
      } 
      HTML_String += '</tr>'; 
   } 
   HTML_String += '</table></td></tr></table>';  
   document.all.Calendar.innerHTML = HTML_String;  
}  
 
 
function Check_Nums() {  
   if ((event.keyCode < 48) || (event.keyCode > 57)) {  
      return false;  
   }  
}  
 
 
 
function On_Year() {  
   var Year = document.when.year.value;  
   if (Year.length == 4) {  
      Selected_Month = document.when.month.selectedIndex;  
      Selected_Year = Year;  
      Make_Calendar(Selected_Year, Selected_Month);  
   }  
}  
 
function On_Month() {  
   var Year = document.when.year.value;  
   if (Year.length == 4) {  
      Selected_Month = document.when.month.selectedIndex;  
      Selected_Year = Year;  
      Make_Calendar(Selected_Year, Selected_Month);  
   }  
   else {  
      alert('Please enter a valid year.');  
      document.when.year.focus();  
   }  
}  
 
 
function Defaults() {  
   if (!document.all)  
   return  
   var Mid_Screen = Math.round(document.body.clientWidth / 2);  
   document.when.month.selectedIndex = Current_Month;  
   document.when.year.value = Current_Year;  
   Selected_Month = Current_Month;  
   Selected_Year = Current_Year;  
   Make_Calendar(Current_Year, Current_Month);  
}  
 
 
function Skip(Direction) {  
   if (Direction == '+') {  
      if (Selected_Month == 11) {  
         Selected_Month = 0;  
         Selected_Year++;  
      }  
      else {  
         Selected_Month++;  
      }  
   }  
   else {  
      if (Selected_Month == 0) {  
         Selected_Month = 11;  
         Selected_Year--;  
      }  
      else {  
         Selected_Month--;  
      }  
   }  
   Make_Calendar(Selected_Year, Selected_Month);  
   document.when.month.selectedIndex = Selected_Month;  
   document.when.year.value = Selected_Year;  
}  
 
 
</script>

<div id="NavBar" style="position:relative;width:0px;left:280; top:5px;" align="center">
  <form name="when">
    <table>
      <tr>
        <td>
          <p align="center"><input type="button" value=" 上個月" onclick="Skip('-')"></p>
        </td>
        <td>
          <p align="center"></td>
        <td>
          <p align="center"><select name="month" onchange="On_Month()">
            <script language="JavaScript1.2">  
	if (document.all)
	    { 
   		for (j=0;j<Month_Label.length;j++) 
   		  { 
      		    document.writeln('<option value=' + j + '>' + Month_Label[j]); 
   		  } 
	   } 
             </script> 
          </select></p>
        </td>
        <td>
          <p align="center"><input type="text" name="year" size="4" maxlength="4" onkeypress="return Check_Nums()" onkeyup="On_Year()"></p>
        </td>
        <td>
          <p align="center"></td>
        <td>
          <p align="center"><input type="button" value="下個月 " onclick="Skip('+')"></p>
        </td>
      </tr>
    </table>
  </form>
</div>
<div id="Calendar" style="position:absolute;width:0px;left:300; top:--2px;" align="center">
</div>
<table>