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 面向对象编程  function是方法(函数)
Sep 17 Javascript
基于jquery的用鼠标画出可移动的div
Sep 06 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
Jul 05 Javascript
高性能JavaScript循环语句和条件语句
Jan 20 Javascript
jQuery Easyui快速入门教程
Aug 21 Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
Sep 17 Javascript
Angularjs中ng-repeat的简单实例
Aug 25 Javascript
web前端vue之CSS过渡效果示例
Jan 10 Javascript
解析Angular 2+ 样式绑定方式
Jan 15 Javascript
react-native动态切换tab组件的方法
Jul 07 Javascript
vue.extend与vue.component的区别和联系
Sep 19 Javascript
微信小程序wepy框架学习和使用心得详解
May 24 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 字符串操作入门教程
2006/12/06 PHP
php 特殊字符处理函数
2008/09/05 PHP
PHP函数eval()介绍和使用示例
2014/08/20 PHP
ThinkPHP处理Ajax返回的方法
2014/11/22 PHP
php查找字符串出现次数的方法
2014/12/01 PHP
解决ThinkPHP下使用上传插件Uploadify浏览器firefox报302错误的方法
2015/12/18 PHP
JQuery扩展插件Validate 5添加自定义验证方法
2011/09/05 Javascript
JavaScript学习笔记(二) js对象
2011/10/25 Javascript
JavaScript调用堆栈及setTimeout使用方法深入剖析
2013/02/16 Javascript
Node.js插件的正确编写方式
2014/08/03 Javascript
JavaScript给url网址进行encode编码的方法
2015/03/18 Javascript
Js与Jq 获取页面元素值的方法和差异对比
2015/04/30 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
2020/08/27 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
2016/02/19 Javascript
zTree实现节点修改的实时刷新功能
2017/03/20 Javascript
VUE多层路由嵌套实现代码
2017/05/15 Javascript
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
2017/06/20 Javascript
JavaScript 高性能数组去重的方法
2018/09/20 Javascript
jQuery实现图片下载代码
2019/07/18 jQuery
使用node.JS中的url模块解析URL信息
2020/02/06 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
2020/10/24 Javascript
Python中read()、readline()和readlines()三者间的区别和用法
2017/07/30 Python
selenium+python实现1688网站验证码图片的截取功能
2018/08/14 Python
Python docutils文档编译过程方法解析
2020/06/23 Python
Python从文件中读取数据的方法步骤
2020/11/18 Python
pandas按照列的值排序(某一列或者多列)
2020/12/13 Python
美国最大的在线水培用品商店:GrowersHouse.com
2018/08/14 全球购物
印尼网上商店:Alfacart.com
2019/03/11 全球购物
大学生毕业自我鉴定范文
2013/09/19 职场文书
通信工程毕业生求职信
2013/11/16 职场文书
英文商务邀请信
2014/01/22 职场文书
工作自我评价怎么写
2014/01/29 职场文书
搞笑获奖感言
2014/01/30 职场文书
物业总经理岗位职责
2014/02/28 职场文书
做一个有道德的人演讲稿
2014/05/14 职场文书
排查并解决MySQL生产库内存使用率高的报警
2022/04/11 MySQL