js 面向对象日历实现原理详解

浏览数：32 / 时间：2015年06月09日

对于前端开发来说，日历空间在网站里应用的很多，比如：填写表单时，是选取一下事件了--等等。下面就来分析一下怎么用js来写一个自己万年历。

在没有开始之前，我们是先弄明白是什么原理，要通过几个步骤来实现。

第一，我们的知道某一个月的某第一天是星期几。

第二，我们得知道某一个月有一共有几天，

只要有了这两部就可以循环出来了，下面看一下代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://suiyidian.cn/texiao/tab/jquery-1.5.2.min.js" type="text/javascript"></script>
<title>无标题文档</title>
</head>
<body>
<div class="rili">
<div class="time_y_m_d" style="width: 100%; height: 35px; overflow: hidden; position:relative">
<div class="time_date">2014/6</div>
<div class="m_dowmn">下一月</div>
<div class="m_up">上一月</div>
</div>
<ul class="rili_h"><li>日</li><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li></ul>
<ul class="rili_z"></ul>
</div>
<style>
.time_y_m_d div.time_date {
height: 35px;
line-height: 35px;
margin: 0 auto;
text-align: center;
width: 61px;
}
.time_y_m_d{ font-size:12px; background:#FFF}
.time_y_m_d div{ height:35px; line-height:35px; text-align:center;width: 61px; top:0px; cursor:pointer}
.m_dowmn{ position:absolute; right:0px}
.m_up{ position:absolute; left:0px}
.time_y_m_d{ border-left:1px solid #ccc;border-top:1px solid #ccc;}
.rili .rili_h li{ background:#e6e6e6}
.rili li{list-style:none; float:left; border-left:1px solid #ccc; width:49px; height:49px; text-align:center; line-height:49px;border-top:1px solid #ccc; font-size:12px}
.rili{ width:350px; height:auto; overflow:hidden; border-right:1px solid #ccc;border-bottom:1px solid #ccc;}
.rili *,.rili{ padding:0px;margin:0}
.rili{ margin:0px auto; background:#F5F5F5}
</style>
<script>
var calendar={
nowMonth:null,
nowYear:null,
nowDate:null,
getDates:function(M){//获取当前月有多少天
var D=new Date();
D.setMonth(M+1);
D.setDate(0);
return D.getDate()
},
getMonthOne:function(M){//获取当前月第一天是星期几
var D=new Date();
var D2=new Date(D.getFullYear(),M,1)
return D2.getDay()
},
nowDate:function(){
var D=new Date();
calendar.nowMonth=D.getMonth();
calendar.nowYear=D.getFullYear();
calendar.nowDate=D.getDate();
$(".time_date").html(calendar.nowYear+"年/"+(calendar.nowMonth+1))
},
downM:function(){
if(calendar.nowMonth>=11){
alert("已经是最后一月了")
}else{
calendar.nowMonth+=1;
}
$(".time_date").html(calendar.nowYear+"年/"+(calendar.nowMonth+1))
calendar.initHtml();
},
upM:function(){
if(calendar.nowMonth<=0){
alert("已经是第一月了")
}else{
calendar.nowMonth-=1;
}
$(".time_date").html(calendar.nowYear+"年/"+(calendar.nowMonth+1))
calendar.initHtml();
},
initHtml:function(){
var Da=new Date();
var dates=calendar.getDates(calendar.nowMonth)
var day=calendar.getMonthOne(calendar.nowMonth)
var zHtml="";
var d=0;
if(day!=0){
for(p=0; p<day; p++){
zHtml+="<li></li>"
}
}
for(i=0; i<dates; i++)
{
if(Da.getMonth()==calendar.nowMonth){
if(Da.getDate()==(i+1)){
zHtml+="<li style=‘color:#fff‘>"+(i+1)+"</li>";
}else{
zHtml+="<li>"+(i+1)+"</li>";
}
}else{
zHtml+="<li>"+(i+1)+"</li>";
}
}
$(".rili_z").html(zHtml)
var dL=$(".rili_z li").length;
var zLeng=42
if(dL!=zLeng){
for(k=0; k<(zLeng-dL); k++){
$(".rili_z").append("<li></li>")
}
}
}
}
calendar.nowDate()
calendar.initHtml()
$(".m_dowmn").click(function(){ calendar.downM()})
$(".m_up").click(function(){ calendar.upM()})
</script>
</body>
</html>