最新消息:文章中包含代码时,请遵守代码高亮规范!

JavaScript实现简单日历-【转载】

杂项 刘, 勇 310浏览 0评论

页面代码:

  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  2. <html xmlns=“http://www.w3.org/1999/xhtml”>
  3. <head>
  4.     <meta http-equiv=“content-type” content=“text/html;charset=utf-8”>
  5.     <title>JavaScript Sample</title>
  6.     <style type=“text/css”>
  7.         div #dataTextContainer
  8.         {
  9.             border:1px #A5ACB2 solid;
  10.             width: 100px;
  11.             height: 19px;
  12.             text-align: right;
  13.             float:left;
  14.         }
  15.         div #dataTextContainer input
  16.         {
  17.             border-width: 0px;
  18.             border-style: none;
  19.             border-color: transparent;
  20.             width: 68px;
  21.             height: 14px;
  22.             font-size: 12px;
  23.             text-align: left;
  24.         }
  25.         div #dataTextContainer button
  26.         {
  27.             width: 22px;
  28.             height: 19px;
  29.             margin: 0px;
  30.             padding:0px;
  31.             text-align: center;
  32.         }
  33.         div #calendarContainer
  34.         {
  35.             width: 200px;
  36.             height: 100px;
  37.             z-index: 10000;
  38.             font-size: 13px;
  39.         }
  40.     </style>
  41.     <script type=“text/javascript” src=“inputDate.js”></script>
  42. </head>
  43. <body>
  44.     <div id = “dataTextContainer”>
  45.         <input name=“dataText” id=“dateText” type=“text” onfocus=“javascript:getCurrentDay();”/>
  46.         <button onclick=“javascript:displayCalendar();”>
  47.             <img src=“rili.jpg” width=“15” height=“12”>
  48.         </button>
  49.     </div>
  50.     <div id=“calendarContainer”></div>
  51. </body>
  52. </html>

