javascript中Date对象应用之简易日历实现


Posted in Javascript onJuly 12, 2016

前面的话

简易日历作为javascript中Date对象的常见应用,用途较广泛,本文将详细说明简易日历的实现思路。

效果演示

javascript中Date对象应用之简易日历实现 

HTML说明
 使用type=number的两个input分别作为年和月的输入控件,这样在高级浏览器下自带调节按钮
 按照周日到周一的顺序进行星期的排列

<div class="box">
 <header class='control'>
 <input id="conYear" class="con-in" type="number" min="1900" max="2100" step="1"/>
 <input id="conMonth" class="con-in" type="number" min="1" max="12" step="1"/>
 </header>
 <div class="DateBox">
 <header class='week'>
 <div class="week-in">周日</div>
 <div class="week-in">周一</div>
 <div class="week-in">周二</div>
 <div class="week-in">周三</div>
 <div class="week-in">周四</div>
 <div class="week-in">周五</div>
 <div class="week-in">周六</div>
 </header>
 <section class="dayBox" id='dayBox'>
 <div class="day" id="day1">1</div>
 <div class="day">2</div>
 <div class="day">3</div>
 <div class="day">4</div>
 <div class="day">5</div>
 <div class="day">6</div>
 <div class="day">7</div>
 <div class="day">8</div>
 <div class="day">9</div>
 <div class="day">10</div>
 <div class="day">11</div>
 <div class="day">12</div>
 <div class="day">13</div>
 <div class="day">14</div>
 <div class="day">15</div>
 <div class="day">16</div>
 <div class="day">17</div>
 <div class="day">18</div>
 <div class="day">19</div>
 <div class="day">20</div>
 <div class="day">21</div>
 <div class="day">22</div>
 <div class="day">23</div>
 <div class="day">24</div>
 <div class="day">25</div>
 <div class="day">26</div>
 <div class="day">27</div>
 <div class="day">28</div>
 <div class="day">29</div>
 <div class="day" id="day30">30</div>
 <div class="day" id="day31">31</div>
 </section>
 </div> 
</div>

CSS说明
对于简易日历的实现,首先确定日历中class="day"的div的排列方式为浮动。这样可以通过改变第一天div的位置,来实现所有同级div都可以跟随移动的效果 

body{
 margin: 0;
}
input{
 border: none;
 padding: 0;
}
.box{
 width: 354px;
 margin: 30px auto 0; 
}
.DateBox{
 height: 300px;
 border: 2px solid black;
} 
.week{
 overflow: hidden;
 border-bottom: 1px solid black;
 line-height: 49px;
}
.week-in{
 height: 49px;
 float: left;
 width: 50px;
 text-align: center;
}
.dayBox{
 overflow: hidden;
}
.day{
 float: left;
 height: 50px;
 width: 50px;
 font:20px/50px '微软雅黑';
 text-align: center;
}
.control{
 overflow: hidden;
}
.con-in{
 height: 50px;
 float: left;
 width: 100px;
 text-align: center;
 font: 20px/50px "微软雅黑";
}

JS说明
简易日历的JS逻辑总共需要5个实现:
【1】需要获取当月的天数,获取当月第一天、第30天、第31天是周几
【2】根据当月第一天的星期,改变第一天的margin-left值,移动第一天到对应的位置;由于浮动的关系,其余天也会跟着移动到对应的位置
【3】根据当月的天数,隐藏多余的天;当然,隐藏之前要先显示在其他月份可能被隐藏的天
【4】如果当月30日是周日,则会新占一行。这时通过改变30日这天的margin值将其移动到第一行(若31日可能会新占一行,也做相似处理)
【5】载入页面后,获取当前的年和月,显示当月日历;当改变年或月时,获取改变后的值,更新日历 

//准备:获取当前样式
function getCSS(obj,style){
 if(window.getComputedStyle){
 return getComputedStyle(obj)[style];
 }
 return obj.currentStyle[style];
}

