用javascript 实现的万年历代码。

最新推荐文章于 2022-12-10 11:29:06 发布

liuhenghui5201

最新推荐文章于 2022-12-10 11:29:06 发布

阅读量5.4k

点赞数 1

分类专栏： Javascript

本文链接：https://blog.csdn.net/liuhenghui5201/article/details/8674786

版权

Javascript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!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" οnchange="chose(this)"></select>  选择月份：<select id="setMonth" οnchange="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.ο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<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);
}
</script>



</body>
</html>

liuhenghui5201

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
用javascript 实现的万年历代码。

日历test*{ 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; mar
复制链接

扫一扫

专栏目录