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

对于前端开发来说，日历空间在网站里应用的很多，比如：填写表单时，是选取一下事件了--等等。下面就来分析一下怎么用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='background-color:green;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>

是不是看起来很简单呢，这里可以结合你别的知识做出各式各样的日历风格

下面给一个演示地址：DEMO

本文由 kevin 创作，采用知识共享署名4.0 国际许可协议进行许可。
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名。