Javascript代码:

  1.     function getCurrentDay()
  2.     {
  3.         var newDate = new Date;
  4.         var odate = document.getElementById(“dateText”);
  5.         var date_year = newDate.getFullYear();
  6.     var date_month = newDate.getMonth() + 1;
  7.     var date_today = newDate.getDate();
  8.         odate.value = date_year+“-“+date_month+“-“+date_today;
  9.     }
  10.     function displayCalendar()
  11. {
  12.     drawCalendar();
  13. }
  14. function closeCalendar()
  15. {
  16.     var oCalendarContainer = document.getElementById(“calendarContainer”);
  17.     oCalendarContainer.innerHTML = “”;
  18. }
  19. function drawCalendar(sYear,sMonth)
  20. {
  21.     var newDate;
  22.     if(arguments[0] == null || arguments[1] == null)
  23.     {
  24.         newDate = new Date();
  25.     }
  26.     else
  27.     {
  28.         newDate = new Date(sYear,sMonth – 1);
  29.     }
  30.     var date_year = newDate.getFullYear();
  31.     var date_month = newDate.getMonth() + 1;
  32.     var date_today = newDate.getDate();
  33.     var date_day = newDate.getDay();
  34.     var nextMonth = date_month + 1;
  35.     var nextYear = date_year;
  36.     var prevMonth = date_month – 1;
  37.     var prevYear = date_year;
  38.     if(sMonth == 12)
  39.     {
  40.         nextMonth = 1;
  41.         nextYear = date_year + 1;
  42.     }
  43.     if(sMonth == 1)
  44.     {
  45.         prevMonth = 12;
  46.         prevYear = date_year – 1;
  47.     }
  48.     var calendarTable = “”;
  49.     calendarTable += ‘<table width=”200″ border=”0″ cellpadding=”0″ cellspacing=”0″ style=”background-color:#0066FF;text-align:center;”>’;
  50.     calendarTable += ‘ <tr style=”background-color:#339999;”>’;
  51.     //向前翻年
  52.     calendarTable += ‘<td colspan=”2″ onclick=”javascript:drawCalendar(‘+(prevYear – 1)+‘,’+prevMonth+‘);”‘+
  53.             ‘ style=”cursor:pointer;background-color:#FF6600;”><<<</td>’;
  54.     //向前翻月
  55.     calendarTable += ‘<td colspan=”2″ onclick=”javascript:drawCalendar(‘+prevYear+‘,’+prevMonth+‘);”‘+
  56.             ‘ style=”cursor:pointer;background-color:#FF6600;”><<</td>’;
  57.     //向后翻月
  58.     calendarTable += ‘<td colspan=”2″ onclick=”javascript:drawCalendar(‘+nextYear+‘,’+nextMonth+‘);”‘+
  59.             ‘ style=”cursor:pointer;background-color:#FF6600;”>>></td>’;
  60.      //向后翻年
  61.      calendarTable += ‘<td colspan=”1″ onclick=”javascript:drawCalendar(‘+(nextYear + 1)+‘,’+nextMonth+‘);”‘+
  62.             ‘ style=”cursor:pointer;background-color:#FF6600;”>>>></td>’;
  63.     calendarTable += ‘ </tr>’;
  64.     //星期表头
  65.     calendarTable += ‘  <tr style=”background-color:#6699FF;”>’;
  66.     calendarTable += ‘      <td>日</td>’;
  67.     calendarTable += ‘      <td>一</td>’;
  68.     calendarTable += ‘      <td>二</td>’;
  69.     calendarTable += ‘      <td>三</td>’;
  70.     calendarTable += ‘      <td>四</td>’;
  71.     calendarTable += ‘      <td>五</td>’;
  72.     calendarTable += ‘      <td>六</td>’;
  73.     calendarTable += ‘  </tr>’;
  74.     //计算一个月内的天数,注意闰月
  75.         var dayNum_in_month = [31,28,31,30,31,30,31,31,30,31,30,31];
  76.         var isleapyear = date_year % 4;
  77.         if(isleapyear == 0)
  78.         {
  79.             dayNum_in_month[1] = 29;
  80.         }
  81.         var month_alldays = dayNum_in_month[date_month – 1];
  82.         //计算行数,line_top表示当前日期上面的行数,包括当前行;line_bot表示当前日期下面的行数,不包括当前行
  83.         var line_top;
  84.         var line_bot;
  85.         if((date_today – date_day + 1) % 7 != 0)
  86.         {
  87.             line_top = Math.floor((date_today – date_day + 1) / 7) + 1;
  88.         }
  89.         else
  90.         {
  91.             line_top = Math.floor((date_today – date_day + 1) / 7);
  92.         }
  93.         if((30 – date_today + date_day + 1) % 7 != 0)
  94.         {
  95.             line_bot = Math.floor((30 – date_today + date_day + 1) / 7) + 1;
  96.         }
  97.         else
  98.         {
  99.             line_bot = Math.floor((30 – date_today + date_day + 1) / 7);
  100.         }
  101.         //定义一个二维数组,预备一个6*7的数组,数组中每个元素对应一个单元格(日期)
  102.         var dateList = new Array([“”],[“”],[“”],[“”],[“”],[“”],[“”]);
  103.         var dateCell;
  104.         for(var i = 1; i < 7; i++)
  105.         {
  106.             //i是行数
  107.             calendarTable += ‘  <tr>’;
  108.             for(var j = 0; j < 7; j++)
  109.             {
  110.                 //j是列数
  111.                 dateList[i][j] = date_today – 7 * (line_top – i + 1) + j – date_day;
  112.                 //如果武器<=0,置空
  113.                 if((date_today – 7 * (line_top – i + 1) + j – date_day) <= 0)
  114.                 {
  115.                     dateList[i][j] = ” “;
  116.                 }
  117.                 //如果日期大于月总天数,则不显示
  118.                 if((date_today – 7 * (line_top – i + 1) + j – date_day) > month_alldays)
  119.                 {
  120.                     dateList[i][j] = ” “;
  121.                 }
  122.                 if(dateList[i][j] != ” “)
  123.                 {
  124.                     //如果单元格不是空,那么可以设置其触发三个事件,共有三个事件
  125.                     //1、单击事件,将当前日期写入文本框
  126.                     //2、鼠标指针移到单元格上,改变背景
  127.                     //3、鼠标指针离开单元格,背景复原
  128.                     dateCell =
  129.                                 ‘<td onclick=”javascript:setDateText(‘+date_year+‘,’+date_month+‘,this.firstChild.nodeValue);”‘+‘onmouseover=”javascript:setFocus(this);”‘+‘  onmouseout=”javascript:setFocusOut(this);”‘‘  style=”cursor:pointer;”>’+dateList[i][j]+‘</td>’;
  130.                     if(i == line_top && j == line_bot)
  131.                     {
  132.                         dateCell =
  133.                                 ‘<td onclick=”javascript:setDateText(‘+date_year+‘,’+date_month+‘,this.firstChild.nodeValue);”‘+‘onmouseover=”javascript:setFocus(this);”‘+‘  onmouseout=”javascript:setFocusOut(this);”‘‘  style=”cursor:pointer;background-color:#FF6600;”>’+dateList[i][j]+‘</td>’;
  134.                     }
  135.                 }
  136.                 else
  137.                 {
  138.                     dateCell = “<td> </td>”;
  139.                 }
  140.                 calendarTable += dateCell;
  141.             }
  142.             calendarTable += ‘</tr>’;
  143.         }
  144.         calendarTable += ‘<tr><td colspan=”7″‘+‘onclick=”javascript:closeCalendar();”‘+‘style=”background-color#339999;cursor:pointer;color:red;font-weight:bold”>’+‘关闭(‘+date_year+“年”+date_month+“月”+‘)</td></tr>’;
  145.         calendarTable += ‘</table>’;
  146.         //将日期写入
  147.         var oCalendarContainer = document.getElementById(“calendarContainer”);
  148.         oCalendarContainer.innerHTML = calendarTable;
  149.     }
  150.     //当鼠标指针指到当前日期单元格
  151.     function setFocus(obj)
  152.     {
  153.         obj.style.backgroundColor = “#FF6600”;
  154.     }
  155.     //当鼠标指针离开当前日期单元格
  156.     function setFocusOut(obj)
  157.     {
  158.         obj.style.backgroundColor = “”;
  159.     }
  160.     //鼠标单击当前单元格
  161.     function setDateText(sYear,sMonth,sDate)
  162.     {
  163.         var oDateText = document.getElementById(“dateText”);
  164.         oDateText.value = sYear + “-“ + sMonth + “-“ + sDate;
  165.     }

转载时请注明出处及相应链接,本文永久地址:https://blog.yayuanzi.com/24135.html


pay_weixin
pay_weixin
微信打赏
pay_weixin
支付宝打赏
感谢您对作者hale的打赏,我们会更加努力!    如果您想成为作者,请点我

您必须 登录 才能发表评论!