这篇文章主要为大家详细介绍了 javascript 中 Date 对象应用之简易日历实现,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
前面的话
简易日历作为 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);
- }
来源: http://www.phperz.com/article/17/0405/264333.html