JavaScriptで年間カレンダーを作る方法-フロントエンドQ&A-php.cn

JavaScriptで年間カレンダーを作る方法

WBOY

リリース： 2023-05-12 14:44:08

オリジナル

1450 人が閲覧しました

JavaScript は、さまざまなアプリケーションや Web サイトの作成に使用できる非常に人気のあるプログラミング言語です。最も便利なアプリケーションの 1 つは、年間カレンダーの作成です。通年カレンダーは、1 年を通してすべての日付を表示できるカレンダーツールで、便利な時間管理および記録ツールとして非常に適しており、将来のスケジュールをより適切に計画および整理するのにも役立ちます。

この記事では、JavaScript で年間カレンダーを作成する方法を紹介します。これにより、JavaScript プログラミングスキルを学び、実践できるようになります。

ステップ 1: HTML スケルトン

通年カレンダーを作成するには、まず HTML ページにカレンダー全体を配置するコンテナを作成する必要があります。以下は HTML スケルトンです:

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

ログイン後にコピー

このスケルトンでは、カレンダーを保持するために使用される「calendar」という DIV 要素を作成しました。

ステップ 2: 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 ピクセルの灰色の実線に設定します。また、タイトル、ヘッダー、表のデータセルの色とフォントサイズも設定します。

ステップ 3: 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 を使用してスタイルを変更できるように、現在の日付のクラス名も追加しました。最後に、各月の最初の列にヘッダーを追加して、現在の月を表示します。

ステップ 4: テスト

次に、ブラウザでコードをテストしてみましょう。ブラウザを開いて、アドレスバーに HTML ファイルの URL を入力すると、当月から来年までのすべての月が記載された見栄えの良い通年カレンダーが表示されるはずです。

結論

この記事では、JavaScript を使用して年間カレンダーを動的に作成する方法を説明します。これを実現するために、DOM 操作、Date オブジェクト、CSS を使用します。このプロジェクトを学習して実践すると、JavaScript プログラミングスキルが向上し、便利な時間管理ツールが得られます。

以上がJavaScriptで年間カレンダーを作る方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。