• js生成动态日历

    效果图：




     

     看代码：

    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> 
  • 相关阅读:
    Struts2的%,#,$的区别,UI标签及其表单radio,checkbox,select回显数据(七)
    Struts2的控制标签库和数据标签库(六)
    Struts2从后端向前端传递数据和OGNL访问用户自定义静态方法(五)
    两个小例子登录和显示全部用户信息的模块(四)
    Struts2的ServletAPI的获取和各种类型的数据获取(三)
    Action的三种实现方式,struts.xml配置的详细解释及其简单执行过程(二)
    Struts2的 两个蝴蝶飞,你好 (一)
    虚拟机安装Centos7系统后优化操作
    Java进程故障排查（CPU资源占用高，接口响应超时，功能接口停滞等）
    zabbix企业微信报警实现
  • 原文地址：https://www.cnblogs.com/tancp/p/3876830.html
Copyright © 2020-2023  润新知