效果图：


 

看代码：

  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. Got error creating database manager: java.io.IOException解决方法

    14/03/26 23:03:55 ERROR tool.BaseSqoopTool: Got error creating database manager: java.io.IOException ...

  2. HW5.2

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

  3. JavaScript----this陷阱的最全收集

    原文翻译: JavaScript来自一门健全的语言,所以你可能觉得JavaScript中的this和其他面向对象的语言如java的this一样,是指存储在实例属性中的值.事实并非如此,在JavaScr ...

  4. Supervisor的安装与使用入门

    Supervisor是一个进程管理工具,官方的说法 自己开发的应用往往也希望做到随系统自动启动, 而且启动之后最好还能方便的控制其停止/重启. 传统的做法是在 /etc/init.d/ 下建立启动脚本 ...

  5. IOS获取物理尺寸中7Plus中获取的是7的物理尺寸

    IOS获取物理尺寸中7Plus中获取的是7的物理尺寸: 在开发调试过程中我的7Plus手机获取[uiscreen mainscreen].bounds为750  .1334. 解决方案:在手机中的显示 ...

  6. android开源项目学习

    FBReaderJ FBReaderJ用于Android平台的电子书阅读器,它支持多种电子书籍格式包括:oeb.ePub和fb2.此外还支持直接读取zip.tar和gzip等压缩文档. 项目地址:ht ...

  7. 向架构师进军---&gt;怎样编写软件架构文档

    假设你对项目管理.系统架构有兴趣,请加微信订阅号"softjg",增加这个PM.架构师的大家庭 问:为什么要编写软件架构文档,它的优点是什么? 答: 有文档的架构有助于不同利益相关 ...

  8. linux学习之八---Linux进程基础知识

    一.linux进程 linux是一个多用户多任务的操作系统. 多用户是指多个用户能够在同一时间使用计算机. 多任务是指linux能够同一时候运行几个任务. 进程简单来说就是执行中的程序,Linux系统 ...

  9. uva 11270 - Tiling Dominoes(插头dp)

    题目链接:uva 11270 - Tiling Dominoes 题目大意:用1∗2木块将给出的n∗m大小的矩阵填满的方法总数. 解题思路:插头dp的裸题,dp[i][s]表示第i块位置.而且该位置相 ...

  10. 在Linux环境中使用Ext3文件系统

      Linux缺省情况下使用的文件系统为Ext2,ext2文件系统的确高效稳定.但是,随着Linux系统在关键业务中的应用,Linux文件系统的弱点也渐渐显露出来了:其中系统缺省使用的ext2文件系统 ...