HTML+jquery 相同日期排列年曆計算
最近公司發送了2025年行事曆，無聊的我突然想起來，之前廠商送的好多萬用手冊都沒有用，不知道那一年的日期排列和明年相同，於是就有了以下的畫面：
程式碼如下：
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>年曆顯示</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.calendar {
border: 1px solid #ccc;
margin: 20px;
display: inline-block;
padding: 10px;
width: 200px;
}
</style>
</head>
<body>
<h1>年曆顯示</h1>
<input type="number" id="yearInput" placeholder="請輸入年份" />
<button id="generateBtn">生成年曆</button>
<div id="output"></div>
<script>
// 當按鈕被點擊時的事件處理
$('#generateBtn').on('click', function () {
// 獲取用戶輸入的年份
var inputYear = parseInt($('#yearInput').val());
if (!inputYear || inputYear <= 0) {
alert('請輸入有效的年份');
return;
}
// 計算往後和往前的年份
var years = getMatchingYears(inputYear);
// 清空輸出區域
$('#output').empty();
// 顯示三年的年曆
years.forEach(function (year) {
$('#output').append('<div class="calendar">' + generateCalendar(year) + '</div>');
});
});
// 函數：計算與輸入年份相同排列的往後和往前年份
function getMatchingYears(year) {
var forwardYear, backwardYear;
// 從輸入年開始，每年檢查是否與輸入年份相同
for (var i = 1; i <= 28; i++) { // 28年內會有循環
if (isSameCalendar(year, year + i)) {
forwardYear = year + i; // 找到往後的年份
break;
}
}
for (var j = 1; j <= 28; j++) { // 28年內會有循環
if (isSameCalendar(year, year - j)) {
backwardYear = year - j; // 找到往前的年份
break;
}
}
return [backwardYear, year, forwardYear];
}
// 函數：判斷兩個年份的日曆是否相同
function isSameCalendar(year1, year2) {
// 計算每年的開始星期和是否為閏年
return (new Date(year1, 0, 1).getDay() === new Date(year2, 0, 1).getDay()) &&
(isLeapYear(year1) === isLeapYear(year2));
}
// 函數：檢查是否為閏年
function isLeapYear(year) {
return (year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0);
}
// 生成每年的年曆
function generateCalendar(year) {
var months = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
var calendarHtml = `<h2>${year}年年曆</h2>`;
for (var month = 0; month < 12; month++) {
calendarHtml += `<h3>${months[month]}</h3><table border="1"><tr>`;
// 顯示星期
['日', '一', '二', '三', '四', '五', '六'].forEach(function(day) {
calendarHtml += `<th>${day}</th>`;
});
calendarHtml += `</tr><tr>`;
// 計算該月的第一天是星期幾
var firstDay = new Date(year, month, 1).getDay();
// 獲取該月的天數
var daysInMonth = new Date(year, month + 1, 0).getDate();
// 填充空白
for (var i = 0; i < firstDay; i++) {
calendarHtml += `<td></td>`;
}
// 顯示每一天
for (var day = 1; day <= daysInMonth; day++) {
calendarHtml += `<td>${day}</td>`;
if ((day + firstDay) % 7 === 0) {
calendarHtml += `</tr><tr>`;
}
}
calendarHtml += `</tr></table>`;
}
return calendarHtml;
}
</script>
</body>
</html>
所以明年，2025年可以拿2014年的年曆出來用。。。但誰會留那麼久
而且今年又有協力廠商送明年的萬用手冊來了~~~~
分享至
成為作者繼續創作的動力吧！
© 2024 vocus All rights reserved.