CSDN博客

img dewin

JavaScript 寫日曆

发表于2004/1/8 11:37:00  681人阅读

<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:300;top:150;width:200;height:180;overflow:visable'>

 <table style='width:100%;font-size:9pt' >
  <tr>
   <td>
    <input id='yearIpt' style='font-size:9pt' size=5 >
   </td>
   <td>
    <select id='monthSlt' >
     <option>Jan<option>Feb<option>Mar<option>Apr<option>May<option>Jun<option>Jul<option>Aug<option>Sep<option>Oct<option>Nov<option>Dec
    </select>
   </td>
   <td>
    <input type="button" value="change" onclick="ShowDate(document.getElementById('yearIpt').value|0, document.getElementById('monthSlt').selectedIndex+1)" >
   </td>
  </tr>
 </table>

 <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>&nbsp;</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>&nbsp;</td>";
   iHTML += "<tr><td>30</td><td>31</td>"
   for( i=0; i<11; i++ )
    iHTML += "<td>&nbsp;</td>";
   iHTML += "</tr></table>"
   document.write(iHTML)
   </script>
  </div>
 </div>
</div>

 

 

<script>

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>

0 0

相关博文

我的热门文章

img
取 消
img