jquery制作一个简单的日历

最新推荐文章于 2024-06-22 09:50:36 发布

啊哈前端

最新推荐文章于 2024-06-22 09:50:36 发布

阅读量4.9k

点赞数 2

分类专栏： jquery 文章标签： jquery 日历

本文链接：https://blog.csdn.net/wuzhe128520/article/details/50242825

版权

jquery 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

jquery是用的是2.0版本。

1、html代码

<!DOCTYPE html>
<!--基于W3C标准 不用做任何修改-->
<html>
<!--起始标准-->
<head>
<!--设置初始化文档信息和文档管理标注-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--整个页面编码 utf-8 国际编码 通用性最强，GBK/gb2312 中文-->
<!--页面三要素-->
<title>显示详细签到详情</title>
<style>
* {
	margin: 0px;
	padding: 0px;
	font-size: 14px;
	font-family: '微软雅黑'
}

.signincalendar {
	
}

.signincalendar table {
	margin: 0 auto;
	border-radius: 0.5em;
	border: 1px solid #00D3D3;
	box-shadow: 0px 0px 7.5px 5px #00D3D3;
}

.signincalendar table tr {
	
}

.signincalendar table tr td {
	width: 50px;
	height: 34px;
	text-align: center;
	border: 1px solid black;
	border-radius: 0.5em;
	font-weight: bolder;
}

.signincalendar table tr.firsttr td, .signincalendar table tr.secondtr td
	{
	border: 0px;
}

table tr.secondtr td:nth-child(1) {
	color: #E13838;
	border-radius: 0px -1px 1px #FFFF68;	
}

table tr.secondtr td:nth-child(2) {
	color: orange;
	border-radius:0px -1px 1px #FFFF68;
}

table tr.secondtr td:nth-child(3) {
	color: #C2C200;
	border-radius:0px -1px 1px #FFFF68;
}

table tr.secondtr td:nth-child(4) {
	color: green;
	border-radius:0px -1px 1px #FFFF68;
}

table tr.secondtr td:nth-child(5) {
	color: #00D3D3;
	border-radius:0px -1px 1px #FFFF68;
}

table tr.secondtr td:nth-child(6) {
	color: blue;
	border-radius:0px -1px 1px #FFFF68;
}

table tr.secondtr td:nth-child(7) {
	color: purple;
	border-radius: 0px -1px 1px #FFFF68;
}

table tr td.cantsign {
	background: none repeat scroll 0% 0% #9B9B9B;
	color: #F2F2F2;
}

table tr.threetr td {
	background: #9AFAA0;
}
</style>


</head>

<body>
		<div data-role="content">
			<div class="signincalendar"></div>
		</div>
	<script type="text/javascript" src="jquery1.9.js"></script>
	<script type="text/javascript" src="mycanledar.js"></script>
</body>
</html>

2、以下是mycanledar.js的代码

// JavaScript Document
var nstr = new Date(); // 获取当前日期
var changedYear = nstr.getFullYear(); // 年份
var changedMonth = nstr.getMonth(); // 月份
var dnow = nstr.getDate(); // 今日日期
var n1str = new Date(changedYear, changedMonth, 1); // 当月第一天Date
var initfirstday = n1str.getDay(); // 当月第一天星期几
var daynumber = getMonthAllDay(changedMonth, changedYear);
showCanledar(changedMonth, initfirstday, dnow, daynumber);
reloadyear();
reloadmonth(1);
function reloadyear() {
	var initYearSelect = $("#currentyear option");
	initYearSelect.each(function() {

		if ($(this).val().substring(0, 4) == changedYear) {
			$(this).attr("selected", true);
		}
	});
}

function reloadmonth(isinit) {
	var initMonthSelect = $("#currentmonth option");
	initMonthSelect.each(function() {
		if (isinit == 1) {
			if ($(this).index() == changedMonth) {
				$(this).attr("selected",true);
			}
		} else {
			
			if ($(this).index() == changedMonth - 1) {
				$(this).attr("selected", true);
			}

		}

	});
}

// 是否为闰年
function is_leap(year) {
	return (year % 100 == 0 ? res = (year % 400 == 0 ? 1 : 0)
			: res = (year % 4 == 0 ? 1 : 0));
}

// 获得下拉列表的年
function getNewYear() {
	// alert("得到年");
	return $("#currentyear option:selected").text().substring(0, 4);
}
// 获得下拉列表的月
function getNewMonth() {
	// alert("得到月");
	return $("#currentmonth option:selected").text();

}
// 获取当月的天数
function getMonthAllDay(month, year) {
	var m_days = new Array(31, 28 + is_leap(year), 31, 30, 31, 30, 31, 31, 30,
			31, 30, 31);
	return m_days[month];
}

// 获得某年某月某日是星期几
function getFirstWeekDay(year, month, day) {
	var date = new Date();
	date.setFullYear(year);
	date.setMonth(month);
	date.setDate(day);
	return date.getDay();
}

// 获得表格行数
function requiredRows(allday, firstday) {
	var trstr = Math.ceil((allday + firstday) / 7);
	// alert("trstr"+trstr);
	return trstr;
}
/* 显示日历 */
function showCanledar(month, firstday, dnow, allday) {

	var rows = requiredRows(allday, firstday);
	var tb = "<table data-role='none' cellpadding='0px' cellspacing='3px' id='dates'>";
	tb += "<tr class='firsttr'><td colspan='7'  align='center'>";
	tb += "<select data-role='none' id='currentyear'><option>2015</option><option>2016</option><option>2017</option><option>2018</option><option>2019</option><option>2020</option></select>";
	tb += "<select  data-role='none' id='currentmonth'><option>01</option><option>02</option><option>03</option><option>04</option><option>05</option><option>06</option><option>07</option><option>08</option><option>09</option><option>10</option><option>11</option><option>12</option></select>";
	tb += "</td></tr>";
	tb += "<tr class='secondtr'>";
	tb += "<td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td>";
	tb += "</tr>";
	for (var i = 0; i < rows; i++) {
		tb += "<tr>";
		for (var k = 0; k < 7; k++) { // 表格每行的单元格
			var idx = i * 7 + k; // 单元格自然序列号
			var date_str = idx - firstday + 1; // 计算日期
			(date_str <= 0 || date_str > allday) ?  tb+="<td style='background:#DBDBDB'> </td>"
					: 	tb += "<td>" +date_str + "</td>"; // 过滤无效日期（小于等于零的、大于月总天数的）
			// 打印日期：今天底色为红
			// 查询月签到情况
		

		}
		tb += "</tr>";
		// 表格的行结束
	}
	tb += "</table>"; // 表格结束
	$(".signincalendar").html(tb);

}

/** 改变年后触发事件,jquery1.9版本废除了live()方法，使用on代替* */
var reg = new RegExp("^[0-9]*$");
$(function() {
	$(document).on('change', '#currentyear',function() {
		changedYear = getNewYear();		
		changedMonth = getNewMonth();
		commChanged();
		reloadyear();
		reloadmonth(0);
	});

	$(document).on('change','#currentmonth', function() {
		changedMonth = getNewMonth();
		commChanged();
		reloadyear();
		reloadmonth(0);
	});

});

function commChanged() {
	var firstweekday = getFirstWeekDay(changedYear, parseInt(changedMonth) - 1,
			1);
	// alert("firstweekday="+firstweekday);

	var allday = getMonthAllDay(parseInt(changedMonth) - 1, changedYear);
	// alert("allday="+allday);
	showCanledar(changedMonth, firstweekday, 9, allday);
}