你的位置:首页 > Java教程

[Java教程]javascript中Date对象的应用——简易日历的实现


×
目录
[1]效果 [2]HTML [3]CSS[4]JS

前面的话

  简易日历作为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说明

  对于简易日历的实现,首先确定日历中的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);}

 

源码查看