【实践】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(集合 ...
随机推荐
- 基于node的前端页面实时更新。呦吼~
学习了gulp,webpack后越发觉得前端开发万分的有趣,首当其冲的就是解决了狂按f5的尴尬. 当我们按下ctrl+s保存后页面自动更新了,我就觉得我f5键在隐隐的发笑. 1.node_npm_li ...
- hdu多校5
1002 思路:贪心显然不好贪,直接爆搜. #include<bits/stdc++.h> #define LL long long #define fi first #define se ...
- Python中的多进程：fork和multiprocessing
Python的多进程 套路1:os.fork() 先敲段代码: #!/usr/bin/env python3 import os os.fork() print('1111111111') 执行结果: ...
- HDU 6467.简单数学题-数学题 (“字节跳动-文远知行杯”广东工业大学第十四届程序设计竞赛)
简单数学题 Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total Submi ...
- Codeforces 1099 A. Snowball-暴力(Codeforces Round #530 (Div. 2))
A. Snowball time limit per test 1 second memory limit per test 256 megabytes input standard input ou ...
- 在Eclipse调试Weblogic上的web项目
概述 参考原文:weblogic debug配置. weblogic版本:BEA WebLogic Platform 8.1 工作原理: 利用java tools里面的jdb程序连接远程的JAVA虚拟 ...
- 洛谷——P3414 SAC#1 - 组合数
P3414 SAC#1 - 组合数 题目背景 本题由世界上最蒟蒻最辣鸡最撒比的SOL提供. 寂月城网站是完美信息教室的官网.地址:http://191.101.11.174/mgzd . 题目描述 辣 ...
- Flask实战第49天：cms轮播图管理页面布局
新建cms_banners.html继承cms_base.html {% extends 'cms/cms_base.html' %} {% block title %} 轮播图管理-CMS管理系统 ...
- HDU 6336 Matrix from Arrays
Problem E. Matrix from Arrays Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 262144/262144 ...
- noip2012开车旅行 题解
题目大意: 给出n个排成一行的城市,每个城市有一个不同的海拔.定义两个城市间的距离等于他们的高度差的绝对值,且绝对值相等的时候海拔低的距离近.有两个人轮流开车,从左往右走.A每次都选最近的,B每次都选 ...