js生成动态日历
效果图:
看代码:
- <html>
- <head>
- <title>动态日历</title>
- <style type="text/css">
- table{border:1px solid white;}
- thead tr{}
- thead tr td{text-align:center;}
- #calendar tr td{color: #000000;text-decoration: none;text-align:center;}
- </style>
- </head>
- <body>
- 年份:<select id="selYear" name="year" onchange="changeCalendar()"></select>
- 月份:<select id="selMonth" name="month" onchange="changeCalendar()"></select>
- <table width="100%" border="1" cellspacing="0" cellpadding="1">
- <thead>
- <tr>
- <td>Sunday</td>
- <td>Monday</td>
- <td>Tuesday</td>
- <td>Wednesday</td>
- <td>Thursday</td>
- <td>Friday</td>
- <td>Saturday</td>
- </tr>
- </thead>
- <tbody id="calendar"></tbody>
- </table>
- </body>
- <script type="text/javascript">
- (function(){
- var selYear = document.getElementById("selYear");
- var selMonth = document.getElementById("selMonth");
- var date = new Date();
- var year = date.getFullYear();
- var month = date.getMonth() + 1;
- var day = date.getDate();
- //生成当前年往前推10往后推5的数据
- for(var i = year - 10,len = year + 5; i < len; i++){
- var opt = new Option(i + "年", i);
- if(i == year) opt.selected = true;
- selYear.options.add(opt);
- }
- //生成月份数据
- for(var j = 1; j <= 12; j++){
- var m = j < 10 ? "0" + j : j;
- var opt = new Option(m + "月", m);
- if(j == month) opt.selected = true;
- selMonth.options.add(opt);
- }
- //显示当前月日历
- showCalendar(year, month);
- })();
- //得到每月的天数
- function getDaysOfMonth(year, month){
- if(year && month){
- if(month == 2){
- //2月闰年判断
- if((year % 4 == 0 && year % 100 !=0) || year % 400 == 0){
- return 29;
- }
- return 28;
- }
- var bigMonth = [1,3,5,7,8,10,12];
- var littleMonth = [4,6,9,11];
- for(var m in bigMonth){
- if(bigMonth[m] == month)
- return 31;
- }
- for(var m in littleMonth) {
- if(littleMonth[m] == month)
- return 30;
- }
- }
- }
- //根据年月生成日历
- function showCalendar(year, month){
- if(year && month){
- var tbody = document.getElementById("calendar");
- //生成前删除之前的行
- for(var i = 0,len =tbody.rows.length;i< len;i++){
- tbody.deleteRow();
- }
- var date = new Date(year, month - 1, 1);//month月的第一天
- var day = date.getDay();//星期
- var days = getDaysOfMonth(year, month);//month月的总天数
- var temp = Math.floor((days + day) / 7);
- var rows = (days + day) % 7 == 0 ? temp : (temp + 1);//要循环的行数
- var d = 1;
- for(var i = 1; i <= rows; i++){//循环行
- var tr = document.createElement("tr");
- for(var j = 1; j <= 7; j++){//循环列
- var td = document.createElement("td");
- //超过最大天数赋空
- if(d > days){
- td.innerHTML = "";
- tr.appendChild(td);
- continue;
- }
- if(i == 1){
- //第一行判断month月第一天是星期几,例如星期二前面空两个周日、周一
- if(j >= day + 1){
- var html = "<input type='checkbox' name='chkDay'>";
- td.innerHTML = html + (d < 10 ? "0" + d : d);
- d++;
- }else{
- td.innerHTML = "";
- }
- } else {
- var html = "<input type='checkbox' name='chkDay'>";
- td.innerHTML = html + (d < 10 ? "0" + d : d);
- d++;
- }
- tr.appendChild(td);
- }
- tbody.appendChild(tr);
- }
- }
- }
- function changeCalendar(){
- var y = document.getElementById("selYear").value;
- var m = document.getElementById("selMonth").value;
- showCalendar(y, m);
- }
- </script>
- </html>
js生成动态日历的更多相关文章
- js生成动态树状结构及排序
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 利用scrapy-splash爬取JS生成的动态页面
目前,为了加速页面的加载速度,页面的很多部分都是用JS生成的,而对于用scrapy爬虫来说就是一个很大的问题,因为scrapy没有JS engine,所以爬取的都是静态页面,对于JS生成的动态页面都无 ...
- ABP项目中使用Swagger生成动态WebAPI
本文是根据角落的白板报的<使用ABP实现SwaggerUI,生成动态webapi>一文的学习总结,感谢原文作者角落的白板报. 1 安装Swashbuckle.core 1.1 选择WebA ...
- 如何用python抓取js生成的数据 - SegmentFault
如何用python抓取js生成的数据 - SegmentFault 如何用python抓取js生成的数据 1赞 踩 收藏 想写一个爬虫,但是需要抓去的的数据是js生成的,在源代码里看不到,要怎么才能抓 ...
- 如何用phpcms将静态网页生成动态网页?
在前两篇随笔中已经简单介绍了phpcms,那么现在让我们来看一下如何用phpcms将静态网页生成动态网页? 1.在templates文件夹下新建模板文件夹ceshi(名字可以自己随笔起) 2.在ces ...
- js生成pdf报表
由于前台html已经动态生成报表,而且,前台有一个功能,一个date range组件,当你拖动的时候,报表会在不提交到后台的情况下动态变化.因此需要用到js生成生报表: 用到的组件: jquery.j ...
- js 生成二维码图片
1.用纯JavaScript实现的微信二维码图片生成器 QRCode.js是javascript实现二维码(QRCode)制作生成库. QRCode.js有着良好的跨浏览器兼容性(高版本使用HTML5 ...
- Selenium/HtmlUnit设置代理获取JS生成的网页
通常我们使用Java提供的HttpURLConnection或者Apache的HttpClient获取的网页源代码都是直观可见的,其代码的内容和通过浏览器右键网页->点击查看网页源代码的内容一致 ...
- js/jq 动态添加的元素不能触发绑定事件解决方案
<!-- Copyright 2017-10-27, Jachin QQ: 381558301 Email: 381558301@qq.com 请看看你们的版本并对号入座: jquery1.6版 ...
随机推荐
- vijosP1289 老板娘的促销方案
vijosP1289 老板娘的促销方案 链接:https://vijos.org/p/1289 [思路] 组合公式+高精度. 如果n-m<2则无解. 否则对于第一个询问:ans=C(n-m,2) ...
- Spark shell里的语句探索
获得垃圾链接数据集的命令如下: wget http://www-stat.stanford.edu/~tibs/ElemStatLearn/datasets/spam.data scala> v ...
- Ⅴ.spring的点点滴滴--引用其他对象或类型的成员
承接上文 引用其他对象或类型的成员 .net篇(环境为vs2012+Spring.Core.dll v1.31) public class Person { public string Name { ...
- 如何判断C#的Finalizer线程有没有被阻塞
博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:如何判断C#的Finalizer线程有没有被阻塞.
- java 实现视频转换通用工具类:获取视频元数据信息(一)
java 做视频转换主要用到开源的ffmpeg或者mencoder,还要有MP4Box. 注:由于平时都没有时间写博客,所以思路我就不写了,有问题问我,不一定马上回复. 详细介绍: ffmpeg:ht ...
- Cocos2d-x创建新工程
转自:http://www.cnblogs.com/andyque/archive/2011/09/27/2192920.html 而是新建一个工程.然后,我们不是copy文件夹.lib和dll了.我 ...
- nginx redis tomcat 分布式web应用 session共享
目标:多台tomcat 使用redis实现共享session.redis的安装请参阅:centos上安装redis nginx 作为目前最流行的开源反向代理HTTP Server,用于实现资源缓存.w ...
- ThinkPHP3.1新特性:命名范围
概述 命名范围功能,给模型操作提供了一系列的(连贯操作)封装,让你更方便的查询和操作数据.我们来具体了解下这一用法. 定义属性 要使用命名范围功能,主要涉及到模型类的_scope属性定义和scope连 ...
- 误删/tmp导致hadoop无法启停, jsp无法查看的解决方法
问题描述 我的hadoop版本是hadoop-cdh4.2.0,由于误删了/tmp目录(不是hadoop.tmp.dir设定的那个目录),在Namenode,SecondaryNamenode和Dat ...
- mysql.cnf 配制文件详解
代码如下: [client]port = 3306socket = /tmp/mysql.sock [mysqld]port = 3306socket = /tmp/mysql.sock basedi ...