万年历 html 代码,用javascript 实现的万年历代码。

*{ 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;}

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

{

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.οnmοuseοver= function(){

this.style.backgroundColor=”#690″;

}

dayobj.οnmοuseοut= function(){

this.style.backgroundColor=”#999″;

}

dayobj.οnclick= 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)&&(year%100!=0)) || (year%400 == 0))

return 28;

return 29;

}

return 31;

}

//初始化年月选择器

function builtSetYearAndMonth(yearNum)

{

for(var i=-yearNum; i

yearObj = document.createElement(“option”);

yearObj.innerHTML =parseInt(nowDay.getFullYear())+i;

yearObj.value =parseInt(nowDay.getFullYear())+i;

$(“setYear”).appendChild(yearObj);

}

for(var i=0;i<12;i++)

{

monthObj = document.createElement(“option”);

monthObj.innerHTML=i+1;

monthObj.value =i;

$(“setMonth”).appendChild(monthObj);

}

$(“setYear”).selectedIndex = yearNum;

$(“setMonth”).selectedIndex = parseInt(nowDay.getMonth());

makeDays(parseInt(year),parseInt(month));

}

function chose(ele)

{

if(ele.id == “setYear”){

year = ele.value;

}

if(ele.id == “setMonth”){

month = ele.value;

}

$(“days”).innerHTML=””;

makeDays(year,month);

}