一個簡單的小日曆

時間 2019-11-18
標籤一個簡單日曆简体版
原文原文鏈接
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>js日曆</title>
<style>
*{margin:0; padding:0;}
ul,li{list-style:none;}
body{font-weight:bold; font-family:"微軟雅黑", "新宋體", serif, arial;}
#calendar{width:280px; overflow:hidden; border:1px solid #dadada; position:absolute; left:50%; top:50%; margin-left:-141px; margin-top:-141px; border-radius:3px;}
.c_header{width:100%; height:60px; background-color:#83d8e7; background-image:linear-gradient(to bottom, #abe5ef, #83d8e7); position:relative;}
.c_header h1{font-size:16px; height:30px; line-height:30px; text-align:center; color:#ffffff;}
.c_header span{width:20px; height:20px; line-height:20px; color:#ffffff; text-align:center; position:absolute; top:5px; border-radius:50%; background-image:linear-gradient(to bottom, #83d8e7, #abe5ef); cursor:pointer;}
.c_header span:hover{background:#83d8e7;}
.c_header span.pre{left:10px;}
.c_header span.next{right:10px;}
.c_header ol{position:absolute; left:0; top:30px; overflow:hidden;}
.c_header ol li{float:left; color:#ffffff; width:40px; height:30px; line-height:30px; text-align:center;}

.c_body{overflow:hidden;}
.c_body li{width:38px; height:38px; line-height:38px; font-size:16px; text-align:center; float:left; border:1px solid #ffffff; color:#333;}
.c_body li.active{border:1px solid #dadada; background-color:#83d8e7; color:#fff;}
.c_body li.grey{color:#999;}
</style>
<script>
window.onload=function()
{
	var oCal=document.getElementById("calendar");
	var oTitle=oCal.getElementsByTagName("h1")[0];
	var oUl=oCal.getElementsByTagName("ul")[0];
	var aLi=oUl.getElementsByTagName("li");
	var oPre=oCal.getElementsByTagName("span")[0];
	var oNext=oCal.getElementsByTagName("span")[1];
	
	var oNow=new Date();
	var nowYear=oNow.getFullYear();
	var nowMonth=oNow.getMonth();
	var nowDate=oNow.getDate();
	var nowDay=oNow.getDay();
	var nowTime=oNow.getTime();
	
	var tMonth=nowMonth;					//做爲日曆裏更改的那個Month
	
	function createCalendar(tMonth)
	{
		//根據傳入的月份從新算時間
		var oDate=new Date();
		
		oDate.setMonth(tMonth);
		oDate.setDate(1);
		
		var iYear=oDate.getFullYear();
		var iMonth=oDate.getMonth();
		var iDay=oDate.getDay();
		
		oTitle.innerHTML=iYear+"年"+(iMonth+1)+"月";
		
		//初始化一下
		for(var i=0;i<aLi.length;i++)
		{
			aLi[i].innerHTML="";
			aLi[i].style.height="40px";
			aLi[i].className="";
		}

		var iSum=0;							//存本月天數
		var bLeap=false;					//是不是閏年
		
		if(iYear%4==0 && iYear%100!==0 || iYear%400==0) bLeap=true;
		
		switch(iMonth+1)
		{
			case 1:
			case 3:
			case 5:
			case 7:
			case 8:
			case 10:
			case 12:
				iSum=31;
				break;
			case 4:
			case 6:
			case 9:
			case 11:
				iSum=30;
				break;
			case 2:
				if(bLeap) iSum=29;
				else iSum=28;
				break;
		}
		
		for(var i=1;i<=iSum;i++)
		{
			aLi[iDay].innerHTML=i;
			
			iDay++;
		}
		
		for(var i=0;i<aLi.length;i++)
		{
			if(aLi[i].innerHTML==nowDate && iYear==nowYear && iMonth==nowMonth)
			{
				aLi[i].className="active";
			}
			else if((aLi[i].innerHTML<nowDate && iMonth==nowMonth && iYear==nowYear) ||
				iMonth<nowMonth && iYear==nowYear || 
				iYear<nowYear)
			{
				aLi[i].className="grey";
			}
		}
		
		//把沒字的格子摺疊起來
		for(var i=0;i<aLi.length;i++)
		{
			if(aLi[i].innerHTML=="")
			{
				aLi[i].style.height="0px";
			}
		}
	}
	
	createCalendar(tMonth);
	
	oPre.onclick=function()
	{
		createCalendar(--tMonth);
	};
	
	oNext.onclick=function()
	{
		createCalendar(++tMonth);
	};
};
</script>
</head>

<body>
	<div id="calendar">
    	<div class="c_header">
        	<h1></h1>
            <span class="pre"><</span>
        	<span class="next">></span>
            <ol>
            	<li>日</li>
            	<li>一</li>
            	<li>二</li>
            	<li>三</li>
            	<li>四</li>
            	<li>五</li>
            	<li>六</li>
            </ol>
        </div>
        <ul class="c_body">
        	<li></li><li></li><li></li><li></li><li></li><li></li><li></li>
        	<li></li><li></li><li></li><li></li><li></li><li></li><li></li>
        	<li></li><li></li><li></li><li></li><li></li><li></li><li></li>
        	<li></li><li></li><li></li><li></li><li></li><li></li><li></li>
        	<li></li><li></li><li></li><li></li><li></li><li></li><li></li>
        	<li></li><li></li><li></li><li></li><li></li><li></li><li></li>
        </ul>
    </div>
</body>
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。