效果图：


 

看代码：

  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. 动态加载JS脚本的4种方法

    实现OPOA(One Page One Application)时,必须使用动态加载js. 也就是在用户选择某个菜单项后,再动态加载对应的全部js到客户端. 动态加载js的情况很多啊,比如解决ajax ...

  2. MVC 5 第三章 HTML Helper

    提及到HTML helper大家肯定不应该陌生, 因为在书写MVC View的时候肯定需要使用到它.一个HTML Help就是一个返回HTML字符串的方法,这个字符串表示你所期望的类型的内容.例如,你 ...

  3. 通过js获取计算机内网ip，计算机名，mac地址

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  4. HW4.2

    import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...

  5. ehcache在windows下使用RMI同步时出现的问题

    问题 最近的项目由于OP分配的机器没有配Redis或Mem,为了解决tomcat的集群问题,项目使用了Ehcache作为缓存.Ehcache使用RMI进行同步,但在本地测试时出现了缓存未同步的问题.最 ...

  6. Android camera采集视频 X264编码

    参考 http://blog.csdn.net/zblue78/article/details/6058147 感谢 ExperiencesOfCode 硬件平台:CPU Intel G630 @2. ...

  7. 大型机汇编（mainframe assembler/HLASM）之COBOL解惑

    IDENTIFICATION DIVISION.             PROGRAM-ID. HELLO.                   ENVIRONMENT DIVISION.      ...

  8. 包含块、层叠上下文、BFC

    包含块 什么是包含块?简单来说,就是决定一个元素大小和定位的元素.一个元素会为它的内部元素创建包含块,但也不能说元素的包含块就是它的父元素: 1.position:fixed 的元素 包含块是当前可视 ...

  9. GridLookUpEdit 简单应用

    在属性列表中 Properties  -> view  即可打开设计器进行编辑 后台代码: DataTable dtt = stu.StuGetFind(sxml, 1, 50).Tables[ ...

  10. java transient简单介绍

    我们都知道一个对象仅仅要实现了Serilizable接口,这个对象就能够被序列化,java的这样的序列化模式为开发人员提供了非常多便利,我们能够不必关系详细序列化的过程,仅仅要这个类实现了Serili ...