您的位置：首页 > 其它

一个简单的小日历

2013-06-21 00:24 162 查看 
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航