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 相关文章推荐
javascript 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
Jan 15 Javascript
基于jQuery的试卷自动排版系统实现代码
Jan 06 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
Oct 17 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
Oct 31 Javascript
在JavaScript中处理字符串之fontcolor()方法的使用
Jun 08 Javascript
JavaScript中的toLocaleDateString()方法使用简介
Jun 12 Javascript
使用node+vue.js实现SPA应用
Jan 28 Javascript
javascript+html5+css3自定义提示窗口
Jun 21 Javascript
ES6深入理解之“let”能替代”var“吗?
Jun 28 Javascript
教你如何用node连接redis的示例代码
Jul 12 Javascript
JS实现深度优先搜索求解两点间最短路径
Jan 17 Javascript
node.js爬虫框架node-crawler初体验
Oct 29 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+MySQL之Insert Into数据插入用法分析
2015/09/27 PHP
php模拟post上传图片实现代码
2016/06/24 PHP
highchart数据源纵轴json内的值必须是int(详解)
2017/02/20 PHP
PHP创建对象的六种方式实例总结
2019/06/27 PHP
PHP cookie与session会话基本用法实例分析
2019/11/18 PHP
一些常用且实用的原生JavaScript函数
2010/09/08 Javascript
JS代码优化技巧之通俗版(减少js体积)
2011/12/23 Javascript
php和js对数据库图片进行等比缩放示例
2014/04/28 Javascript
jQuery中:image选择器用法实例
2015/01/03 Javascript
IE浏览器下PNG相关功能
2015/07/05 Javascript
基于vue+ bootstrap实现图片上传图片展示功能
2017/05/17 Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
2020/04/26 Javascript
Python实现简单拆分PDF文件的方法
2015/07/30 Python
用python爬取租房网站信息的代码
2018/12/14 Python
python实现大文件分割与合并
2019/07/22 Python
Python3分析处理声音数据的例子
2019/08/27 Python
基于python的selenium两种文件上传操作实现详解
2019/09/19 Python
flask框架url与重定向操作实例详解
2020/01/25 Python
学python需要去培训机构吗
2020/07/01 Python
如何卸载python插件
2020/07/08 Python
详解Python 循环嵌套
2020/07/09 Python
PyCharm 2020.2下配置Anaconda环境的方法步骤
2020/09/23 Python
python 绘制正态曲线的示例
2020/09/24 Python
基于Django集成CAS实现流程详解
2020/11/28 Python
python 数据类型强制转换的总结
2021/01/25 Python
HTML5探秘:用requestAnimationFrame优化Web动画
2018/06/03 HTML / CSS
使用html5 canvas绘制圆环动效
2019/06/03 HTML / CSS
英国著名国际平价时尚男装品牌:Topman
2016/08/27 全球购物
Bogner美国官网:滑雪服中的”Dior”
2018/01/30 全球购物
Tirendo比利时:在线购买轮胎
2018/10/22 全球购物
刑事辩护授权委托书格式
2014/10/13 职场文书
小学教师师德师风自我评价
2015/03/04 职场文书
居住证明范文
2015/06/17 职场文书
2016年小学端午节活动总结
2016/04/01 职场文书
农村房屋租赁合同(范本)
2019/07/23 职场文书
导游词之贵州百里杜鹃
2019/10/29 职场文书