效果图：


 

看代码：

  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>

js生成动态日历的更多相关文章

  1. js生成动态树状结构及排序

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 利用scrapy-splash爬取JS生成的动态页面

    目前,为了加速页面的加载速度,页面的很多部分都是用JS生成的,而对于用scrapy爬虫来说就是一个很大的问题,因为scrapy没有JS engine,所以爬取的都是静态页面,对于JS生成的动态页面都无 ...

  3. ABP项目中使用Swagger生成动态WebAPI

    本文是根据角落的白板报的<使用ABP实现SwaggerUI,生成动态webapi>一文的学习总结,感谢原文作者角落的白板报. 1 安装Swashbuckle.core 1.1 选择WebA ...

  4. 如何用python抓取js生成的数据 - SegmentFault

    如何用python抓取js生成的数据 - SegmentFault 如何用python抓取js生成的数据 1赞 踩 收藏 想写一个爬虫,但是需要抓去的的数据是js生成的,在源代码里看不到,要怎么才能抓 ...

  5. 如何用phpcms将静态网页生成动态网页？

    在前两篇随笔中已经简单介绍了phpcms,那么现在让我们来看一下如何用phpcms将静态网页生成动态网页? 1.在templates文件夹下新建模板文件夹ceshi(名字可以自己随笔起) 2.在ces ...

  6. js生成pdf报表

    由于前台html已经动态生成报表,而且,前台有一个功能,一个date range组件,当你拖动的时候,报表会在不提交到后台的情况下动态变化.因此需要用到js生成生报表: 用到的组件: jquery.j ...

  7. js 生成二维码图片

    1.用纯JavaScript实现的微信二维码图片生成器 QRCode.js是javascript实现二维码(QRCode)制作生成库. QRCode.js有着良好的跨浏览器兼容性(高版本使用HTML5 ...

  8. Selenium/HtmlUnit设置代理获取JS生成的网页

    通常我们使用Java提供的HttpURLConnection或者Apache的HttpClient获取的网页源代码都是直观可见的,其代码的内容和通过浏览器右键网页->点击查看网页源代码的内容一致 ...

  9. js/jq 动态添加的元素不能触发绑定事件解决方案

    <!-- Copyright 2017-10-27, Jachin QQ: 381558301 Email: 381558301@qq.com 请看看你们的版本并对号入座: jquery1.6版 ...

随机推荐

  1. JBOSS实现RMI时注意的问题

    使用JBOSS部署EJB服务后通过RMI访问报错: javax.naming.CommunicationException: Could not obtain connection to any of ...

  2. js学习之原型prototype（一)

    1.javascript中的每个引用类型(原生的.和自定义的)都有prototype属性,Javascript中对象的prototype属性的解释是:返回对象类型原型的引用. A.prototype ...

  3. Delphi- 调用存储过程的方法

    Delphi控件里拉一个TADOStoredProc,配置好相关链系,具体的操作列子如下: procedure TForm1.btnFirstClick(Sender: TObject); begin ...

  4. CentOS 修改IP地址, DNS, 网关

    一.CentOS 修改IP地址 修改对应网卡的IP地址的配置文件# vi /etc/sysconfig/network-scripts/ifcfg-eth0 修改以下内容DEVICE=eth0 #描述 ...

  5. .ssh 文件夹权限设置问题

    .ssh 文件夹权限 问题 今天遇到了 关于.ssh 文件夹夹 设置什么权限合适问题 :答案是 700 chmod 700 .ssh

  6. zoj 3672 思考题

    http://acm.zju.edu.cn/onlinejudge/showProblem.do? problemId=4915 真是老了.脑子不会动了,可是事实上就算如今搜了题解A了,还是没总结出思 ...

  7. PreferenceActivity 自动保存属性

    package com.example.preference; import android.content.Context; import android.os.Bundle; import and ...

  8. RHCA442学习笔记-Unit10内存地址及分配

      Unit 10 Memory Addressing and Allocation 内存地址及分配 学习目标: A. 虚拟地址与物理地 B. 调整内存地址分配 C. 解析内存溢出    10.1 O ...

  9. 常用工具之stunnel

    The stunnel program is designed to work as an SSL encryption wrapper between remote client and local ...

  10. sudo 免密码

    转自:sudo 免密码 很多都是修改/etc/sudoers权限为740再加上一句 ALL=NOPASSWD:ALL 或者加一句 yourname ALL=(ALL) NOPASSWD: ALL 然后 ...