首页 > 代码库 > js生成动态日历

js生成动态日历

2024-07-14 18:59:38   228人阅读

效果图：

 




 

 看代码：

 

 

Html代码  收藏代码
  1. <html>  
  2.     <head>  
  3.     <title>动态日历</title>  
  4.     <style type="text/css">  
  5.         table{border:1px solid white;}  
  6.         thead tr{}  
  7.         thead tr td{text-align:center;}  
  8.         #calendar tr td{color: #000000;text-decoration: none;text-align:center;}  
  9.     </style>  
  10.       
  11.     </head>   
  12.     <body>  
  13.         年份：<select id="selYear" name="year" onchange="changeCalendar()"></select>  
  14.         月份：<select id="selMonth" name="month" onchange="changeCalendar()"></select>  
  15.         <table width="100%" border="1" cellspacing="0" cellpadding="1">  
  16.             <thead>  
  17.             <tr>  
  18.                 <td>Sunday</td>                    
  19.                 <td>Monday</td>  
  20.                 <td>Tuesday</td>  
  21.                 <td>Wednesday</td>                    
  22.                 <td>Thursday</td>  
  23.                 <td>Friday</td>  
  24.                 <td>Saturday</td>  
  25.             </tr>  
  26.             </thead>  
  27.             <tbody id="calendar"></tbody>  
  28.         </table>  
  29.     </body>  
  30.     <script type="text/javascript">  
  31.         (function(){  
  32.             var selYear = document.getElementById("selYear");  
  33.             var selMonth = document.getElementById("selMonth");  
  34.           
  35.             var date = new Date();  
  36.             var year = date.getFullYear();  
  37.             var month = date.getMonth() + 1;  
  38.             var day = date.getDate();  
  39.             //生成当前年往前推10往后推5的数据  
  40.             for(var i = year - 10,len = year + 5; i < len; i++){  
  41.                 var opt = new Option(i + "年", i);  
  42.                 if(i == year) opt.selected = true;  
  43.                 selYear.options.add(opt);  
  44.             }  
  45.             //生成月份数据  
  46.             for(var j = 1; j <= 12; j++){  
  47.                 var m = j < 10 ? "0" + j : j;  
  48.                 var opt = new Option(m + "月", m);  
  49.                 if(j == month) opt.selected = true;  
  50.                 selMonth.options.add(opt);  
  51.             }  
  52.             //显示当前月日历  
  53.             showCalendar(year, month);  
  54.         })();  
  55.           
  56.         //得到每月的天数  
  57.         function getDaysOfMonth(year, month){  
  58.             if(year && month){  
  59.                 if(month == 2){  
  60.                     //2月闰年判断  
  61.                     if((year % 4 == 0 && year % 100 !=0) || year % 400 == 0){  
  62.                         return 29;  
  63.                     }  
  64.                     return 28;  
  65.                 }  
  66.                 var bigMonth = [1,3,5,7,8,10,12];  
  67.                 var littleMonth = [4,6,9,11];  
  68.                 for(var m in bigMonth){  
  69.                     if(bigMonth[m] == month)  
  70.                         return 31;  
  71.                 }  
  72.                 for(var m in littleMonth) {  
  73.                     if(littleMonth[m] == month)  
  74.                         return 30;  
  75.                 }  
  76.             }  
  77.         }  
  78.           
  79.         //根据年月生成日历  
  80.         function showCalendar(year, month){  
  81.             if(year && month){  
  82.                 var tbody = document.getElementById("calendar");  
  83.                 //生成前删除之前的行  
  84.                 for(var i = 0,len =tbody.rows.length;i< len;i++){  
  85.                     tbody.deleteRow();  
  86.                 }  
  87.                 var date = new Date(year, month - 1, 1);//month月的第一天  
  88.                 var day = date.getDay();//星期  
  89.                 var days = getDaysOfMonth(year, month);//month月的总天数  
  90.                 var temp = Math.floor((days + day) / 7);  
  91.                 var rows = (days + day) % 7 == 0 ? temp : (temp + 1);//要循环的行数  
  92.                 var d = 1;  
  93.                 for(var i = 1; i <= rows; i++){//循环行  
  94.                     var tr = document.createElement("tr");  
  95.                     for(var j = 1; j <= 7; j++){//循环列  
  96.                         var td = document.createElement("td");  
  97.                         //超过最大天数赋空  
  98.                         if(d > days){  
  99.                             td.innerHTML = "";  
  100.                             tr.appendChild(td);  
  101.                             continue;  
  102.                         }  
  103.                         if(i == 1){  
  104.                             //第一行判断month月第一天是星期几，例如星期二前面空两个周日、周一  
  105.                             if(j >= day + 1){  
  106.                                 var html = "<input type=‘checkbox‘ name=‘chkDay‘>";  
  107.                                 td.innerHTML = html + (d < 10 ? "0" + d : d);  
  108.                                 d++;  
  109.                             }else{  
  110.                                 td.innerHTML = "";  
  111.                             }  
  112.                         } else {  
  113.                             var html = "<input type=‘checkbox‘ name=‘chkDay‘>";  
  114.                             td.innerHTML = html + (d < 10 ? "0" + d : d);  
  115.                             d++;  
  116.                         }  
  117.                         tr.appendChild(td);  
  118.                     }  
  119.                     tbody.appendChild(tr);  
  120.                 }  
  121.             }  
  122.         }  
  123.           
  124.         function changeCalendar(){  
  125.             var y = document.getElementById("selYear").value;  
  126.             var m = document.getElementById("selMonth").value;  
  127.             showCalendar(y, m);  
  128.         }  
  129.     </script>  
  130. </html> 


联系
我们