【实践】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(集合 ...
随机推荐
- AC日记——文化之旅 洛谷 P1078
文化之旅 思路: 暴搜,倒搜: 代码: #include <bits/stdc++.h> using namespace std; #define maxn 105 #define max ...
- AC日记——Sagheer, the Hausmeister codeforces 812b
812B - Sagheer, the Hausmeister 思路: 搜索: 代码: #include <cstdio> #include <cstring> #includ ...
- .net 杂项
vs 打印信息到输出窗口 : System.Diagnostics.Debug.WriteLine("打印信息到输出窗口,但是只能在Debug版本运行,到了release版本中,Debug类 ...
- ios 安卓 video 取消播放自动全屏 属性
x-webkit-airplay="true",x5-playsinline="true",webkit-playsinline="true" ...
- 前端读者 | 百度前端编码规范（JS）
本文来自:百度FEX 1 前言 JavaScript在百度一直有着广泛的应用,特别是在浏览器端的行为管理.本文档的目标是使JavaScript代码风格保持一致,容易被理解和被维护. 虽然本文档是针对J ...
- jquery.bootpag分页控件
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script> <script src=& ...
- spring 以及 spring mvc 中常用注解整理
spring 以及 spring mvc 中常用注解整理 @RequestMapping(映射路径) @Autowired(注入 bean 对象) 例如: @Autowired private Bas ...
- Kbengine cocos2djs 地图问题
KBEngine.addSpaceGeometryMapping(self.spaceID, None, resPath) 问下这个resPath加载的文件在哪里,后端愣是没找到,前端倒是看到了,还是 ...
- 洛谷P2520向量
题目传送门 看到数据范围其实就可以确定这是一道结论题. 首先分析,给定你的向量的两个坐标a,b有八种组合方式可以用,但实际上整理一下可以得出实际上只有五种,x/y ±2a,x/y ±2b,x+a,y+ ...
- JavaScript的基础学习(一)
一.JavaScript概述 JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase ...