|
在Web開發(fā)中我們經(jīng)常會(huì)需要開發(fā)一些和日歷相關(guān)的應(yīng)用，自然需要制作一些日歷程序，一些大家伙比如C#，JAVA或是VB.NET這些語言以往都有不少文章和示例介紹了，所以今天我給大家說一下其他常見Web腳步語言中的日歷算法邏輯和具體的實(shí)現(xiàn)方式，希望對(duì)大家有用。
先看看我們的實(shí)現(xiàn)目標(biāo)，就是在網(wǎng)頁中通過腳本語言實(shí)現(xiàn)如下的日歷：
要實(shí)現(xiàn)日歷就必須用到相關(guān)語言中的日期和時(shí)間函數(shù)，其中最重要的是具有下面功能的兩個(gè)函數(shù)：
- 能返回指定日期是星期幾的函數(shù)
- 能返回指定年份和月份一共有多少天的函數(shù)，或者可以返回指定兩個(gè)日期之間相差多少天的函數(shù)
只要語言中具有上面兩個(gè)功能的函數(shù)就可以輕松實(shí)現(xiàn)日歷。
實(shí)現(xiàn)日歷的算法邏輯大致如下：
- 取得當(dāng)前要顯示的月份的1號(hào)是在星期幾
- 取得當(dāng)前要顯示的月份一共有多少天
- 通過HTML的方式生成一個(gè)HTML的表格來顯示日歷（每行顯示一周，并根據(jù)需要來決定是生成5行還是6行的表格）
- 根據(jù)顯示的月份1號(hào)所在星期幾空出前面的不屬于該月日期的表格單元格
- 根據(jù)顯示的月份1號(hào)所在星期幾來決定生成表格時(shí)從星期幾開始生成日歷顯示（第一天在星期幾）
- 根據(jù)一共有多少天來順次生成指定天數(shù)，另外每生成七個(gè)單元格需要加入一個(gè)表格的換行
- 補(bǔ)足HTML表格空缺的單元格
剩下的就是根據(jù)不同語言中具體的函數(shù)來實(shí)現(xiàn)了：
下面是根據(jù)上述算法和邏輯在asp中的具體實(shí)現(xiàn)代碼：
1 <style>
2td { font-family: "宋體"; font-size:9pt}
3</style>
4<body bgcolor="eeeeee">
5<table width="180" cellpadding="0" cellspacing="1" bgcolor="dddddd" align=center>
6<%
7'以下為ASP中通過該日歷算法實(shí)現(xiàn)的具體代碼
8
9 '先判斷是否指定了一個(gè)年份和月份，沒有則根據(jù)當(dāng)前的年和月份顯示
10 If Request("ReqDate")="" then
11 CurrentDate=Date
12 else
13 CurrentDate=Trim(Request("ReqDate"))
14 end if
15 pyear=year(CurrentDate)
16 pmonth=month(CurrentDate)
17
18 '以下的代碼生成日歷顯示的表格頭內(nèi)容
19%>
20 <tr align="LEFT" bgcolor="#dddddd">
21 <td width="14%" height="19" align="center">
22 <input type="button" value="<<" onclick="JavaScript:location.href='?ReqDate=<%=DateAdd("m",-1,CurrentDate) %>'">
23 </td>
24 <td colspan="5" align="center">
25 <%=pyear%>年<%=pmonth%>月
26 </td>
27 <td width="14%" align="center">
28 <input type="button" value=">>" onclick="JavaScript:location.href='?ReqDate=<%=DateAdd("m",1,CurrentDate)%>'">
29 </td>
30 </tr>
31 <tr align="center" bgcolor="#CCCCCC">
32 <td width="14%" height="19"> 日</td>
33 <td width="14%"> 一</td>
34 <td width="14%"> 二</td>
35 <td width="14%"> 三</td>
36 <td width="14%"> 四</td>
37 <td width="14%"> 五</td>
38 <td width="14%"> 六</td>
39 </tr>
40 <tr align=center bgcolor=ffffff height=19>
41 <%
42 '由于ASP中沒有獲取指定月共有多少天的函數(shù)，因此我們需要通過其他算法來獲得，算法其實(shí)很簡單，就是計(jì)算一下要顯示月份的1日至下個(gè)月的1日一共相差幾天
43 fromDate = FormatDateTime(month(CurrentDate) & "/1/" & year(CurrentDate))
44 toDate = FormatDateTime(DateAdd("m",1,fromDate))
45 '獲得要顯示月份的第一天為周幾
46 nunmonthstart=weekday(fromDate)-1
47 '獲得要顯示的1日至下個(gè)月的1日一共相差幾天(月份一共有多少天)
48 nunmonthend=DateDiff("d",fromDate,toDate)
49 '判斷顯示日歷需要用幾行表格來顯示（每行顯示7天）
50 if nunmonthstart+nunmonthend<36 then
51 maxi=36
52 else
53 maxi=43
54 end if
55 '循環(huán)生成表格并顯示
56 i=1
57 do while i<maxi
58 iv=i-nunmonthstart
59 if i>nunmonthstart and i<=nunmonthend+nunmonthstart then
60 '如果為顯示的是今天則用紅色背景顯示
61 if iv=Day(now) and month(now)=pmonth and year(now)=pyear then
62 response.write( "<td align=center bgcolor=ffaaaa><a href='#' target=_blank>" & iv & "</a></td>")
63 else
64 response.write( "<td align=center><a href='#' target=_blank>" & iv & "</a></td>")
65 end if
66 else
67 response.write( "<td> </td>")
68 end if
69
70 '如果能被7整除（每行顯示7個(gè)）則輸出一個(gè)換行
71 if i mod 7=0 then
72 response.write( "</tr><tr align=center bgcolor=ffffff height=19>")
73 end if
74 i=i+1
75 loop
76%>
77</table>
78</body>
具體實(shí)現(xiàn)效果如下：
下面是根據(jù)上述算法和邏輯在PHP中的具體實(shí)現(xiàn)代碼：
1<style>
2td { font-family: "宋體"; font-size:9pt}
3</style>
4<body bgcolor="eeeeee">
5<table width="180" cellpadding="0" cellspacing="1" bgcolor="dddddd" align=center>
6<?
7//以下為PHP中通過該日歷算法實(shí)現(xiàn)的具體代碼
8
9 //先判斷是否指定了一個(gè)年份和月份，沒有則根據(jù)當(dāng)前的年和月份顯示
10 if($ReqDate==""){
11 $pyear=date("Y");
12 $pmonth=date("m");
13 $CurrentDate=date("Y-m-j");
14 }else{
15 $ReqDateStrs = explode("-",$ReqDate );
16 $pyear=$ReqDateStrs[0];
17 $pmonth=$ReqDateStrs[1];
18 $CurrentDate=$ReqDate;
19 }
20
21//以下的代碼生成日歷顯示的表格頭內(nèi)容
22?>
23<tr align="center" bgcolor="#dddddd">
24 <td width="14%" height="19" align="center">
25 <input type="button" value="<<" onclick="JavaScript:location.href='?ReqDate=<? echo date("Y-m-j",mktime(0,0,0,$pmonth-1,1,$pyear)); ?>'">
26 </td>
27 <td colspan="5" align="center">
28 <? echo $CurrentDate; ?>
29 </td>
30 <td width="14%" align="center">
31 <input type="button" value=">>" onclick="JavaScript:location.href='?ReqDate=<? echo date("Y-m-j",mktime(0,0,0,$pmonth+1,1,$pyear)); ?>'">
32 </td>
33 </tr>
34 <tr align="center" bgcolor="#CCCCCC">
35 <td width="14%" height="19"> 日</td>
36 <td width="14%"> 一</td>
37 <td width="14%"> 二</td>
38 <td width="14%"> 三</td>
39 <td width="14%"> 四</td>
40 <td width="14%"> 五</td>
41 <td width="14%"> 六</td>
42 </tr>
43 <tr align=center bgcolor=ffffff height=19>
44<?
45 //獲得要顯示月份的第一天為周幾
46 $nunmonthstart=date('w',mktime(0,0,0,$pmonth,1,$pyear));
47 //獲得要顯示月份一共有多少天
48 $nunmonthend=date('t',mktime(0,0,0,$pmonth,1,$pyear));
49 //判斷顯示日歷需要用幾行表格來顯示（每行顯示7天）
50 if($nunmonthstart+$nunmonthend<36){
51 $maxi=36;
52 }
53 else{
54 $maxi=43;
55 }
56 //循環(huán)生成表格并顯示
57 for( $i=1; $i <$maxi; $i++)
58  {
59 $iv=$i-$nunmonthstart;
60  if($i>$nunmonthstart && $i<=$nunmonthend+$nunmonthstart) {
61 //如果為顯示的是今天則用紅色背景顯示
62 if($iv==date("d") && date("n")==$pmonth && date("Y")==$pyear){
63 print( "<td align=center bgcolor=ffaaaa><a href='#' target=_blank>".$iv."</a></td>" );
64 }else{
65 print( "<td align=center><a href='#' target=_blank>".$iv."</a></td>" );
66 }
67 }else{
68 print( "<td> </td>" );
69 }
70
71 //如果能被7整除（每行顯示7個(gè)）則輸出一個(gè)換行
72 if ($i%7 ==0) {
73 print( "</tr><tr align=center bgcolor=ffffff height=19>" );
74 }
75 }
76?>
77</tr>
78</table>
79</body>
80</html>
具體實(shí)現(xiàn)效果如下：
下面是根據(jù)上述算法和邏輯在NoahWeb中的具體實(shí)現(xiàn)代碼：
1<% @ Page language="c#" AutoEventWireup="false" Inherits="NoahWeb.Engine" %>
2<style>
3td {}{ font-family: "宋體"; font-size:9pt}
4</style>
5<!-- NoahComment 以下為NoahWeb表現(xiàn)層通過該日歷算法實(shí)現(xiàn)的具體代碼 -->
6
7<!-- NoahComment 先判斷是否指定了一個(gè)年份和月份，沒有則根據(jù)當(dāng)前的年和月份顯示 -->
8<!-- NoahIf EX="[_root.ReqDate]==[null]" -->
9 <!-- NoahSetValue SetName="CurrentDate" SetValue="date('O',mktime())" -->
10<!-- NoahElse -->
11 <!-- NoahSetValue SetName="CurrentDate" SetValue="[_root.ReqDate]" -->
12<!-- NoahEndIf -->
13
14<!-- NoahSetValue SetName="pyear" SetValue="date('Y',mktime([CurrentDate]))" -->
15<!-- NoahSetValue SetName="pmonth" SetValue="date('n',mktime([CurrentDate]))" -->
16
17<!-- NoahComment 以下的代碼生成日歷顯示的表格頭內(nèi)容 -->
18<body bgcolor="eeeeee">
19<table width="180" cellpadding="0" cellspacing="1" bgcolor="dddddd" align=center>
20<tr align="LEFT" bgcolor="#dddddd">
21 <td width="14%" height="19" align="center">
22 <input type="button" value="<<" onclick="JavaScript:location.href='?ReqDate=<!-- NoahValue ValueName="date('O',totime(mktime([CurrentDate]),0,-1))" -->'">
23 </td>
24 <td colspan="5" align="center">
25 <!-- NoahValue ValueName="[pyear]" -->年<!-- NoahValue ValueName="[pmonth]" -->月
26 </td>
27 <td width="14%" align="center">
28 <input type="button" value=">>" onclick="JavaScript:location.href='?ReqDate=<!-- NoahValue ValueName="date('O',totime(mktime([CurrentDate]),0,1))" -->'">
29 </td>
30 </tr>
31 <tr align="center" bgcolor="#CCCCCC">
32 <td width="14%" height="19"> 日</td>
33 <td width="14%"> 一</td>
34 <td width="14%"> 二</td>
35 <td width="14%"> 三</td>
36 <td width="14%"> 四</td>
37 <td width="14%"> 五</td>
38 <td width="14%"> 六</td>
39 </tr><tr bgcolor=ffffff height=19>
40
41<!-- NoahComment 獲得要顯示月份的第一天為周幾 -->
42<!-- NoahSetValue SetName="nunmonthstart" SetValue="date('w',mktime([pyear],[pmonth],1,0,0,0))" -->
43
44<!-- NoahComment 獲得要顯示月份一共有多少天 -->
45<!-- NoahSetValue SetName="nunmonthend" SetValue="date('t',mktime([pyear],[pmonth],1,0,0,0))" -->
46
47<!-- NoahComment 判斷顯示日歷需要用幾行表格來顯示（每行顯示7天） -->
48<!-- NoahIf EX="[nunmonthstart]+[nunmonthend]<36" -->
49 <!-- NoahSetValue SetName="maxi" SetValue="36" -->
50<!-- NoahElse -->
51 <!-- NoahSetValue SetName="maxi" SetValue="43" -->
52<!-- NoahEndIf -->
53
54<!-- NoahComment 循環(huán)生成表格并顯示 -->
55<!-- NoahForStart InitVar="i" InitValue="1" EX="[i]<[maxi]" NextVar="i" NextValue="[i]+1" -->
56
57 <!-- NoahSetValue SetName="iv" SetValue="[i]-[nunmonthstart]" -->
58
59 <!-- NoahComment 如果為顯示的是今天則用紅色背景顯示 -->
60 <!-- NoahIf EX="[iv]==date('d',mktime())&&date('n',mktime())==[pmonth]&&date('Y',mktime())==[pyear]" -->
61 <td align="center" bgcolor=ffaaaa>
62 <!-- NoahElse -->
63 <td align="center">
64 <!-- NoahEndIf -->
65
66 <!-- NoahComment 如果是一個(gè)有效的日期則輸出該日期并超鏈接，如果不為一有效日期則不做輸出(由于NoahWeb控制HTML代碼比較方便所以邏輯在這做了一點(diǎn)改變讓我少寫點(diǎn)代碼，哈) -->
67 <!-- NoahIf EX="[i]>[nunmonthstart]&&[i]<=[nunmonthend]+[nunmonthstart]" -->
68 <a href='#' target=_blank><!-- NoahValue ValueName="[iv]" --></a>
69 <!-- NoahEndIf --> </td>
70
71 <!-- NoahComment 如果能被7整除（每行顯示7個(gè)）則輸出一個(gè)換行 -->
72 <!-- NoahIf EX="[i]%7==0" -->
73 </tr><tr bgcolor=ffffff height=19>
74 <!-- NoahEndIf -->
75
76<!-- NoahForEnd -->
77</tr>
78</table>
79</body>
80</html>
具體實(shí)現(xiàn)效果如下：
全屏查看代碼
請下載示意源代碼
本文鏈接：http://www.95time.cn/tech/program/2005/2585.asp 
出處：藍(lán)色理想
責(zé)任編輯：藍(lán)色
◎進(jìn)入論壇網(wǎng)絡(luò)編程版塊參加討論
|
