兴奋中^,自己写的JS小日历代码

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!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">&lt;</span>
        	<span class="next">&gt;</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>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

兴奋中^,自己写的JS小日历代码

分类

日期时间

描述

水平有限，希望高手勿笑！这个小日历完全是用Js写成的，没有使用jquery插件，暂时没有加入年份选择功能，虽然不是完美的，但至少可以用了，放在博客里还是不错的，高手们可拿去改进了，分享给喜欢JS的朋友们。