JS日历效果
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>日历</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script language="JavaScript" type="text/javascript">
function isIe() {
var i = navigator.userAgent.toLowerCase().indexOf("msie");
return i >= 0;
}
function isFireFox() {
var ii = navigator.userAgent.toLowerCase().indexOf("firefox");
return ii >= 0;
}
var arrmonths = new Array(20, 15, 15, 20, 20, 17, 15, 16, 15, 26, 15, 15);
var months = new Array("一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二");
var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
var days = new Array("日", "一", "二", "三", "四", "五", "六");
var classTemp;
var today = new getToday();
var year = today.year;
var month = today.month;
var date = today.date
var newCal;
//添加
var month1 = today.month + 1;
var today1 = new Array("星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
var dateDisplay = today1[date]; //星期几
var dayDisplay = today.day; //几号
function getDays(month, year) {
if (1 == month) return ((0 == year % 4) && (0 != (year % 100))) || (0 == year % 400) ? 29 : 28;
else return daysInMonth[month];
}
function getToday() {
this.now = new Date();
this.year = this.now.getFullYear();
this.month = this.now.getMonth();
this.day = this.now.getDate();
this.date = this.now.getDay();
}
function Calendar() {
newCal = new Date(year, month, 1);
today = new getToday();
var day = -1;
var startDay = newCal.getDay();
var endDay = getDays(newCal.getMonth(), newCal.getFullYear());
var daily = 0;
if ((today.year == newCal.getFullYear()) && (today.month == newCal.getMonth())) {
day = today.day;
}
var caltable = document.all.caltable.tBodies.calendar;
//var caltable = document.getElementById("caltable").tBodies.calendar;
var intDaysInMonth = getDays(newCal.getMonth(), newCal.getFullYear());
var plustemp = 0;
var isplus = 0;
for (var intWeek = 0; intWeek < caltable.rows.length; intWeek++)
for (var intDay = 0; intDay < caltable.rows[intWeek].cells.length; intDay++) {
var cell = caltable.rows[intWeek].cells[intDay];
//alert(cell.innerHTML);
var montemp = (newCal.getMonth() + 1) < 10 ? ("0" + (newCal.getMonth() + 1)) : (newCal.getMonth() + 1);
if ((intDay == startDay) && (0 == daily)) { daily = 1; }
var daytemp = daily < 10 ? ("0" + daily) : (daily); //日期
var d = "<" + newCal.getFullYear() + "-" + montemp + "-" + daytemp + ">";
if (day == daily) {
cell.className = "DayNow";
} else if (intDay == 6) {
cell.className = "DaySat";
if (daily == arrmonths[month])
plustemp = 2;
} else if (intDay == 0) {
cell.className = "DaySun";
if (daily == arrmonths[month])
plustemp = 1;
} else {
cell.className = "Day";
}
if ((daily > 0) && (daily <= intDaysInMonth)) {
var zsri = arrmonths[month] + plustemp;
if (daily <= zsri) {
cell.className = "CalendarZqTD1";
} else {
//cell.className="Calendar";
cell.className = "CalendarZqTD";
}
if (day == daily) {
cell.className = "DayNow";
}
//FF浏览器不支持innerText
/*if ($.browser.msie)
cell.innerText = daily;
else
cell.textContent = daily;*/
if (isIe()) {
cell.innerText = daily;
}
else {
cell.textContent = daily;
}
daily++;
} else {
cell.className = "CalendarTD"; //CalendarTD
cell.innerText = "";
}
}
//document.all.year.value=year;
//document.all.month.value=month+1;
}
function subMonth() {
if ((month - 1) < 0) {
month = 11;
year = year - 1;
} else {
month = month - 1;
}
Calendar();
}
function addMonth() {
if ((month + 1) > 11) {
month = 0;
year = year + 1;
} else {
month = month + 1;
}
Calendar();
}
/*************************友情提示信息 开始**************************/
//当前日期
var nowday = today.day;
//距离申报期结束还有多少天
var endnsriq = arrmonths[month] - today.day;
if (today.day <= arrmonths[month]) {
var yqtsmsg = '本月申报期为<span class="sbfont">' + arrmonths[month] + '</span>号。<br/>离申报期结束还有<span class="sbfont">' + endnsriq + '</span>天！';
}
else {
var yqtsmsg = "本月申报期已过。";
}
/*************************友情提示信息 结束**************************/
</script>
<style type="text/css">
body
{
margin: 0px;
padding: 0px;
}
table
{
border-collapse: collapse;
}
.Calendar
{
border: 0 dotted #1C6FA5;
color: #AAAAAA;
font-family: "宋体" ,arial;
text-decoration: none;
width: 180px;
margin: 0 auto;
}
.Calendar tr td
{
border: 1px solid #E2F5FC;
font-family: "宋体" ,arial;
font-size: 12px;
text-align: center;
}
.CalendarTD
{
color: #AAAAAA;
width: 11%;
}
.CalendarZqTD
{
width: 11%;
color: #000;
height: 22px;
}
.CalendarZqTD1
{
color: #FE0000;
width: 11%; height: 22px;
}
.DaySat
{
width: 12%;
height: 22px;
color: #243f65;
text-decoration: none;
}
.DaySun
{
text-align: center;
width: 12%;
height: 22px;
color: #243f65;
text-decoration: none;
}
.DayNow
{
width: 11%;
height: 22px;
color: #fff;
background:#FF6600;
}
.DayTitle
{
text-align: center;
width: 11%;
height: 22px;
color: #fff;
background:#333333;
}
.DaySatTitle
{
text-align: center;
width: 12%;
height: 22px;
color: #fff;
font-weight: bold;
text-decoration: none;
background:#333333;
}
.DaySunTitle
{
color: #fff;
font-weight: bold;
height: 18px;
text-align: center;
text-decoration: none;
width: 12%;
background:#333333;
}
.DayButton
{
font-family: Webdings;
color: #243f65;
cursor: hand;
font-weight: bold;
text-decoration: none;
}
.newmonth
{
clear: both;
text-align: center;
width: 180px;
margin: 5px auto;
line-height: 22px;
font-weight: bold;
font-size:12px;
}
.nsdate
{
font-size: 10px;
color: #1A56A8;
}
#yqts
{
font-size: 13px;
margin: 0px auto;
width: 170px;
padding: 5px;
line-height:18px;
text-align:center;
}
.sbfont
{ font-weight:bold; margin:0px 3px;}
</style>
</head>
<body style="background-color: transparent;">
<div style="overflow: hidden; height: 210px; width: 180px; margin:0 auto;">
<div class="newmonth">
<script language="JavaScript" type="text/javascript">
document.write("" + year + "年");
document.write(month1 + "月" + dayDisplay + "日");
document.write(" " + dateDisplay);
</script>
</div>
<table cellspacing="0" cellpadding="0" border="0" class="Calendar" id="caltable">
<thead>
<tr valign="middle" align="right">
<script language="JavaScript" type="text/javascript">
document.write("<TD class="DaySunTitle" id=diary>" + days[0] + "</TD>");
for (var intLoop = 1; intLoop < days.length - 1; intLoop++)
document.write("<TD class="DayTitle" id=diary>" + days[intLoop] + "</TD>");
document.write("<TD class="DaySatTitle" id=diary>" + days[intLoop] + "</TD>");
</script>
</tr>
</thead>
<tbody id="calendar" align="center">
<script language="JavaScript" type="text/javascript">
for (var intWeeks = 0; intWeeks < 6; intWeeks++) {
document.write("<TR style='cursor:hand'>");
for (var intDays = 0;
intDays < days.length; intDays++) document.write("<TD class="CalendarTD" ></TD>");
document.write("</TR>");
}
</script>
</tbody>
</table>
<div id="yqts">
<script type="text/javascript">
document.write(yqtsmsg);
</script>
</div>
<script language="JavaScript" type="text/javascript">
Calendar();
</script>
</div>
</body>
</html>
