效果图：


 

看代码：

  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. input子系统分析

    ------------------------------------------ 本文系本站原创,欢迎转载! 转载请注明出处:http://ericxiao.cublog.cn/ -------- ...

  2. 使用Visual Studio 2013编写可维护的本地可视化(natvis)

    在Visual Studio 2012中,我们介绍了创建可视化使用原生类型的能力natvis文件. Visual Studio 2013中包含了一些改进,使其更容易编写可视化的类,在内部利用收集来存储 ...

  3. novnc ignoring socket not reay

  4. 动态规划之HDU水题

    做水题的感觉真好系列 HDU 2084 数塔 1: 12: 1 23: 1 2 34: 1 2 3 45: 1 2 3 4 5 dp[i][j]第i行第j个数取得的最大值dp[i][j] = max( ...

  5. 【转】使用VisualSVN Server搭建SVN服务器

    http://blog.csdn.net/han_yankun2009/article/details/7856992 使用 VisualSVN Server来实现主要的 SVN功能则要比使用原始的  ...

  6. ubuntu压缩解压

    ubuntu安装解压rar   一般通过默认安装的ubuntu是不能解压rar文件的,只有在安装了rar解压工具之后,才可以解压.其实在ubuntu下安装rar解压工具是非常简单的,只需要两个步骤就可 ...

  7. Android SimpleAdapter源码详解

    一直没认真看过android的源码,也不太敢看,稀里糊涂也敲了一年的代码,现在想好好学习了,就把常用的源码都看了一下,小伙伴们来涨姿势吧,有错误的地方,直接指出,我脸厚不怕丢人.来吧. 刚开始学and ...

  8. shell 中函数放回字符串问题

    shell 中函数放回字符串问题 shell 中不可以直接 return 字符串 ,可以return 数字.如果要return 字符串 改为 echo "hello world" ...

  9. HashMap早知道

    第一眼hashmap始终Collection那个地点 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGxmMTIzMzIx/font/5a6L5L2T/f ...

  10. Hdu 2473（并查集删除操作） Junk-Mail Filter

    有木有非常吊 加强 加强版   啊  ,看了都不敢做了   .后来先做了食物链这个我还是看过的.但还是A不掉,没明确神魔意思 .总而言之.大牛的博客是个好东西.我就那么看了一下,还是不懂怎莫办啊,哎, ...