【实践】js实现windows系统日历
思路：
1、定义好每一个月份的日期天数
2、获取当前的系统日期初始化数据
3、输出日历
2.1、先获取当前月的第一天是星期几（这一点与日历的排版至关重要！）
2.2、获取当前月的天数
2.3、获取当前月有多少个星期（即要输出多少行 行数这里我会预留多一行）
2.4、获取当前年份和月份 用作显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js 日历</title>
<style type="text/css">
*{
border: 0;
padding: 0;
margin: 0;
font-family: "微软雅黑";
}
a{
text-decoration: none;
color: #000;
}
li{
list-style-type: none;
}
.calendar_wrap{
width: 350px;
margin: 0 auto;
padding: 0;
border: 1px solid #000;
}
.calendar_list{
width: 100%;
margin-top: 10px;
}
.calendar_list tr{
width: 100%;
}
.calendar_list tr td{
text-align: center;
height: 45px; }
.control_bar{
word-spacing: -6px;
}
.control_bar span,.control_bar b{
display: inline-block;
text-align: center;
word-spacing: 0px;
}
.left-bt,.right-bt{
width: 50px;
}
#reduce_bt,#add_bt{
width: 50%;
height: 25px;
border-radius: 50%;
}
#reduce_bt:focus{
outline: none;
}
#add_bt:focus{
outline: none;
}
#current_date{
width: 250px;
}
#resetBt{
display: block;
text-align: center;
color: #fff;
cursor: pointer;
width: 120px;
line-height: 40px;
background-color: #FF7F27;
margin: 0 auto;
}
#date_list tr td:hover{
background-color: #ccc;
cursor: default;
}
</style>
</head>
<body>
<div class="calendar_wrap">
<div class="control_bar">
<span class="left-bt"><input type="button" id="reduce_bt" value="<"></span>
<b id="current_date">2017-02</b>
<span class="right-bt"><input type="button" id="add_bt" value=">"></span>
</div>
<table class="calendar_list" cellspacing="0">
<thead>
<tr>
<td>日</td>
<td>一</td>
<td>二</td>
<td>三</td>
<td>四</td>
<td>五</td>
<td>六</td>
</tr>
</thead>
<tbody id="date_list"></tbody>
</table>
</div>
<span id="resetBt">回到现在日期</span>
<script type="text/javascript">
var dateScreen = document.getElementById('current_date');//获取显示当前年份月份的div
var reduceBt = document.getElementById('reduce_bt');//获取减少月份的按钮
var addBt = document.getElementById('add_bt');//获取增加月份的按钮
var dateList = document.getElementById('date_list');//获取显示所有日期部分
var resetBt = document.getElementById('resetBt');//获取重设按钮
//定义好每月的日期总数 总数按js 获取月份数值的下标方式储存
var overall_date = [31,28,31,30,31,30,31,31,30,31,30,31];
var add_date = 1;//定义添加日期数的初始化 //初始化日历
//获取现在的日期
var now_date = new Date();
var nowFullYear = now_date.getFullYear();
var nowMonth = now_date.getMonth();
//执行日历输出函数
printCalendar();
//----------------------------------- //月份减少按钮点击事件
reduceBt.onclick = function(){
nowMonth = nowMonth - 1;
if (nowMonth == -1) {
nowFullYear = nowFullYear - 1;
nowMonth = 11;
}
clearRows();
printCalendar();
} //增加月份按钮点击事件
addBt.onclick = function(){
nowMonth+= 1;
if (nowMonth == 12) {
nowFullYear+= 1;
nowMonth = 0;
}
clearRows();
printCalendar();
} //重设按钮点击事件
resetBt.onclick = function(){
var resetDate = new Date();
nowFullYear = resetDate.getFullYear();
nowMonth = resetDate.getMonth();
clearRows();
printCalendar();
} function printCalendar(){
var printDate = new cur_date(nowFullYear,nowMonth);//实例cur_date方法
var printFirstDay = printDate.firstDay;//获取要输出月份第一天的星期
var printTotalDate = printDate.totalDate;//获取输出日期的总数
var printMonth = printDate.cur_month;//获取输出的月份
(printMonth >= 9)?(printMonth = (printMonth + 1)):(printMonth = ("0" + (printMonth + 1)));
//调整月份的显示格式
var printYear = printDate.cur_year;//获取输出的年份
var totalRows = Math.ceil((printTotalDate + (printFirstDay - 1)) / 7) + 1;
//获取行数
//利用天数除以7天获得行数并将它向上去整 但是上限是5
//而考虑到某些月会有6行所以在总行数里面加1 以防万一 //开始输出
//首先显示出年和月
dateScreen.innerText = printYear + "-" + printMonth; //开始输出日期
for (var i = 0; i < totalRows; i++) {
dateList.insertRow(i);
for (var j = 0; j < 7; j++) {
//当天数总量大于额定总量时先终止内部循环
if (add_date > printTotalDate) {
break;
} dateList.rows[i].insertCell(j); //改变周日和周六的文字颜色
if (j == 0) {
dateList.rows[i].cells[j].style.color = "red";
dateList.rows[i].cells[j].style.fontWeight = "bold";
}else if(j == 6){
dateList.rows[i].cells[j].style.color = "green";
dateList.rows[i].cells[j].style.fontWeight = "bold";
} if (i == 0 && j >= printFirstDay) {
//当此时是第一行时而且单元格下标大于等于当前月第一天的星期就开始为单元格填入文本
dateList.rows[i].cells[j].innerText = add_date;
add_date++;
}else if(i > 0){
//第一行以后的单元格就按循环添加即可
dateList.rows[i].cells[j].innerText = add_date;
add_date++;
} } } add_date = 1;//输出完把日期总数重新赋值为1
} //获取当前年、月、第一天是星期几、日期总数
function cur_date(curYear,curMonth){
this.cur_firstDate = new Date(curYear,curMonth,1);//获取现在日期的第一天
this.cur_year = curYear;//获取当前的年
this.cur_month = curMonth;//获取当前的月
this.totalDate = is_leapYear(curYear,curMonth);//获取总天数
this.firstDay = this.cur_firstDate.getDay()//获取每个月的第一天是星期几
} //判断今年是否为闰年
function is_leapYear(target_year,target_month){
if ((target_month == 1) && (target_year % 4 == 0) && ((target_year % 100 != 0) || (target_year % 400 != 0))) {
//当前月是2月且当前年是闰年
return 29;
}else{
//其他月按正常日期总数输出
return overall_date[target_month];
}
} function clearRows(){
var rowsNum = dateList.rows.length;
while(rowsNum > 0){
dateList.deleteRow(rowsNum - 1);
rowsNum--;
}
} </script>
</body>
</html>
【实践】js实现windows系统日历的更多相关文章
- Kubernetes实践技巧：Windows 系统最佳实践
有部分同学是使用的 Windows 系统,我们的直播课程也是在 Windows 系统下面进行的,然后通过 SSH 方式连接到 服务器上面操作 Kubernetes,由于对 vim 不是很熟悉,所以又通 ...
- node.js之Windows 系统下设置Nodejs NPM全局路径
node.js 0.10 版本下修改全局路径: npm config set cache "D:\nodejs\node_cache" npm config set prefix ...
- Node.js在Windows与Linux下的安装
一.Windows配置 (1)官网(http://nodejs.org)选择Node.js的Windows系统(32位和64位)最新版本. (2)下载完成后,执行MSI的安装文件. (3)安装完成,查 ...
- 在 Windows系统中编译node.js 源代码
Node.js 在 Windows 下只能通过 Microsoft Visual Studio 编译,因此你需要首先安装 Visual Studio 或者免费的 Visual Studio Expre ...
- Redis进阶实践之三如何在Windows系统上安装安装Redis（转载）
Redis进阶实践之三如何在Windows系统上安装安装Redis 一.Redis的简介 Redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括 ...
- windows系统下简单node.js环境配置 安装
国内目前关注最高,维护最好的一个关于nodejs的网站应该是http://www.cnodejs.org/ windows系统下简单nodejs环境配置. 第一步:下载安装文件 下载地址:官网 htt ...
- Node.js的安装与使用-Windows系统
首先到官网下载node.js http://nodejs.cn 下载完成后一直下一步Next即可安装完成,路径可以自己设置 然后配置环境变量,将node安装的目录配置到Path中 例如: cmd打开命 ...
- node.js安装和配置(windows系统)
node.js安装和配置(windows系统) node javasript vscode node是javascript的管理工具,所以开发javasript项目都要下载安装和配置node. 传送 ...
- Redis进阶实践之三如何在Windows系统上安装安装Redis
一.Redis的简介 Redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合 ...
随机推荐
- mysql安装依赖perl(Data::Dumper)
http://blog.itpub.net/29989552/viewspace-2128991/
- 【JBPM4】任务节点-任务分配swimlane
swimlane泳道,几个任务受理人相同的任务节点,可以划分为一个泳道 JPDL <?xml version="1.0" encoding="UTF-8" ...
- AC日记——[HNOI2008]GT考试 bzoj 1009
1009 思路: KMP上走DP(矩阵加速): DP[i][j]表示当前在第i位,同是匹配到不吉利串的第j位的方案数: 代码: #include <bits/stdc++.h> using ...
- jQuery源码浅析
这几天看了下jQuery源码,有些收获,解答了我以前对jQuery的疑问,现在我把收获分享给大家. 一.jQuery为何弄成自执行函数,以及为何在引用了jquery文件之后,可以通过$或jQuery来 ...
- hbase+hadoop+hdfs集群搭建 集成spring
序言 最近公司一个汽车项目想用hbase做存储,然后就有了这篇文字,来,来,来, 带你一起征服hbase,并推荐一本书<hbase权威指南> 这是一本极好的hbase入门书籍,我花了一个晚 ...
- 【lua】可变长参数
lua可变长参数 在lua中可以使用...表示可变长参数,在函数内通过表访问可变参数 function rest(...) -- 把可变参数放在表类 local args = { ... } prin ...
- 【剑指offer】面试题 57. 和为 S 的数字
面试题 57. 和为 S 的两个数字 题目一:和为 S 的两个数字 题目 输入一个递增排序的数组和一个数字 S,在数组中查找两个数,是的他们的和正好是 S,如果有多对数字的和等于 S, 输出两个数的乘 ...
- 嵌套循环连接(Nested Loops Joins)
The nested loops join, also called nested iteration, uses one join input as the outer input table(sh ...
- HDU 1611 敌兵布阵【线段树模板】
#include<cstdio> #include<string> #include<cstdlib> #include<cmath> #include ...
- Eclipse控制台
Eclipse中的控制台,是以卡片布局方式来管理的.每运行一个新的程序,创建一个新的控制台,覆盖到原来的控制台之上. 控制台的控制按钮有10个,仅对其中部分作介绍 第1个按钮结束当前程序的运行 第2个 ...