js生成动态日历

2022-09-30 19:48:28

效果图：

js生成动态日历

js生成动态日历
 
js生成动态日历

看代码：

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


下一篇：【转】div弹出窗口的制作