JavaScript 寫日曆

JavaScript实现网页日历功能

最新推荐文章于 2025-07-29 23:06:26 发布

原创最新推荐文章于 2025-07-29 23:06:26 发布 · 10w+ 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #firefox #calendar #border #table #function

JavaScript 专栏收录该内容

5 篇文章

订阅专栏

<title>dwin.net - web application - calendar</title>
<!--
Written by David NG @ http://dwin.net
Copyright(c) 1998-2004 dwin.net all rights reserved

Start: 2003-06-21 00:08
Finish: 2003-06-22 02:50 Calendar

2003-06-22 15:35
Add Time

2003-06-22 18:55
bug fixed

2003-06-23 02:49
bug fixed

2003-06-25 10:10
emulate <select>

2007-08-09 22:16
firefox support :
Remove all VML and other effect which only work on IE to support firefox,
So I can demonstrate the main feature of the calendar.
-->
<body>
Written by David NG @ <a href="http://dwin.net">http://dwin.net</a><BR>
Copyright(c) 1998-2007 dwin.net all rights reserved<BR><BR>

Check your calendar.<BR>
Using this method to avoid the FOR LOOP while you change the month.

<div style='position:absolute;left:0;top:25;width:200;height:150;border:2px inset #7A96DF;overflow:visable'>
  <table style='position:absolute;left:0;top:0;width:100%;height:12%;color:#D8E4F8;background:#7A96DF;font-size:9pt;text-align:center'><tr><td width="14.29%">S</td><td width="14.29%">M</td><td width="14.29%">T</td><td width="14.29%">W</td><td width="14.29%">T</td><td width="14.29%">F</td><td>S</td></tr></table>
  <div id='calendarDiv' style='position:absolute;left:0;top:18%;width:200%;height:82%;border:1px solid red'>
   <script>
   iHTML = "<table style='position:absolute;left:6.25%;top:0;width:93.75%;height:100%;font-size:9pt;text-align:center;' cellSpacing=0>";
   for( i=0; i<6; i++ )
    iHTML += "<td> </td>";
   for( i=1; i<56; i++ )
   {
    if( (i+5)%13 == 0 )
     iHTML += "</tr><tr>";
    iHTML += "<td>"+ (i-6*parseInt((i+5)/13)) +"</td>";
   }
   for( i=0; i<4; i++ )
    iHTML += "<td> </td>";
   iHTML += "<tr><td>30</td><td>31</td>"
   for( i=0; i<11; i++ )
    iHTML += "<td> </td>";
   iHTML += "</tr></table>"
   document.write(iHTML)
   </script>
  </div>
</div>
</div>

function ShowDate( iYear, iMonth )
{
var firstDay = 7-new Date(iYear,iMonth-1).getDay();
document.getElementById('calendarDiv').style.left = -document.getElementById('calendarDiv').offsetWidth* (1/14) *firstDay;
}

window.onload = function()
{
var t = new Date()
document.getElementById('yearIpt').value = t.getFullYear();
document.getElementById('monthSlt').selectedIndex = t.getMonth();
ShowDate(t.getFullYear(),t.getMonth()+1);
}

</script>