【实践】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日记——「HNOI2017」礼物 LiBreOJ 2020
#2020. 「HNOI2017」礼物 思路: A题进程: 一眼出式子->各种超时过不去->看题解明白还有fft这个东西->百度文库学习fft->学习dft->学习fft ...
- msyql安装
1.安装msyql yum install -y ncurses-devel automake autoconf bison libtool-ltdl-devel cd /soft wget http ...
- 【剑指offer】面试题 11. 旋转数组的最小数字
面试题 11. 旋转数组的最小数字 题目描述 题目:把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转. 输入一个非递减排序的数组的一个旋转,输出旋转数组的最小元素. 例如数组{3,4, ...
- java 连接 kerberos 认证的 HBase 和 HDFS
这是两个功能,都很简单就写一块了.. 简单到什么程度呢,简单到只贴代码就可以了... HBase package com.miras.data; import org.apache.hadoop.co ...
- ajaxReturn 之前dump调试，导致$.ajax不能正常运行
ajaxReturn 之前dump调试,导致$.ajax不能正常运行 以后调试的时候,注意下这个情况
- python——聊聊iterable，sequence和iterators
---------------------------------------------------------------前言----------------------------------- ...
- python中join函数的用法
这个函数可以对字符串按照某种方式进行拼接,比如你要在三个字母中间都添加一个特定字符,就可以用这个函数实现 result = '*'.join(['A','B','C']) print(result) ...
- web worker 实践
1.web worker 在浏览器中JavaScript主线程与UI渲染线程是互斥的.即UI渲染线程会阻塞JavaScript线程的运行. web worker允许创建工作线程,并可以与JavaScr ...
- 【tomcat】获取访问者真实IP
1.直接访问tomcat的情况 通过下面这段代码可以获取: String ip = request.getHeader("x-forwarded-for"); if(ip == n ...
- Python开发基础-Day19继承组合应用、对象序列化和反序列化，选课系统综合示例
继承+组合应用示例 class Date: #定义时间类,包含姓名.年.月.日,用于返回生日 def __init__(self,name,year,mon,day): self.name = nam ...