1. [代码] 采用工厂模式封装 !doctype htmlhtml head meta charset="UTF-8" meta name="Keywords" content="" meta name="Description" content="" titleDocument/title style type="text/css"*{margin:0;padding:0;}body{font-size:14px;font-fami
1. [代码]采用工厂模式封装
<!doctype html>
<html >
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
*{margin:0;padding:0;}
body{font-size:14px;font-family:"微软雅黑"}
a{text-decoration:none;color:#000}
ul li{list-style:none}
#calBox{width:350px;height:370px;margin:100px auto;text-align:center;border-radius:100px;background:#ccc;border:5px solid #ccc;border-radius:5px;}
#calBox #box1{width:350px;height:20px;background:#00ff99;}
#calBox #box1 .year{display:inline-block;width:40px;}
#calBox #box1 .month{display:inline-block;width:40px;}
#calBox ul{width:350px;height:350px;}
#calBox ul li{width:50px;height:50px;float:left;border-radius:25px;background:#eee;line-height:50px;}
.iconfont{cursor:pointer}
</style>
<link rel="stylesheet" href="iconfont/iconfont.css">
</head>
<body>
<div id="calBox">
<div id="box1">
<span>
<i class="iconfont add"></i>
<span class="year"></span>
<i class="iconfont delet"></i>
年
</span>
<span>
<i class="iconfont add"></i>
<span class="month"></span>
<i class="iconfont delet"></i>
月
</span>
</div>
<ul>
</ul>
</div>
<script type="text/javascript">
window.onload = function(){
//阻止对文本的复制粘贴
document.oncontextmenu=new Function("event.returnValue=false");
document.onselectstart=new Function("event.returnValue=false");
function Factory(type){
return new this[type]();
};
Factory.prototype.cal = function (){
//初始化万年历
this.setCal = function(){
var date = new Date();
//获取当年的年月日
var year = date.getFullYear();;
var month = date.getMonth();
var dates = date.getDate();
var yearDom = getDomByClassName("box1","year");
var monthDom = getDomByClassName("box1","month");
yearDom.innerHTML = year;
monthDom.innerHTML = month+1;
//显示当前年月对应的万年历
this.cal(yearDom.innerHTML,monthDom.innerHTML-1,dates);
};
//显示万年历
this.cal = function cal(year,month,dates){
var ulDom = dom("calBox").children[1];
ulDom.innerHTML="";
ulDom.innerHTML+="<li>日</li>"+
"<li>一</li>"+
"<li>二</li>"+
"<li>三</li>"+
"<li>四</li>"+
"<li>五</li>"+
"<li>六</li>";
var array = this.getArray(year,month);
var firstDay = this.myTime(year,month).startDay;
var days = this.myTime(year,month).days;
for(var i=0;i<42;i++){
var html = "<li>"+array[i]+"</li>";
ulDom.innerHTML+=html;
}
for(j=firstDay;j<=firstDay+days-1;j++){
if(array[j] == dates){
ulDom.children[j+7].style.background = "#ccff99";
}
}
//添加鼠标点击事件
var $this = this;
var iDoms = dom("box1").getElementsByTagName("i");
for(var k=0,len=iDoms.length;k<len;k++){
if(iDoms[k].className.search("add")!=-1){
iDoms[k].onclick = function (){
$this.add(this);
};
}else{
iDoms[k].onclick = function (){
$this.delet(this);
};
}
}
};
//显示本月份的数字排序
this.getArray = function getArray(year,month){
//获取本月份的对象
var newJson = this.myTime(year,month);
//获取本月份第一天的星期数
var firstDay = newJson.startDay
//获取本月份总共的天数
var days = newJson.days;
//获取上个月份的总天数
var lastDays = ((month==0)?this.myTime(year-1,11):this.myTime(year,month-1)).days;
//定义一个数组，将需要展示的数字都保存进去；
var array = [];
for(var i=(lastDays-firstDay+1);i<=lastDays;i++){
array.push(i);
}
for(var j=1;j<=days;j++){
array.push(j);
}
for(var k=1;k<=42-days-firstDay;k++){
array.push(k);
}
return array;
};
//设置时间函数，参数为年月,结果返回月份对应的总天数和当月第一天所在的星期数
this.myTime = function myTime(year,month){
var json = {};
//设置时间
var myDate = new Date();
//设置当前时间为该月份的第一天
myDate.setFullYear(year,month,1);
//获取月份第一天的星期数,并保存在json中
var firstDay = myDate.getDay();
json.startDay = firstDay;
//将月份对应的天数保存在数组中
var daysArray = (year%4==0)?[31,29,31,30,31,30,31,31,30,31,30,31]:[31,28,31,30,31,30,31,31,30,31,30,31];
//判断该月份的天数,并保存在json中
json.days = daysArray[month];
return json;
};
//添加add事件
this.add = function add(iDom){
var timeDom = iDom.parentElement.children[1];
var count = timeDom.innerHTML*1;
if(timeDom.className=="month"){
timeDom.innerHTML = (count+1>12)?1:count+1;
}else{
timeDom.innerHTML = count+1;
};
var yearDom = getDomByClassName("box1","year");
var monthDom = getDomByClassName("box1","month");
this.cal(yearDom.innerHTML*1,monthDom.innerHTML-1,1);
};
//添加delet事件
this.delet = function delet(iDom){
var timeDom = iDom.parentElement.children[1];
var count = timeDom.innerHTML*1;
if(timeDom.className=="month"){
timeDom.innerHTML = (count-1<1)?12:count-1;
}else{
timeDom.innerHTML = count-1;
};
var yearDom = getDomByClassName("box1","year");
var monthDom = getDomByClassName("box1","month");
this.cal(yearDom.innerHTML*1,monthDom.innerHTML-1,1);
};
};
new Factory("cal").setCal();
};
//通过className找到元素对象的方法
function getDomByClassName(id,className){
var clockDom = document.getElementById(id);
var childDoms = clockDom.getElementsByTagName("*");
for(var i=0,len=childDoms.length;i<len;i++){
if(childDoms[i].className==className){
return childDoms[i];
}
}
};
function dom(id){
return document.getElementById(id);
};
</script>
</body>
</html>