每天一个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"& ...
随机推荐
- ES6 对let声明的一点思考
说到ES6的let变量声明,我估计很多人会想起下面几个主要的特点: 没有变量声明提升 拥有块级作用域 暂时死区 不能重复声明 很多教程和总结基本都说到了这几点(说实话大部分文章都大同小异,摘录的居多) ...
- GitHub上最受欢迎的iOS开源项目TOP20
AFNetworking 在众多iOS开源项目中,AFNetworking可以称得上是最受开发者欢迎的库项目.AFNetworking是一个轻量级的iOS.Mac OS X网络通信类库,现在是GitH ...
- CF #CROC 2016 - Elimination Round D. Robot Rapping Results Report 二分+拓扑排序
题目链接:http://codeforces.com/contest/655/problem/D 大意是给若干对偏序,问最少需要前多少对关系,可以确定所有的大小关系. 解法是二分答案,利用拓扑排序看是 ...
- CSS元素垂直居中方法总结
坚持,坚持,坚持... 以上为自我鼓励,哈哈... ------------------------------------------------- 相信没有真正是尝试过的人应该都和我一样,觉得居中 ...
- crash部分命令用法
Set set [pid | taskp | [-c cpu] | -p] | [crash_variable [setting]] | -v 1.设置要显示的内容,内容一般以进程为单位. Set p ...
- Angular简易分页设计(一)：基本功能实现
(首先声明本文来自博客园本人原创,转载请说明出处.欢迎关注:http://www.cnblogs.com/mazhaokeng/p/6752990.html) 之前网站的后台管理为了图快,把Jquer ...
- 面向对象设计（Object-Oriented Design，OOD）
前言 OOD简介 Shubho:亲爱的,让我们开始学习OOD吧.你了解面向对象原则吗? Farhana:你是说封装,继承,多态对吗?我知道的. Shubho:好,我希望你已了解如何使用类和对象.今天我 ...
- [玩耍]C++控制台扫雷
其实是大一还不会GUI时闲着无聊写的.都是硬编码,也不支持自定义棋盘大小,现在看看这代码惨不忍睹.下载地址:http://download.csdn.net/download/xienaoban/98 ...
- jQuery操作css样式
jQuery操作css样式 css操作的分类: css操作 位置操作 尺寸操作 css操作之css css代码: html代码: jQuery代码: 效果如下: css操作之位置操作 css代码: h ...
- iOS 关于UITableView的黑科技
UITableView是我们最常用的控件了,今天我就来介绍一些关于UITableView的黑科技和一些注意的地方. 1.修改左滑删除按钮的高度 左滑删除这是iOS最先发明的,之后安卓开始模仿. ...