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说明

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

源码查看

// var all = document.getElementById('cnblogs_post_body').children;
var select = [];

for(var i = 1; i < all.length; i++){
if(all[i].getAttribute('id')){
if(all[i].getAttribute('id').match(/anchor\d+$/)){
select.push(all[i]);
}
}

}
var wheel = function(e){
e = e || event;
var data;
if(e.wheelDelta){
data = e.wheelDelta;
}else{
data = -e.detail * 40;
}
for(var i = 0; i < select.length; i++){
if(select[i].getBoundingClientRect().top > 0){
return;
}
if(select[i].getBoundingClientRect().top <= 0 && select[i+1]){
if(select[i+1].getBoundingClientRect().top > 0){
change(oCon.children[i+2])
}
}else{
change(oCon.children[select.length+1])
}
}

}
document.body.onmousewheel = wheel;
document.body.addEventListener('DOMMouseScroll',wheel,false);

var oCon = document.getElementById("content");
var close = oCon.getElementsByTagName('span')[0];
close.onclick = function(){
if(this.innerHTML == '显示目录'){
this.innerHTML = '×';
this.style.background = '';
oCon.style.border = '2px solid #ccc';
oCon.style.width = '';
oCon.style.height = '';
oCon.style.overflow = '';
oCon.style.lineHeight = '30px';
}else{
this.innerHTML = '显示目录';
this.style.background = '#3399ff';
oCon.style.border = 'none';
oCon.style.width = '60px';
oCon.style.height = '30px';
oCon.style.overflow = 'hidden';
oCon.style.lineHeight = '';
}
}
for(var i = 2; i < oCon.children.length; i++){
oCon.children[i].onmouseover = function(){
this.style.color = '#3399ff';
}
oCon.children[i].onmouseout = function(){
this.style.color = 'inherit';
if(this.mark){
this.style.color = '#3399ff';
}

}
oCon.children[i].onclick = function(){
change(this);
}
}

function change(_this){
for(var i = 2; i < oCon.children.length; i++){
oCon.children[i].mark = false;
oCon.children[i].style.color = 'inherit';
oCon.children[i].style.textDecoration = 'none';
oCon.children[i].style.borderColor = 'transparent';
}
_this.mark = true;
_this.style.color = '#3399ff';
_this.style.textDecoration = 'underline';
_this.style.borderColor = '#2175bc';
}
// ]]>