用javascript 兑现的万年历代码
日期：2014-05-16 浏览次数：20354 次
用javascript 实现的万年历代码。
<!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" />
<title>日历test</title>
<style type="text/css">
*{ margin:0px; padding:0px;}
#dateBody{width:300px; padding:10px; background:#CCC;}
.weekday{ width:40px; height:40px; background:#999; line-height:30px; margin:1px; text-align:center; margin-top:2px; vertical-align:middle;float:left;}
.day{ width:40px; height:40px; background:#999; line-height:40px; margin:1px; text-align:center;float:left;}
.days{ width:40px; height:40px; background:#999; line-height:40px; margin:1px; text-align:center;float:left;}
#thisDay{width:40px; height:40px; background:#093;line-height:40px; margin:1px; text-align:center;float:left;}
#setDate{ width:320px; height:40px; background:#999; vertical-align:middle; line-height:40px; font-size:16px; font-weight:600; text-align:center;}
#borthTextAre{ width:320px; height:20px; background:#96F;}
</style>
</head>
<body>
<div id="borthTextAre" >你的生日：<input id="borthText" type="text" /></div>
<div id="setDate">
选择年份：<select id="setYear" onchange="chose(this)"></select> 选择月份：<select id="setMonth" onchange="chose(this)"></select>
</div>
<!-- 日历 begin-->
<div id ="dateBody">
<div class="weekday">日</div>
<div class="weekday">一</div>
<div class="weekday">二</div>
<div class="weekday">三</div>
<div class="weekday">四</div>
<div class="weekday">五</div>
<div class="weekday">六</div>
<!-- 日历天数显示 begin-->
<div id="days">
</div>
<!-- 日历天数显示 begin-->
<br style="clear:both;" />
</div>
<!--日历 end -->
<script type="text/javascript">
function $(id)
{
return document.getElementById(id);
}
var nowDay = new Date();
var year=parseInt(nowDay.getFullYear());
var month=parseInt(nowDay.getMonth());
builtSetYearAndMonth(100);
//显示该年该月的日历
function makeDays(year,month)
{
var firstDay = new Date(year,month,1);
//获得每月的前面空余的天数
var firstDayBefore = parseInt(firstDay.getDay());
//显示每月前面空余的天数
for(var i= 0;i<firstDayBefore;i++)
{
dayobj = document.createElement("div");
dayobj.className="day";
$("days").appendChild(dayobj);
}
//显示每月的天数
for(var i=1;i<=getDayCountByYearAndMonth(year,month);i++)
{
dayobj = document.createElement("div");
dayobj.className="day";
dayobj.name=year+"-"+(parseInt(month)+1)+"-"+i;
$("days").appendChild(dayobj);
dayobj.innerHTML = i;
//设置当天的样式
if(nowDay.getFullYear()==year && nowDay.getMonth()==month && nowDay.getDate()==i)
{
dayobj.id="thisDay";
}
dayobj.onmouseover= function(){
this.style.backgroundColor="#690";
}
dayobj.onmouseout= function(){
this.style.backgroundColor="#999";
}
dayobj.onclick= function(){
//$("borthTextAre").value=this.name;
//$("borthTextAre").innerHTML = $("borthTextAre").value;
//$("borthTextAre").innerHTML="你的生日："+this.name;
$("borthText").value = this.name;
}
}
}
//计算该年该月的天数
function getDayCountByYearAndMonth(year,month)
{
month++;
if(month==4 || month==6 || month==7 || month==9 || month==11)
return 30;
if(month==2)
{
if(((year%4==0)
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
