<!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>&nbsp;</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之日历制作。主要知识点:日期函数的更多相关文章

  1. 每天一个JS 小demo之韩雪冬轮播图。主要知识点:html,css布局,对于数组和对象的理解和运用

    @charset "utf-8"; /* CSS Document */ ;; } li { list-style: none; } img { border: none; } b ...

  2. 每天一个JS 小demo之商品下架特效制作,主要知识点:定时器,倒计时,抖动特效。PS:由于不方便上传文件夹,只能上传效果图,图片等素材需自寻哟。

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. 每天一个JS 小demo之个人信息添加。主要知识点:DOM操作中的表格操作,节点操作

    以下是简易效果: <!DOCTYPE html><html lang="en"><head> <meta charset="UT ...

  4. 每天一个JS 小demo之新建文件夹。主要知识点:DOM方法的综合运用

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...

  5. 每天一个JS 小demo之商品筛选。主要知识点:DOM方法综合运用

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...

  6. 每天一个JS 小demo之通过事件委托实现菜单展开及选中特效。主要知识点:事件

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...

  7. 每天一个JS 小demo之“随机”抽奖。主要知识点:Math函数,数组方法,递归

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...

  8. 每天一个JS 小demo之留言板。主要知识点:DOM方法的理解和运用

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...

  9. 每天一个JS 小demo之树菜单。主要知识点:DOM方法综合运用,递归运用

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...

随机推荐

  1. Java容器的各种总结

    Java容器指的是List,Set,Map这些类.由于翻译的问题,问到集合,Collection这些指的都是它们几个. List ArrayList 随机访问快 LinkedList 插入删除快 这个 ...

  2. JS+html--实现图片轮播

    大家肯定见过某些网站一个炫酷的页面,就是图片轮播,也就是我们常说的幻灯片播放.对于初学者来说,可能会有点头疼,没关系,小李在这给大家献上自己刚刚写好的关于图片轮播的代码. 以下功能的实现用了jQuer ...

  3. DirectFB学习笔记一

    本文记录directfb程序的基本操作流程. 1.首先创建一个directfb对象:DirectFBInit(&argc,&argv)初始化然后创建DirectFBCreate(&am ...

  4. bzoj4652 [Noi2016]循环之美

    Description 牛牛是一个热爱算法设计的高中生.在他设计的算法中,常常会使用带小数的数进行计算.牛牛认为,如果在k进制下,一个数的小数部分是纯循环的,那么它就是美的.现在,牛牛想知道:对于已知 ...

  5. bzoj2876 [Noi2012]骑行川藏

    Description 蛋蛋非常热衷于挑战自我,今年暑假他准备沿川藏线骑着自行车从成都前往拉萨.川藏线的沿途有着非常美丽的风景,但在这一路上也有着很多的艰难险阻,路况变化多端,而蛋蛋的体力十分有限,因 ...

  6. 使用了UnityEditor中的API,打包时却不能打包UnityEditor的问题

    前段时间写了一篇名叫<Unity使用Windows弹窗保存图片>的文章 然而现在项目进入了测试阶段 就在发布的时候,这个地方出问题了 问题出在using UnityEditor; 如上文章 ...

  7. linux 内核的futex

    futex是linux内核为用户空间实现锁等同步机制而设计的同步排队(队列queueing)服务.在futex.c的注释中,futex起源于"Fast Userspace Mutex&quo ...

  8. Linux之定时任务

    定时任务Crond介绍 Crond是linux系统中用来定期执行命令/脚本或指定程序任务的一种服务或软件,一般情况下,我们安装完Centos5/6 linux操作系统之后,默认便会启动Crond任务调 ...

  9. vue视频学习笔记04

    video 4 手动配置自己:webpack+vue-loader webpack加载模块-------------------------------------如何运行此项目?1. npm ins ...

  10. 思考一个关于Lambda表达式做为linq条件的问题

    有一个集合如下 List<User> users = new List<User> { new User{Name = "1",Aget = 12}, ne ...