kowala's home

kowala's home
這裡是我的學習筆記,陸續增加中。
http://kowala21.blogspot.com

2012-08-28

農曆程式概念探討(2)

kowala's home
http://kowala21.blogspot.com

前一篇簡單介紹了農曆的一些名詞,本篇先把框架清出來。為了方便查看原始碼,我們必須先把它作一些簡化,只留下必須的框架就好,並且把Javascript 分離出來,用一個檔案儲存它。


 HTML原始碼 (calendar_test.htm)
<HTML>
<HEAD>
<TITLE>Test</TITLE>
<META http-equiv=Content-Type content="text/html; charset=UTF-8">
<script language="JavaScript" src="calendar_test.js"></script>
</HEAD>

<BODY onload=initial() >
<HR align=center width=600 color=black>
<CENTER><FORM name=CLD >
<TABLE><TBODY>
<TR><BR>
  <TD align=middle>   

    <FONT  color=#660080 size=2>時鐘: </FONT>
    <FONT id=Clock color=#660080 size=2 align="center"></FONT>

    <DIV style="Z-INDEX: -1; POSITION: absolute; TOP: 55px">
      <FONT id = YMBG style="FONT-SIZE: 100pt; COLOR: #f0f0f0;
       FONT-FAMILY: 'Arial Black'">&nbsp;2012<BR>&nbsp;SEP</FONT>
    </DIV>

    <TABLE border=0><TBODY>     
     <TR>
        <TD bgColor=#3065bc colSpan=7>

          <FONT style="FONT-SIZE: 9pt" color=#ffffff size=2>&nbsp;西曆&nbsp;
          <SELECT style="FONT-SIZE: 9pt" onchange = changeCld() name= SY >
          <SCRIPT language=JavaScript><!--
            for(i=1900;i<2061;i++) document.write('<option>'+i) ;
          //--></SCRIPT>
          </SELECT>&nbsp;年&nbsp;
          <SELECT style="FONT-SIZE: 9pt" onchange = changeCld() name= SM >
          <SCRIPT language=JavaScript><!--
            for(i=1;i<13;i++) document.write('<option>'+i)
          //--></SCRIPT>
          </SELECT>&nbsp;月&nbsp;
          </FONT>

          <FONT id=GZ face=新細明體 color=#ffffff size=2></FONT><BR>
        </TD>
      </TR>
 
      <TR align=middle bgColor=#e8e8e8>
        <TD width=60>日</TD>
        <TD width=60>一</TD>
        <TD width=60>二</TD>
        <TD width=60>三</TD>
        <TD width=60>四</TD>
        <TD width=60>五</TD>
        <TD width=60>六</TD>
      </TR>

      <SCRIPT language=JavaScript><!--
        showCal();
      //--></SCRIPT>
    </TBODY></TABLE>
  </TD>
  <TD vAlign=top align=middle width=60><BR><BR><BR><BR><BR><BR>
<BUTTON style="FONT-SIZE: 9pt" onClick="pushBtm('YU')" type="button">年↑</BUTTON><BR>
<BUTTON style="FONT-SIZE: 9pt" onClick="pushBtm('YD')" type="button">年↓</BUTTON><BR><BR>
<BUTTON style="FONT-SIZE: 9pt" onClick="pushBtm('MU')" type="button">月↑</BUTTON><BR>
<BUTTON style="FONT-SIZE: 9pt" onClick="pushBtm('MD')" type="button">月↓</BUTTON><BR><BR>
<BUTTON style="FONT-SIZE: 9pt" onClick="pushBtm('XD')" type="button">當月</BUTTON><BR>
  </TD>
</TR></TBODY></TABLE>
</FORM></CENTER>
<HR align=center width=600 color=black>
</BODY></HTML>
 Javascript 原始碼 (calendar_test.js)

//---------------------------------------------------
//訊息盒 Debug 用
function MsgBox(str){alert(str);}
//---------------------------------------------------
var today;
//初始化
function initial(){
   myClock();//啟動時鐘 
}

//時鐘,每秒跳一次
function myClock(){
   today = new Date();
   Clock.innerHTML = today.toLocaleString().replace(/(年|月)/g, "-").replace(/日/, "");
   window.setTimeout("myClock()", 1000);
}

//combobox onchange事件
function changeCld(){
   var y,m,g;
   y=CLD.SY.selectedIndex+1900;
   m=CLD.SM.selectedIndex+1;
   MsgBox(y+' 年 '+m+' 月'); 
   if(y>1874 && y<1909){g=y-1874;GZ.innerHTML = '  光緒 ' + g +' 年 '+m+' 月';}
   if(y>1908 && y<1912){g=y-1908;GZ.innerHTML = '  宣統 ' + g +' 年 '+m+' 月';}
   if(y>1911){g=y-1911;GZ.innerHTML = '  民國 ' + g +' 年 '+m+' 月';}
}


//開始秀陽曆日期+顏色
function showCal(){
  //MsgBox('開始秀陽曆日期');  //Debug 用
  var gNum;
  for(i=0;i<6;i++) { //垂直 有6行
    document.write('<tr align=center>');
    for(j=0;j<7;j++) { //水平
      gNum = i*7+j; //數字定位
      //秀陽曆數字
      document.write('<td id="GD'+gNum+'" onMouseOver="mOvr('+gNum+')" onMouseOut="mOut()"><font id="SD'+
      gNum+'" size=5 face="Arial Black" color=green >'+gNum+'</font>');

      //秀陰曆數字+顏色+節慶      document.write('<br><font id="LD'+ gNum +'"size=2 style="font-size:9pt">'+ gNum +'</font></td>');
    }
    document.write('</tr>');
  }
}

//table onMouseOver事件
function mOvr(){    MsgBox('mOvr()');}

//table onMouseOut事件
function mOut(){    MsgBox('mOut()');}

//右邊按鈕群
function pushBtm(v){
   switch(v){
      case 'YU' :
         MsgBox('pushBtm = YU');
         break;
      case 'YD' :
         MsgBox('pushBtm = YD');
         break;
      case 'MU' :
         MsgBox('pushBtm = MU');
         break;
      case 'MD' :
         MsgBox('pushBtm = MD');
         break;
      default :
         MsgBox('pushBtm = '+v);
         break;
   }
}
 使用到的事件列表
 <BODY onload=initial() >
 <SELECT style="FONT-SIZE: 9pt" onchange = changeCld() name= SY >
 <td id="GD0" onmouseover="mOvr(0)" onmouseout="mOut()">
 <BUTTON style="FONT-SIZE: 9pt" onClick="pushBtm('YU')">年↑</BUTTON>
最後是 javascript 事件
 window.setTimeout("myClock()", 1000);

好了,框架大概就這麼多了,用到的這些都是 HTML 及 javascript 語法。

待續...

沒有留言:

張貼留言

請提供您的寶貴意見 ;-)