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版 ...
随机推荐
- spoj 7258 SUBLEX(SAM,名次)
[题目链接] http://www.spoj.com/problems/SUBLEX/en/ [题意] 给定一个字符串,询问次序为k的子串. [思路] SAM,名次 建好SAM后求出每个结点根据tra ...
- shell脚本应用(5)--实用脚本片段
校验参数 if [ "$#" -ne 1 ] then echo "Incorrect number of arguments" echo "Usag ...
- ubuntu下安装opencv 2.4.9 脚本,支持摄像头和cuda
arch=$(uname -m) if [ "$arch" == "i686" -o "$arch" == "i386" ...
- 选择一个 HTTP 状态码不再是一件难事 – Racksburg
原文链接:http://racksburg.com/choosing-an-http-status-code/ 打开双语对照阅读 有什么能比 HTTP 响应状态码更简单呢?页面渲染了吗?好极了,返回 ...
- storm-starter项目概述
storm-starter项目包含使用storm的各种各样的例子.项目托管在GitHub上面,其网址为: http://github.com/nathanmarz/storm-starter stor ...
- Robotium学习笔记三
以下是从网络上抄录的一些Robotium注意事项 1)有些button没有string,没有text,只能通过index来click这样很不直观,而且button的index并不是固定的,有可能随着控 ...
- Unity定时器
需求:制作定时器,运行3秒后执行第一次,之后每隔3秒执行一次操作. 1.使用变量在Update中计时 public class TestTimer : MonoBehaviour { private ...
- uva 1422 - Processor(二分+优先队列)
题目链接:uva 1422 - Processor 题目大意:有一个机器要处理一些问题,给出这些问题可以开始的时间和必须完成的时间,以及任务的工作量,问说机器必须以最少每秒多少得工作量才能完成这些任务 ...
- OcciWrapper使用指南(高性能Oracle访问组件)
occiwrapper使用指南 occiwrapper是一个开源的.跨平台的Oracle访问组件, 方便C++开发者们灵活地操作oracle数据库.为了方便使用,组件中的接口形式参考的POCO库的使用 ...
- iOS开发 落地消息多的处理办法(仅供参考)
1.首先要知道一点,你的消息储存是用数据库储存的! 看了一下微信和qq的消息处理,一般情况下第三方(亲加,容云,环信都会有本地的数据库)处理过的! 但是我发现,最近一个需求要求开发@"消息已 ...