<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
/*总层*/
#total_div {
width: 240px;
}
/*上边的层*/
#top_div {
width: 100%;
}
/*上边层里面的设置*/
#top_div div{
line-height : 30px;
vertical-align : middle;
float : left;
text-align :center;
}
/*上边层里面的左翻页的层*/
#top_div #prev_div{
width : 20%;
cursor : pointer;
}
/*上边层里面的年月显示的层*/
#top_div #date_div{
width : 50%;
float : left;
}
/*上边层里面的右翻页的层*/
#top_div #next_div{
width : 20%;
float : left;
cursor : pointer;
}
/*上边层里面的图片设置*/
#top_div img{
width : 80%;
height : 20px;
}
/*主要显示日历的层*/
#calendar_div {
width: 100%;
}
/*主要显示日历的层里面的层*/
#calendar_div div {
width: 30px;
/*
border: #0080c0 solid 1px;
*/
margin-top: 1px;
margin-left: 1px;
line-height: 20px;
vertical-align: middle;
text-align: center;
float: left;
font-size: 12px;
background-color : #f7f2aa;
}
</style>
<script type="text/javascript">
var ca = {
y: null,
m: null,
d: null,
date: null,
week: null,
days: null,
now : null,
/**
* 通过id获得对象
* @param {Object} idStr
*/
$: function(idStr){
return document.getElementById(idStr);
},
/**
* 初始化
* @param {Object} inyear
* @param {Object} inmonth
*/
init: function(inyear, inmonth){
ca.now = new Date();
ca.y = inyear == null ? ca.now.getFullYear() : inyear;
ca.m = inmonth == null ? ca.now.getMonth() : (parseInt(inmonth) - 1);
ca.d = 1;
if (ca.date == null) {
ca.date = new Date(ca.y, ca.m, ca.d);
}
ca.y = ca.date.getFullYear();
ca.m = ca.date.getMonth();
ca.d = ca.date.getDate();
},
prev : function(){
ca.date.setMonth(ca.date.getMonth() - 1);
ca.draw();
},
next : function(){
ca.date.setMonth(ca.date.getMonth() + 1);
ca.draw();
},
/**
* 画出日历
* @param {Object} inyear
* @param {Object} inmonth
*/
draw: function(inyear, inmonth){
//初始化
ca.init(inyear, inmonth);
//日期属性
ca.getDateInfo();
//日历的字串
var calendarDivStr = '';
//title和日历主要字串
calendarDivStr += ca.drawTitle();
calendarDivStr += ca.drawCalendar();
//把日历字串写入层
ca.$("calendar_div").innerHTML = calendarDivStr;
ca.$("date_div").innerHTML = ca.y + "年" + (ca.m + 1) + "月";
},
/**
* 画出title
*/
drawTitle: function(){
var title = ["一", "二", "三", "四", "五", "六", "日"];
var titleStr = '';
for (var i = 0; i < title.length; i++) {
titleStr += '<div>';
titleStr += title[i];
titleStr += '</div>';
}
return titleStr;
},
/**
* 画出日历
*/
drawCalendar: function(){
//算出本月日历总共有好多格子
var cot = ca.week - 1 + ca.days;
//要返回的日历字串
var caStr = '';
//循环拼接
for (var i = 0; i < cot; i++) {
var content = (i + 2 - ca.week);
//如果是空白日期,里面内容也为空白
if (i < (ca.week - 1)) {
content = " ";
}
var backgroundcolor = "";
if(ca.y == ca.now.getFullYear() && ca.m == ca.now.getMonth() && ca.now.getDate() == content){
backgroundcolor = "background-color : #76cdf8;";
}
caStr += '<div style="' + backgroundcolor + '">';
caStr += content;
caStr += '</div>';
}
return caStr;
},
/**
* 获得日期属性
*/
getDateInfo: function(){
//日历第一天
var weeks = [7, 1, 2, 3, 4, 5, 6];
//日历天数
var days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
//获得第一天
var day = ca.date.getDay();
//得到第一天
ca.week = weeks[day];
//得到月份
// var month = ca.date.getMonth() + 1;
/********得到日历天数*********/
ca.days = days[ca.m];
if (ca.m == 1) {
if ((ca.y % 4 == 0 && ca.y % 100 != 0) || ca.y % 400 == 0) {
ca.days++;
}
}
}
}
</script>
</head>
<body onload="ca.draw()">
<div id="total_div">
<div id="top_div">
<div id="prev_div" onclick="ca.prev()"><img src="../img/a_l.png"/></div>
<div id="date_div"> </div>
<div id="next_div" onclick="ca.next()"><img src="../img/a_r.png"/></div>
</div>
<div id="calendar_div">
</div>
</div>
</body>
</html>
- 1
- 2
前往页