【实践】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(集合 ...
随机推荐
- Java学习笔记（一）——关于java中的String类
[前面的话] 毕业将近6个月了,试用期也快要过去了,期待接下来的日子.在金融类性质的机构,最痛苦的是也许就是大部分系统外包,所以比较少写代码,在这六个月中只写了1个月左右的代码,然后每天都在做一些比较 ...
- pc、移动端H5网站 QQ在线客服、群链接代码【我和qq客服的那些事儿】
转载:http://blog.csdn.net/fungleo/article/details/51835368#comments 移动端H5 QQ在线客服链接代码 <a href=" ...
- html和url两种录制方式
在跟使用Loadrunner工具使用者交流的过程中,经常有人提到这个问题,基于HTML(HyperText Markup Language 超文本置标语言)模式录制 与基于URL(Uniform Re ...
- LoadRunner中的C Vuser函数
LoadRunner中的C Vuser函数 事务函数: lr_end_sub_transaction 标记子事务的结束以便进行性能分析. lr_end_transaction 标记事务的结束. ...
- MyBatis插入时候获取自增主键方法
方法一:(Oralce不支持这种写法) useGeneratedkeys 默认值为 false,含义:设置是否使用JDBC的getGenereatedKeys方法获取主键并赋值到keyProperty ...
- magento批量上传产品
Step1:表格仔细检查无误后,将准备好的图片上传至 media/import中.如果使用专用的图片服务器,把图片上传到服务器上,当然表格中的图片地址要做相应的修改. Step2:然后,登陆Magen ...
- CodeForces 766D Mahmoud and a Dictionary
并查集. 将每一个物品拆成两个,两个意义相反,然后并查集即可. #pragma comment(linker, "/STACK:1024000000,1024000000") #i ...
- 批量更新带有命名空间的XML文件的多个节点值
/// <summary> /// 批量修改节点值 /// </summary> /// <param name="filePath">路径&l ...
- Java中的对象池技术
java中的对象池技术,是为了方便快捷地创建某些对象而出现的,当需要一个对象时,就可以从池中取一个出来(如果池中没有则创建一个),则在需要重复重复创建相等变量时节省了很多时间.对象池其实也就是一个内存 ...
- POJ 1830 开关问题（Gauss 消元）
开关问题 Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 7726 Accepted: 3032 Description ...