JavaScript如何製作全年日曆-前端問答-PHP中文網

JavaScript如何製作全年日曆

WBOY

發布： 2023-05-12 14:44:08

原創

1435 人瀏覽過

JavaScript是一種非常流行的程式語言，它可以用來製作各種各樣的應用程式和網站，其中一個很有用的應用程式就是製作全年日曆。全年日曆是一種能夠顯示一整年所有日期的日曆工具，非常適合作為便捷的時間管理和記錄工具，也可以幫助人們更好地規劃和安排未來的日程。

在這篇文章中，我們將介紹如何在JavaScript中製作一個全年日曆，讓你學習並實踐JavaScript程式設計技能。

第一步：HTML骨架

要製作一個全年行事曆，首先需要在HTML頁面中建立一個容器來放置整個行事曆。下面是我們的HTML骨架：

<!DOCTYPE html>
<html>
<head>
    <title>全年日历</title>
</head>
<body>
    <div class="calendar"></div>
</body>
</html>

登入後複製

在這個骨架中，我們建立了一個名為「calendar」的DIV元素，它將用來容納我們的日曆。

第二步：CSS樣式

為了讓我們的行事曆看起來美觀且易於閱讀，我們需要加入CSS樣式。下面是我們的CSS程式碼：

.calendar {
    width: 800px;
    height: 600px;
    margin: 0 auto;
    border: 1px solid #ccc;
}
.calendar h1 {
    text-align: center;
}
.calendar table {
    width: 100%;
    height: 100%;
    border-collapse: collapse;
    border: 1px solid #ccc;
}
.calendar table th {
    background-color: #f2f2f2;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    border: 1px solid #ccc;
}
.calendar table td {
    text-align: center;
    font-size: 16px;
    border: 1px solid #ccc;
}
.calendar table td.today {
    background-color: #f2f2f2;
}

登入後複製

在上面的程式碼中，我們為容器設定了一些基本樣式，並將表格單元格的邊框設定為1像素灰色實線。我們也為標題、表頭和表格資料儲存格設定了一些顏色和字體大小。

第三個步驟：JavaScript程式碼

現在，我們將使用JavaScript來動態產生我們的全年日曆。我們將使用Date物件來取得和計算日期，並使用DOM操作來建立和更新我們的HTML元素。以下是完整的JavaScript程式碼：

const calendar = document.querySelector('.calendar');
const months = [
    "一月", "二月", "三月",
    "四月", "五月", "六月",
    "七月", "八月", "九月",
    "十月", "十一月", "十二月"
];

// 获取当前日期
const today = new Date();
const currentMonth = today.getMonth();
const currentYear = today.getFullYear();

// 创建并更新标题
const title = document.createElement('h1');
title.textContent = `${currentYear}年`;
calendar.appendChild(title);

// 创建表格
const table = document.createElement('table');
calendar.appendChild(table);

// 创建表头
const thead = document.createElement('thead');
table.appendChild(thead);

const weekdayNames = ["日", "一", "二", "三", "四", "五", "六"];
const tr = document.createElement('tr');
weekdayNames.forEach(day => {
    const th = document.createElement('th');
    th.textContent = day;
    tr.appendChild(th);
});
thead.appendChild(tr);

// 创建并更新表格数据
const tbody = document.createElement('tbody');
table.appendChild(tbody);

// 计算日期并创建表格
for (let month = 0; month < 12; month++) {
    const tr = document.createElement('tr');
    tbody.appendChild(tr);

    for (let weekday = 0; weekday < 7; weekday++) {
        const td = document.createElement('td');
        tr.appendChild(td);

        // 计算日期
        const date = new Date(currentYear, month, 1 + weekday - new Date(currentYear, month, 1).getDay());

        // 添加日期
        if (date.getMonth() === month) {
            td.textContent = date.getDate();
        }

        // 添加类名
        if (today.toDateString() === date.toDateString()) {
            td.classList.add('today');
        }

        // 添加月份标题
        if (weekday === 0) {
            const th = document.createElement('th');
            th.setAttribute('colspan', 7);
            th.textContent = months[month];
            tbody.appendChild(th);
        }
    }
}

登入後複製

在上面的程式碼中，我們首先取得了目前日期並儲存了目前的月份和年份。然後，我們使用DOM操作建立了一個標題、一個表格和一個表頭。接下來，我們使用一個巢狀迴圈來計算和建立每個月的表格。我們首先在表格中建立行，然後在每個行中建立儲存格。我們使用Date物件來計算每個儲存格中的日期，並將其新增至儲存格。我們還為當前日期添加了一個類別名，以便我們可以使用CSS更改其樣式。最後，我們在每個月的第一列新增一個標題，以顯示目前月份。

第四步：測試

讓我們現在在瀏覽器中測試我們的程式碼。打開您的瀏覽器並在網址列中輸入HTML檔案的URL，您應該會看到一個漂亮的全年日曆，包含從當前月份到下一年的所有月份。

結論

本文展示如何使用JavaScript動態建立全年日曆。我們使用了DOM操作、Date物件和CSS來實現。學習和實踐這個專案可以幫助您提高JavaScript程式設計技能，並為您提供一個方便的時間管理工具。

以上是JavaScript如何製作全年日曆的詳細內容。更多資訊請關注PHP中文網其他相關文章！