html页面：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<title></title>
<style>
._calendar_zyl{
width: 80%;
height: 350px;
border: 1px solid #eee;
padding: 10px 20px;
position: absolute;
top: 50px;
margin-left: 5px;
z-index: 999999;
}
._calendar_zyl .top{
widow:100%;
height: 30px;
}
._calendar_zyl .table{
width: 100%;
height: 300px;
}
._calendar_zyl .fl{
float: left;
}
._calendar_zyl .preYear{
margin-left: 20px;
}
._calendar_zyl .fr{
float: right;
}
._calendar_zyl .nextYear{
margin-right: 20px;
}
._calendar_zyl .top{
position: relative;
}
._calendar_zyl .top #showCalendar{
position: absolute;
display: block;
width: 70px;
left: 50%;
margin-left: -35px;
text-align: center;
}
</style>
<script src="calendar.js"></script>
</head>
<body>
<div class="_calendar_zyl" id="calendar">
<div class="top"><span id="preMonth" class="fl"><</span><span id="preYear" class="fl preYear"><<</span> <span id="showCalendar"></span><span id="nextMonth" class="fr">></span><span id="nextYear" class="fr nextYear">>></span> </div>
<table class="table" id="tb"></table>
</div>
</body>
<script>
var cal = document.getElementById("calendar");
var tb = document.getElementById("tb");
var calendar = new Calendar({
wrap:cal,
tb:tb
},function(ret){
console.log(ret);
console.log("jjjjj");
});
</script>
</html>
js实现：
/**
* Created by Administrator on 2015/11/18.
*/
function Calendar(param,callback_fn){
this.wrap = param.wrap;
this.tb = param.tb;
this.year = 0;
this.month = 0;
this.dy = 0;
this.init = function(){
var currDate = new Date();
this.year = currDate.getFullYear();
this.month = currDate.getMonth();
this.dy = currDate.getDate();
this.initTable(currDate.getFullYear(),currDate.getMonth(),currDate.getDate());
var self = this;
var preMonth = document.getElementById("preMonth");
var nextMonth = document.getElementById("nextMonth");
var preYear = document.getElementById("preYear");
var nextYear = document.getElementById("nextYear");
//点击上一月触发的事件
preMonth.addEventListener("click",function(){
if(self.month == 0){
self.year--;
self.month = 11;
}else{
self.month--;
}
self.initTable(self.year,self.month,self.dy);
});
//点击下一月触发的事件
nextMonth.addEventListener("click",function(){
if(self.month == 11){
self.year++;
self.month = 0;
}else{
self.month++
}
self.initTable(self.year,self.month,self.dy);
});
//点击上一年触发的事件
preYear.addEventListener("click",function(){
self.year--;
self.initTable(self.year,self.month,self.dy);
});
//点击下一年触发的事件
nextYear.addEventListener("click",function(){
self.year++;
self.initTable(self.year,self.month,self.dy);
});
function tapTd(e){
var target = e.target;
if(target.nodeName.toLocaleLowerCase() == "td"){
var dy = target.innerHTML;
var ret = {
year:self.year,
month:self.month+1,
dy:dy
}
callback_fn.call(self,ret);
self.wrap.style.display = "none";
self.tb.removeEventListener("click",tapTd);
}
}
//点击单元格
this.tb.addEventListener("click",tapTd);
}
this.init();
}
Calendar.prototype.initTable = function(year,month,dy){
var dyNum = getDysOfMonth(year);//当前月的天数
var firstDay = getFirstDay(year,month,dy);//当前月第一天是星期几
var trNum=Math.ceil((dyNum[month] + firstDay)/7);//表格的行数
var str = "<tr><td align=‘center‘>日</td><td align=‘center‘>一</td><td align=‘center‘>二</td><td align=‘center‘>三</td><td align=‘center‘>四</td><td align=‘center‘>五</td><td align=‘center‘>六</td></tr>";
for(i=0;i<trNum;i++) { //表格的行
str+="<tr>";
for(k=0;k<7;k++) { //表格每行的单元格
idx=i*7+k; //单元格自然序列号
date_str=idx-firstDay+1; //计算日期
(date_str<=0 || date_str>dyNum[month]) ? date_str=" " : date_str=idx-firstDay+1; //过滤无效日期（小于等于零的、大于月总天数的）
//打印日期：今天底色为红
date_str==dy ? str+="<td align=‘center‘ bgcolor=‘red‘>" + date_str + "</td>" : str+="<td align=‘center‘>" + date_str + "</td>";
}
str+="</tr>"; //表格的行结束
}
var showCalendar = document.getElementById("showCalendar");
showCalendar.innerHTML = year+"-"+(month+1);
this.tb.innerHTML = str;
}
Calendar.prototype.showCal = function(){
this.wrap.style.display = "block";
}
Calendar.prototype.hideCal = function(){
this.wrap.style.display = "none";
}
/**
* @desc :该方法获取指定月份的第一天是星期几
* @param year：年
* @param month：月
* @param dy：日
* @returns {number} 当月第一天是星期几
*/
function getFirstDay(year,month,tdy){
var n1str=new Date(year,month,1); //当月第一天Date资讯
var firstday=n1str.getDay(); //当月第一天星期几
console.log(firstday);
return firstday;
}
/**
* @desc:该方法获取指定年的每个月的天数
* @param year :年
* @returns {Array} 每个月的天数
*/
function getDysOfMonth(year){
var sepMon = 28 + (year%100==0?res=(year%400==0?1:0):res=(year%4==0?1:0));
var m_days=new Array(31,sepMon,31,30,31,30,31,31,30,31,30,31); //各月份的总天数
return m_days;
}
时间： 2024-08-11 05:44:09