用javascript 兑现的万年历代码-JavaSript-爱易网页

用javascript 兑现的万年历代码

日期：2014-05-16　浏览次数：20330 次

用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)

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

用javascript 兑现的万年历代码

相关资料更多>

推荐阅读更多>