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 相关文章推荐
json简单介绍
Jun 10 Javascript
常用的Javascript设计模式小结
Dec 09 Javascript
JS实战篇之收缩菜单表单布局
Dec 10 Javascript
Bootstrap table表格简单操作
Feb 07 Javascript
详解基于vue-router的动态权限控制实现方案
Sep 28 Javascript
Mac中安装nvm的教程分享
Dec 11 Javascript
使用Vue写一个datepicker的示例
Jan 27 Javascript
详解KOA2如何手写中间件(装饰器模式)
Oct 11 Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
Oct 25 Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
Apr 30 Javascript
Node 搭建一个静态资源服务器的实现
May 20 Javascript
ionic+html5+API实现双击返回键退出应用
Sep 17 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生成缩略图填充白边(等比缩略图方案)
2013/12/25 PHP
PHP获取当前日期和时间及格式化方法参数
2015/05/11 PHP
WordPress中登陆后关闭登陆页面及设置用户不可见栏目
2015/12/31 PHP
Zend Framework教程之Zend_Config_Ini用法分析
2016/03/23 PHP
CI框架整合smarty步骤详解
2016/05/19 PHP
PHP表单验证内容是否为空的实现代码
2016/11/14 PHP
php中分页及SqlHelper类用法实例
2017/01/12 PHP
Thinkphp 5.0实现微信企业付款到零钱
2018/09/30 PHP
JavaScript 乱码问题
2009/08/06 Javascript
用js替换除数字与逗号以外的所有字符的代码
2014/06/07 Javascript
让浏览器DOM元素最后加载的js方法
2014/07/29 Javascript
javacript使用break内层跳出外层循环分析
2015/01/12 Javascript
jQuery实现两款有动画功能的导航菜单代码
2015/09/16 Javascript
jquery表单插件form使用方法详解
2017/01/20 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
2017/03/29 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
2018/10/20 Javascript
用jQuery将JavaScript对象转换为querystring查询字符串的方法
2018/11/12 jQuery
swiper实现异形轮播效果
2019/11/28 Javascript
VUE : vue-cli中去掉路由中的井号#操作
2020/09/04 Javascript
[48:44]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS HGT
2014/05/22 DOTA
在Python中使用HTML模版的教程
2015/04/29 Python
Python 列表排序方法reverse、sort、sorted详解
2016/01/22 Python
PyQt实现界面翻转切换效果
2018/04/20 Python
在macOS上搭建python环境的实现方法
2019/08/13 Python
python正则过滤字母、中文、数字及特殊字符方法详解
2020/02/11 Python
如何利用CSS3制作3D效果文字具体实现样式
2013/05/02 HTML / CSS
CSS3与动画有关的属性transition、animation、transform对比(史上最全版)
2017/08/18 HTML / CSS
html5+css如何实现中间大两头小的轮播效果
2018/12/06 HTML / CSS
中国电子产品批发商/跨境电商/外贸网:Sunsky-online
2020/04/20 全球购物
物业品质提升方案
2014/06/08 职场文书
授权收款委托书范本
2014/10/10 职场文书
新教师个人总结
2015/02/06 职场文书
python中os.path.join()函数实例用法
2021/05/26 Python
电脑开机弹出documents文件夹怎么回事?弹出documents文件夹解决方法
2022/04/08 数码科技
MySQL控制流函数(-if ,elseif,else,case...when)
2022/07/07 MySQL
win10电脑老是死机怎么办?win10系统老是死机的解决方法
2022/08/05 数码科技