Blog 式日历控件

最新推荐文章于 2019-03-22 19:47:01 发布

转载最新推荐文章于 2019-03-22 19:47:01 发布 · 497 阅读

文章标签：

#blog #function #date #calendar #table #javascript

代码专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS和JavaScript实现的日历控件。该控件可根据当前或指定月份显示日历，并突出显示选定日期和今天。此外，还提供了上个月和下个月的切换功能。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>blog式日历控件</title> </head> <body> <mce:script type="text/javascript"></mce:script> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">.Calendar { font-family:Verdana; font-size:12px; background-color:#e0ecf9; text-align:center; width:200px; height:160px; padding:10px; line-height:1.5em; } .Calendar a{ color:#1e5494; } .Calendar table{ width:100%; border:0; } .Calendar table thead{color:#acacac;} .Calendar table td { font-size: 11px; padding:1px; } #idCalendarPre{ cursor:pointer; float:left; padding-right:5px; } #idCalendarNext{ cursor:pointer; float:right; padding-right:5px; } #idCalendar td.onToday { font-weight:bold; color:#C60; } #idCalendar td.onSelect { font-weight:bold; }</style> <div class="Calendar"> <div id="idCalendarPre"><<</div> <div id="idCalendarNext">>></div> <span id="idCalendarYear">2008</span>年 <span id="idCalendarMonth">8</span>月 <table cellspacing="0"> <thead> <tr> <td>日</td> <td>一</td> <td>二</td> <td>三</td> <td>四</td> <td>五</td> <td>六</td> </tr> </thead> <tbody id="idCalendar"> </tbody> </table> </div> <mce:script language="JavaScript"></mce:script> </body> </html>