JQ万年历

最新推荐文章于 2023-01-22 10:49:52 发布

Galen.Zhang

最新推荐文章于 2023-01-22 10:49:52 发布

阅读量448

点赞数

本文链接：https://blog.csdn.net/fffssso/article/details/80864634

版权

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/第二题.css" />
<script type="text/javascript" src="js/jquery-1.8.1.min.js"></script>
<script type="text/javascript">
$(function() {
var year = new Date().getFullYear();
var month = new Date().getMonth() + 1;
show();
$("#upMonth").click(function() {
month--;
if(month == 0) {
month = 12;
year--;
}
show();
});
$("#nextMonth").click(function() {
month++;
if(month == 13) {
month = 1;
year++;
}
show();
});

function show() {
$("tr").remove();
$("#txtTime").text(year + "年" + month + "月");
var cMonthDay = new Date(year, month, 0).getDate();
var upMonthDay = new Date(year, month - 1, 0).getDate();
var firstDay = new Date(year, month - 1, 1).getDay();
var lastDay = new Date(year, month, 0).getDay();
$("table").append("<tr><th>周日</th><th>周一</th><th>周二</th><th>周三</th><th>周四</th><th>周五</th><th>周六</th></tr>");
if(firstDay == 0) {
$("table").append("<tr><td>" + (upMonthDay - 6) + "</td><td>" + (upMonthDay - 5) + "</td><td>" + (upMonthDay - 4) + "</td><td>" + (upMonthDay - 3) + "</td><td>" + (upMonthDay - 2) + "</td><td>" + (upMonthDay - 1) + "</td><td>" + upMonthDay + "</td></tr>");
$("tr:nth-child(2)").css("color", "#BABABA");
}
var txtHTML = "<tr>";
for(var i = 0; i < firstDay; i++) {
txtHTML += "<td style='color:#BABABA;'>" + (upMonthDay - firstDay + 1 + i) + "</td>";
}
for(var i = 0; i < cMonthDay; i++) {
if((firstDay + i) % 7 == 0 && i != 0) {
txtHTML += "</tr>";
$("table").append(txtHTML);
txtHTML = "<tr><td>" + (i + 1) + "</td>";
} else
txtHTML += "<td>" + (i + 1) + "</td>";
}
var j = 0;
for(var i = 0; i < 6 - lastDay; i++) {
j = i + 1;
txtHTML += "<td style='color:#BABABA;'>" + j + "</td>";
}
txtHTML += "</tr>";
$("table").append(txtHTML);
if($("tr").length < 7) {
$("table").append("<tr><td>" + (j + 1) + "</td><td>" + (j + 2) + "</td><td>" + (j + 3) + "</td><td>" + (j + 4) + "</td><td>" + (j + 5) + "</td><td>" + (j + 6) + "</td><td>" + (j + 7) + "</td></tr>");
$("tr:last-child").css("color", "#BABABA");
}
}
});
</script>
</head>

<body>
<div id="content">
<div id="top" class="clearfix">
<button id="upMonth">上 一 月</button>
<span id="txtTime"></span>
<button id="nextMonth">下 一 月</button>
</div>
<table border="1px" cellpadding="0" cellspacing="0" bordercolor="#DADADA"></table>
</div>
</body>

</html>

Galen.Zhang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQ万年历

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;title&gt;&lt;/title&gt;&lt;link rel="stylesheet" href="css/第二题.css" /&gt;&lt;script
复制链接

扫一扫

JQ万年历

“相关推荐”对你有帮助么？