kowala's home: 農曆程式概念探討(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'"> 2012<BR> SEP</FONT>
    </DIV>

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

          <FONT style="FONT-SIZE: 9pt" color=#ffffff size=2> 西曆 
          <SELECT style="FONT-SIZE: 9pt" onchange = changeCld() name= SY >
          <SCRIPT language=JavaScript></SCRIPT>
          </SELECT> 年 
          <SELECT style="FONT-SIZE: 9pt" onchange = changeCld() name= SM >
          <SCRIPT language=JavaScript></SCRIPT>
          </SELECT> 月 
          </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></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 語法。

待續...

kowala's home

2012-08-28

農曆程式概念探討(2)

沒有留言:

張貼留言