workday.html 9.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  6. <meta http-equiv="x-ua-compatible" content="ie=7"/>
  7. <title>HTML+Jquery实现万年历</title>
  8. <link href="images/all.css" rel="stylesheet" type="text/css"/>
  9. <link href="images/skin.css" rel="stylesheet" type="text/css"/>
  10. <link href="images/fontSize12.css" rel="stylesheet" type="text/css"/>
  11. <link href="images/calendar.css" rel="stylesheet" type="text/css"/>
  12. <script type="text/javascript" src="js/jquery.js"></script>
  13. <script type="text/javascript" src="js/calendar.js"></script>
  14. </head>
  15. <body style="height:98%;">
  16. <div class="main">
  17. <div class="pathBar" style="margin-bottom:2px;">
  18. <div class="pathBarPos">
  19. </div>
  20. </div>
  21. <div id="myrl" style="width:820px; margin-left:auto; margin-right:auto; height:840px; overflow:hidden;">
  22. <form name=CLD>
  23. <TABLE class="biao" width="800px">
  24. <TBODY>
  25. <TR>
  26. <TD class="calTit" colSpan=7 style="height:30px;padding-top:3px;text-align:center;">
  27. <a href="#" title="上一年" id="nianjian" class="ymNaviBtn lsArrow"></a>
  28. <a href="#" title="上一月" id="yuejian" class="ymNaviBtn lArrow"></a>
  29. <div style="width:250px; float:left; padding-left:230px;">
  30. <span id="dateSelectionRili" class="dateSelectionRili"
  31. style="cursor:hand;color: white; border-bottom: 1px solid white;"
  32. onclick="dateSelection.show()">
  33. <span id="nian" class="topDateFont"></span><span
  34. class="topDateFont">年</span><span id="yue"
  35. class="topDateFont"></span><span
  36. class="topDateFont">月</span>
  37. <span class="dateSelectionBtn cal_next"
  38. onclick="dateSelection.show()">▼</span></span> &nbsp;&nbsp;<font id=GZ
  39. class="topDateFont"></font>
  40. </div>
  41. <!--新加导航功能-->
  42. <div style="left: 250px; display: none;" id="dateSelectionDiv">
  43. <div id="dateSelectionHeader"></div>
  44. <div id="dateSelectionBody">
  45. <div id="yearList">
  46. <div id="yearListPrev" onclick="dateSelection.prevYearPage()">&lt;</div>
  47. <div id="yearListContent"></div>
  48. <div id="yearListNext" onclick="dateSelection.nextYearPage()">&gt;</div>
  49. </div>
  50. <div id="dateSeparator"></div>
  51. <div id="monthList">
  52. <div id="monthListContent"><span id="SM0" class="month"
  53. onclick="dateSelection.setMonth(0)">1</span><span
  54. id="SM1" class="month" onclick="dateSelection.setMonth(1)">2</span><span
  55. id="SM2" class="month" onclick="dateSelection.setMonth(2)">3</span><span
  56. id="SM3" class="month" onclick="dateSelection.setMonth(3)">4</span><span
  57. id="SM4" class="month" onclick="dateSelection.setMonth(4)">5</span><span
  58. id="SM5" class="month" onclick="dateSelection.setMonth(5)">6</span><span
  59. id="SM6" class="month" onclick="dateSelection.setMonth(6)">7</span><span
  60. id="SM7" class="month" onclick="dateSelection.setMonth(7)">8</span><span
  61. id="SM8" class="month" onclick="dateSelection.setMonth(8)">9</span><span
  62. id="SM9" class="month" onclick="dateSelection.setMonth(9)">10</span><span
  63. id="SM10" class="month" onclick="dateSelection.setMonth(10)">11</span><span
  64. id="SM11" class="month curr" onclick="dateSelection.setMonth(11)">12</span>
  65. </div>
  66. <div style="clear: both;"></div>
  67. </div>
  68. <div id="dateSelectionBtn">
  69. <div id="dateSelectionTodayBtn" onclick="dateSelection.goToday()">今天</div>
  70. <div id="dateSelectionOkBtn" onclick="dateSelection.go()">确定</div>
  71. <div id="dateSelectionCancelBtn" onclick="dateSelection.hide()">取消</div>
  72. </div>
  73. </div>
  74. <div id="dateSelectionFooter"></div>
  75. </div>
  76. <a href="#" id="nianjia" title="下一年" class="ymNaviBtn rsArrow" style="float:right;"></a>
  77. <a href="#" id="yuejia" title="下一月" class="ymNaviBtn rArrow" style="float:right;"></a>
  78. <!-- <a id="jintian" href="#" title="今天" class="btn" style="float:right; margin-top:-2px; font-size:12px; text-align:center;">今天</a>-->
  79. </TD>
  80. </TR>
  81. <TR class="calWeekTit" style="font-size:12px; height:20px;text-align:center;">
  82. <TD width="100" class="red">星期日</TD>
  83. <TD width="100">星期一</TD>
  84. <TD width="100">星期二</TD>
  85. <TD width="100">星期三</TD>
  86. <TD width="100">星期四</TD>
  87. <TD width="100">星期五</TD>
  88. <TD width="100" class="red">星期六</TD>
  89. </TR>
  90. <SCRIPT language="JavaScript">
  91. var gNum;
  92. for (var i = 0; i < 6; i++) {
  93. document.write('<tr align=center height="50" id="tt">');
  94. for (var j = 0; j < 7; j++) {
  95. gNum = i * 7 + j ;
  96. <!--onMouseOver="mOvr(this,' + gNum + ');" onMouseOut="mOut(this);"-->
  97. document.write('<td id="GD' + gNum + '" on="0" ><font id="SD' + gNum + '" style="font-size:22px;" face="Arial"');
  98. if (j == 0) document.write('color=red');
  99. if (j == 6)
  100. if (i % 2 == 1) document.write('color=red');
  101. else document.write('color=red');
  102. document.write(' TITLE=""> </font><br><font id="LD' + gNum + '" size=2 style="white-space:nowrap;overflow:hidden;cursor:default;"> </font></td>');
  103. }
  104. document.write('</tr>');
  105. }
  106. </SCRIPT>
  107. </tbody>
  108. </TABLE>
  109. <table class="biao" width="800px">
  110. <tr>
  111. <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
  112. <tr align="center">
  113. <td><input type=button value="元旦节" class="button6" onclick=dateSelection.goHoliday(0)></td>
  114. <td><input type=button value='春 节' class="button6" onclick=dateSelection.goHoliday(1)></td>
  115. <td><input type=button value='清明节' class="button6" onclick=dateSelection.goHoliday(3)></td>
  116. <td><input type=button value='五一节' class="button6" onclick=dateSelection.goHoliday(4)></td>
  117. <td><input type=button value='端午节' class="button6" onclick=dateSelection.goHoliday(5)></td>
  118. <td><input type=button value='中秋节' class="button6" onclick=dateSelection.goHoliday(8)></td>
  119. <td><input type=button value="国庆节" class="button6" onclick=dateSelection.goHoliday(9)></td>
  120. </tr>
  121. </table></td>
  122. </tr>
  123. </table></td>
  124. <td width="100%" align="center"><table border="1" cellpadding="5" cellspacing="5">
  125. <tr align="center">
  126. <td><input type=button value='提交' class="button6" onclick=h_submit()></td>
  127. <td><input type=button value="重置" class="button6" onclick=rebuild()></td>
  128. <td width="25" height="25" bgcolor="#FBBB67">&nbsp;</td>
  129. <td>假 期&nbsp;&nbsp;</td>
  130. <td width="25" bgcolor="#FFFFFF">&nbsp;</td>
  131. <td>工作日&nbsp;&nbsp;</td>
  132. <td width="25" bgcolor="#CFDFF0">&nbsp;</td>
  133. <td>今 日</td>
  134. </tr>
  135. </table></td>
  136. </tr>
  137. </table>
  138. </form>
  139. </div>
  140. </div>
  141. <SCRIPT language="JavaScript">
  142. //提交
  143. function h_submit(){
  144. alert(hDays);
  145. }
  146. //重置
  147. function rebuild(){
  148. hDays=[];
  149. }
  150. </SCRIPT>
  151. <div id="details" style="margin-top:-1px;"></div>
  152. </body>
  153. </html>