自己写的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>
<title>自己写的JS日历，适合学习</title>
<script type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div id="calendar">
<p id="title_time"></p>
<table width="100%" height="90%" align="center" style="text-align:center;"><tbody>
<tr><th><span class="pre_d" title="前一月"><<</span>&nbsp;日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六&nbsp;<span class="next_d" title="后一月">>></span></th></tr>
	<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
	<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
	<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
	<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
	<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
	<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</tbody></table>
<script type="text/javascript">
jQuery(document).ready(function($){
	var myDate = new Date();
	function timer(){
		$("td").each(function(){
			$(this).html("");
		});
		var year = myDate.getFullYear();//获取完整的年份(4位,1970-????)
		var month = myDate.getMonth();//获取当前月份(0-11,0代表1月)
		var date = myDate.getDate();//获取当前日(1-31)
		var day = myDate.getDay();//获取当前星期X(0-6,0代表星期天)
		var num = day-(date%7-1);//1号星期X
		$("#title_time").html(year+"年"+(month+1)+"月");
		var i=1;
		var end;
		switch(month){
		case 0: end = 31;break;
		case 1: if((year%4==0 && year%100!=0)||(year%400==0))end = 29;else end = 28;break;
		case 2: end = 31;break;
		case 3: end = 30;break;
		case 4: end = 31;break;
		case 5: end = 30;break;
		case 6: end = 31;break;
		case 7: end = 31;break;
		case 8: end = 30;break;
		case 9: end = 31;break;
		case 10: end = 30;break;
		case 11: end = 31;break;
		}
		$("tr").eq(i).find("td").eq(num).html(i);
		var riqi = null; 
		$("td").each(function(){
			if($(this).parent().index()==1){
				if($(this).prev("td").html())
				$(this).html(++i);
				/*if(i==date)
				$(this).css("background-color","red");*/
			}
			if($(this).parent().index()>1&&i<end){
				$(this).html(++i);
			}
		});
	}
	timer();
	$(".pre_d").click(function(){
		var nian = myDate.getFullYear();
		var yue = myDate.getMonth();
		if(yue==0){
			nian--;
			yue=12;
		}
		var ri = "01";
		var str = nian+" "+yue+" "+ri;
		myDate = new Date(str);
		timer();
	});
	$(".next_d").click(function(){
		var nian = myDate.getFullYear();
		var yue = myDate.getMonth();
		yue+=2;
		if(yue==13){
			nian++;
			yue=1;
		}
		var ri = "01";
		var str = nian+" "+yue+" "+ri;
		myDate = new Date(str);
		timer();
	});
});
</script>
/div>
</body>
</html>

CSS代码

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

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

自己写的JS日历，适合学习

分类

日期时间

描述

自己写的JS日历，适合学习，基本上没有美化，点击左右两侧的月份，可切换不同月份的日历，围绕jquery来实现的日历插件，当然现在功能还是超简单的，不能说是插件，代码是非常适合学习参考的，可能有些地方还写的不好，再此与源码爱好者网...