每天一个JS 小demo之日历制作。主要知识点：日期函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
td {
text-align: center;
}
</style>
</head>
<body>
<p>
<select id="yearSelect"></select>
<select id="monthSelect"></select>
<strong></strong>
</p>
<table id="tab" width="100%" border="1">
<thead>
<tr>
<th>日</th>
<th>一</th>
<th>二</th>
<th>三</th>
<th>四</th>
<th>五</th>
<th>六</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
/*
* 获取指定年月份的日期总天数
* 显示的月份的第一天是星期几？
* */
var yearSelectElement = document.querySelector('#yearSelect');
var monthSelectElement = document.querySelector('#monthSelect');
var tbody = document.querySelector('tbody');
var strongElement = document.querySelector('strong');
var nowDate = new Date();
/*
* 动态生成option
* */
var html = '';
for (var i=1970; i<2100; i++) {
if (i == nowDate.getFullYear()) {
html = '<option selected>'+ i +'</option>' + html;
} else {
html = '<option>'+ i +'</option>' + html;
}
}
yearSelectElement.innerHTML = html;
var html = '';
for (var i=0; i<12; i++) {
if (i == nowDate.getMonth()) {
html += '<option value="'+i+'" selected>'+ (i+1) +'</option>';
} else {
html += '<option value="'+i+'">'+ (i+1) +'</option>';
}
}
monthSelectElement.innerHTML = html;
/*
* 默认显示当前年和月的日历
* */
calendar(nowDate.getFullYear(), nowDate.getMonth());
/*
* 根据选择的年和月重新生成日历
* */
yearSelectElement.onchange = monthSelectElement.onchange = function() {
calendar(yearSelectElement.value, monthSelectElement.value);
};
function calendar(year, month) {
year = Number(year);
month = Number(month);
strongElement.innerHTML = year + '年' + (month+1) + '月';
var html = '<tr>';
for (var i=1; i<=42; i++) {
if (i%7 == 1 && i != 1) {
html += '</tr><tr>';
}
var v = i- getFirstDay(year, month);
if (v < 1 || v > getDays(year, month)) {
html += '<td> </td>';
} else {
if (i % 7 == 1 || i % 7 == 0) {
html += '<td style="color: red">'+ v +'</td>';
} else if (
year == nowDate.getFullYear()
&&
month == nowDate.getMonth()
&&
v == nowDate.getDate()
) {
html += '<td style="background: red; color:white;">'+ v +'</td>';
} else {
html += '<td>'+ v +'</td>';
}
}
}
html += '</tr>';
tbody.innerHTML = html;
}
/*
* 获取指定显示年月份的日期总天数
* */
function getDays(y, m) {
return new Date(y, m+1, 1, -1, 0, 0).getDate();
/*
* 得到下一月的1日，-1时0分0秒的日期
* -1 ： 其实就是前一天，表示就是上个月的最后一天的23时
* */
var date = new Date(y, m+1, 1, -1, 0, 0);
/*
* 上个月最后一天的日期其实就是上个月总的天数
* */
return date.getDate();
}
/*
* 获取指定显示的年月份的第一天是星期几
* */
function getFirstDay(y, m) {
return new Date(y, m, 1).getDay();
}
</script>
</body>
</html>
每天一个JS 小demo之日历制作。主要知识点：日期函数的更多相关文章
- 每天一个JS 小demo之韩雪冬轮播图。主要知识点：html，css布局，对于数组和对象的理解和运用
@charset "utf-8"; /* CSS Document */ ;; } li { list-style: none; } img { border: none; } b ...
- 每天一个JS 小demo之商品下架特效制作，主要知识点：定时器，倒计时，抖动特效。PS：由于不方便上传文件夹，只能上传效果图，图片等素材需自寻哟。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 每天一个JS 小demo之个人信息添加。主要知识点：DOM操作中的表格操作，节点操作
以下是简易效果: <!DOCTYPE html><html lang="en"><head> <meta charset="UT ...
- 每天一个JS 小demo之新建文件夹。主要知识点：DOM方法的综合运用
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...
- 每天一个JS 小demo之商品筛选。主要知识点：DOM方法综合运用
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...
- 每天一个JS 小demo之通过事件委托实现菜单展开及选中特效。主要知识点：事件
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...
- 每天一个JS 小demo之“随机”抽奖。主要知识点：Math函数，数组方法，递归
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...
- 每天一个JS 小demo之留言板。主要知识点：DOM方法的理解和运用
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...
- 每天一个JS 小demo之树菜单。主要知识点：DOM方法综合运用，递归运用
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...
随机推荐
- Xamarin.Forms+Prism（1）—— 开发准备
本次随笔连载,主要用于记录本人在项目中,用Xamarin.Forms开发APP中所使用的第三方技术或一些技巧. 准备: 1.VS2017(推荐)或VS2015: 2.JDK 1.8以上: 3.Xama ...
- Xamarin GitHub 下载的源码运行不了
初学Xamarin ,各种折腾,大概这公司破电脑配置差,老是很多问题. GitHub 真是个好东西,可以参考别人做的,不过下载来运行不了就各种折腾了,为此我重装电脑两次了,反正win10安装就十几分 ...
- Lambda表达式效率问题
原文 http://www.importnew.com/17262.html 有许许多多关于 Java 8 中流效率的讨论,但根据 Alex Zhitnitsky 的测试结果显示:坚持使用传统的 Ja ...
- 篇3 安卓app自动化测试-搞定界面元素
篇3 安卓app自动化测试-搞定界面元素 --lamecho辣么丑 1.1概要 大家好! 我是lamecho(辣么丑),今天是<安卓app自动化测试>的第三 ...
- iOS模式详解—「runtime面试、工作」看我就 🐒 了 ^_^.
Write in the first[写在最前] 对于从事 iOS 开发人员来说,当提到 ** runtime时,我想都可以说出来 「runtime 运行时」和基本使用的方法.相信很多开发者跟我当初一 ...
- python自动化开发-[第一章]-练习题
1.使用while循环输入 1 2 3 4 5 6 8 9 10 i = 1 while i < 11: if i == 7: i += 1 continue print (i) i += 1 ...
- python编程总结
1.signal.signal(signal.SIGCHLD,signal.SIG_IGN) 这句话的作用是 防止产生僵尸进程.详细解释看 http://www.cnblogs.com/Anker/p ...
- 修改maven本地仓库的默认地址
由于maven默认仓库地址为C盘,所以缓存jar文件多了会占用掉C盘很多空间,鉴于此可更改maven仓库地址来避免. 1. 打开maven解压后目录,找到conf文件夹中的settion.xml文 ...
- Stimulsoft报表操作笔记（一）：统计
一.引言 报表大家应该都知道是什么,简单来说就是用表格.图表等格式来动态显示数据.现在web系统中很多需要使用到报表统计.打印功能等,将所需用到的数据绑定到指定的位置,然后分类汇总,这样查看起来更清晰 ...
- base 镜像 - 每天5分钟玩转容器技术（10）
上一节我们介绍了最小的 Docker 镜像,本节讨论 base 镜像. base 镜像有两层含义: 不依赖其他镜像,从 scratch 构建. 其他镜像可以之为基础进行扩展. 所以,能称作 base ...