//实现一:获取当月的天数,及当月第一天、第30日、第31日是星期几
function get_data(year,month){
 var result = {};
 var d = new Date();
 //如果是2月
 if(month == 2){
 //如果是闰年
 if((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0){
 result.days = 29;
 //如果是平年
 }else{
 result.days = 28;
 }
 //如果是第4、6、9、11月
 }else if(month == 4 || month == 6 ||month == 9 ||month == 11){
 result.days = 30;
 }else{
 result.days = 31;
 //当月第31天是星期几
 result.day31week = d.getDay(d.setFullYear(year,month-1,31));
 }
 //当月第一天是星期几
 result.day1week = d.getDay(d.setFullYear(year,month-1,1));
 if(month != 2){
 //当月第30天是星期几
 result.day30week = d.getDay(d.setFullYear(year,month-1,30)); 
 }
 return result;
}

//实现二:根据当月第一天的星期x,设置第一天的margin-left=宽度*x,使其对应到正确的星期位置上
function move_day1(year,month){
 var week1 = get_data(year,month).day1week;
 day1.style.marginLeft = week1%7*parseInt(getCSS(day1,'width'))+ 'px';
}

//实现三:根据当月的天数,来隐藏多余的天数。当然首先要先显示在其他月份被隐藏的天数
function hide_days(year,month){
 //恢复其他月份可能隐藏的天数
 for(var i = 28; i<31; i++){
 dayBox.children[i].style.display = 'block';
 } 
 //隐藏当月多余的天数
 var days = get_data(year,month).days;
 for(var i = days;i<31;i++){
 dayBox.children[i].style.display = 'none';
 }
};

//实现四:如果当月30日或31日是星期日,则会新占一行,通过设置margin-top把新占一行的天移动到第一行
function move_day30(year,month){
 //如果当月30日是星期日
 if(get_data(year,month).day30week === 0){
 day30.style.marginTop = parseInt(getCSS(day30,'height')) *(-5) + 'px';
 day31.style.marginTop = parseInt(getCSS(day31,'height')) *(-5) + 'px';
 day31.style.marginLeft= getCSS(day31,'width');
 return;
 }else{
 day30.style.marginTop = day31.style.marginTop = day31.style.marginLeft ='0';
 }
 //如果当月31日是星期日
 if(get_data(year,month).day31week === 0){
 day31.style.marginTop = parseInt(getCSS(day31,'height')) *(-5) + 'px';
 }else{
 day31.style.marginTop = '0';
 }
}

//实现五:当载入页面时,获取当前年和月,显示当月日历;当改变年或月时,获取改变后的年和月,更新当月日历
var year= conYear.value=new Date().getFullYear();
var month= conMonth.value = new Date().getMonth() + 1;
move_day1(year,month);
hide_days(year,month);
move_day30(year,month);

conYear.onchange = conMonth.onchange = function(){
 var year = conYear.value;
 var month = conMonth.value;
 if(year<1900 || year >2100 ){
 year = conYear.value=new Date().getFullYear();
 }
 if(month<1 || month > 12){
 month = conMonth.value=new Date().getMonth() + 1;
 }
 move_day1(year,month);
 hide_days(year,month);
 move_day30(year,month);
}

源码演示

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js日期相关函数总结分享
Oct 15 Javascript
jQuery中ready事件用法实例
Jan 19 Javascript
jquery模拟实现鼠标指针停止运动事件
Jan 12 Javascript
学习JavaScript设计模式之代理模式
Jan 12 Javascript
jQuery取得iframe中元素的常用方法详解
Jan 14 Javascript
Angularjs之filter过滤器(推荐)
Nov 27 Javascript
JavaScript仿聊天室聊天记录
Dec 27 Javascript
node.js基于mongodb的搜索分页示例
Jan 22 Javascript
JavaScript实现的超简单计算器功能示例
Dec 23 Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
May 21 Javascript
Echarts.js无法引入问题解决方案
Oct 30 Javascript
解决pycharm双击但是无法打开的情况
Oct 31 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
Jul 12 #Javascript
浅谈angularJS中的事件
Jul 12 #Javascript
深入剖析JavaScript面向对象编程
Jul 12 #Javascript
JS及PHP代码编写八大排序算法
Jul 12 #Javascript
微信支付 JS API支付接口详解
Jul 11 #Javascript
判断输入的字符串是否是日期格式的简单方法
Jul 11 #Javascript
JS判断日期格式是否合法的简单实例
Jul 11 #Javascript
You might like
php split汉字
2009/06/05 PHP
PHP实现将textarea的值根据回车换行拆分至数组
2015/06/10 PHP
yii权限控制的方法(三种方法)
2015/12/28 PHP
PHP使用mysql与mysqli连接Mysql数据库用法示例
2016/07/07 PHP
PHP基于GD2函数库实现验证码功能示例
2019/01/27 PHP
javascript 动态调整图片尺寸实现代码
2009/12/28 Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
2015/08/06 Javascript
深入理解ECMAScript的几个关键语句
2016/06/01 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
2016/12/28 Javascript
深入理解Javascript箭头函数中的this
2017/02/13 Javascript
vuejs响应用户事件(如点击事件)
2017/03/14 Javascript
Angular4学习笔记router的简单使用
2018/03/30 Javascript
浅谈redux以及react-redux简单实现
2018/08/28 Javascript
JS实现数组去重,显示重复元素及个数的方法示例
2019/01/21 Javascript
VUE 实现复制内容到剪贴板的两种方法
2019/04/24 Javascript
了解javascript中的Dom操作
2019/05/27 Javascript
vue实现滑动切换效果(仅在手机模式下可用)
2020/06/29 Javascript
JS数组进阶示例【数组的几种函数用法】
2020/01/16 Javascript
package.json中homepage属性的作用详解
2020/03/11 Javascript
js获取图片的base64编码并压缩
2020/12/05 Javascript
[05:11]TI9战队采访——VIRTUSPRO
2019/08/22 DOTA
简单谈谈Python中函数的可变参数
2016/09/02 Python
Python3+Pycharm+PyQt5环境搭建步骤图文详解
2019/05/29 Python
三步实现Django Paginator分页的方法
2019/06/11 Python
Python实现基于SVM的分类器的方法
2019/07/19 Python
对Django中的权限和分组管理实例讲解
2019/08/16 Python
Python中最好用的命令行参数解析工具(argparse)
2019/08/23 Python
雅诗兰黛美国官网:Estee Lauder美国
2016/07/21 全球购物
英国婚礼商城:Wedding Mall
2019/11/02 全球购物
生产部岗位职责范文
2014/02/07 职场文书
给小学生的新年寄语
2014/04/04 职场文书
合作协议书
2014/04/23 职场文书
2014年车间主任工作总结
2014/12/10 职场文书
岗位职责范本大全
2015/02/26 职场文书
React + Threejs + Swiper 实现全景图效果的完整代码
2021/06/28 Javascript
用php如何解决大文件分片上传问题
2021/07/07 PHP