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

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

王林

リリース： 2023-05-16 12:45:08

オリジナル

759 人が閲覧しました

JavaScript を使用した月間カレンダーの作成方法のご紹介

JavaScript は Web 開発に使用されるプログラミング言語で、通常はクライアント側の Web 開発に使用される動的スクリプト言語です。この記事では、JavaScriptを使用してWebページ上にシンプルな月間カレンダーを作成する方法を紹介します。

要件:

月間カレンダーを作成する前に、次のファイルが必要です:

1. Web インターフェイスを構築するための HTML ファイル

2. HTML ファイルにスタイルを適用するために使用される CSS ファイル

3. 月間カレンダーの機能を追加するために使用される JavaScript ファイル

次に、月間カレンダーを最初から作成してみましょう。

HTML ファイルの作成

最初に HTML ファイルを作成します。最初から作成することも、テンプレートを使用して .html ファイルとして保存することもできます。次のコードをファイルに追加します:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>月历</title>
</head>
<body>
    <h1 id="currentMonth">月历</h1>
    <table>
        <thead>
            <tr>
                <th>星期日</th>
                <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
                <th>星期四</th>
                <th>星期五</th>
                <th>星期六</th>
            </tr>
        </thead>
        <tbody id="calendarBody">
        </tbody>
    </table>

    <script type="text/javascript" src="calendar.js"></script>
</body>
</html>

ログイン後にコピー

この HTML ファイルでは、「Month Calendar」というタイトルの h1 タグを定義し、タグ内に ID「currentMonth」を持つ属性を追加します。この属性は次の目的で使用されます。 JavaScript コードで現在の月を表示します。また、カレンダーを表示するために table タグを使用します。このテーブルには、週 7 日間に対応する 7 つの列があります。 tbody タグは、JavaScript コードで月間カレンダーテーブルを生成するために使用されます。また、ページの月間カレンダーを生成するために使用される JavaScript ファイルを含むスクリプトタグも追加しました。

この HTML ファイルにいくつかの CSS スタイルを追加して、ページを美しくすることもできます:

table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    border: 1px solid black;
    text-align: center;
}

th {
    height: 25px;
    background-color: #cccccc;
}

td {
    height: 50px;
}

ログイン後にコピー

これらのスタイルは、ページの table、th、および td 要素にいくつかの基本スタイルを追加します。

JavaScript ファイルの作成

次に、月間カレンダー機能をページに追加するための JavaScript ファイルを作成する必要があります。このファイルを「calendar.js」という名前で保存します。

このファイルでは、月間カレンダーテーブルを作成する関数を定義します。

function createCalendar(month, year) {
    var weekdays = ["日","一","二","三","四","五","六"];
    var calendarBody = document.getElementById("calendarBody");
    var daysInMonth = new Date(year, month+1, 0).getDate();
    var date = new Date(year, month, 1);
    var row = document.createElement("tr");

    for (var i = 0; i < weekdays.length; i++) {
        var cell = document.createElement("th");
        cell.innerText = weekdays[i];
        row.appendChild(cell);
    }

    calendarBody.appendChild(row);

    for (var i = 1; i <= daysInMonth; i++) {
        var newDate = new Date(year, month, i);
        var dayOfWeek = newDate.getDay();
        if (dayOfWeek === 0) {
            row = document.createElement("tr");
            calendarBody.appendChild(row);
        }
        var cell = document.createElement("td");
        cell.innerText = i;
        row.appendChild(cell);
    }
}

ログイン後にコピー

この関数では、まず日曜日から土曜日までの名前を格納する配列を定義します。また、document.getElementById メソッドを通じて tbody 要素を取得し、今月の日数と最初の日の日付を取得しました。次に、テーブルのヘッダー行を作成し、この行に曜日の名前を含むヘッダーセルを追加しました。次に、日付セルを行ごとに追加し、日付セルが日曜日に遭遇した場合は、新しい行を作成します。

次に、月間カレンダーの現在の月を更新する関数を追加する必要があります。

function updateCalendar() {
    var currentMonth = document.getElementById("currentMonth");
    var currentDate = new Date();
    var month = currentDate.getMonth();
    var year = currentDate.getFullYear();
    currentMonth.innerText = year + "年" + (month+1) + "月";
    createCalendar(month, year);
}

ログイン後にコピー

この関数では、最初に document.getElementById メソッドを使用して、ドキュメントの h1 要素を取得します。現在の月を取得し、Date オブジェクトを作成して現在の日付、月、年を取得し、h1 要素の innerText 属性を設定します。

最後に、updateCalendar 関数を呼び出して月間カレンダーを生成する必要があります。

window.onload = function() {
    updateCalendar();
}

ログイン後にコピー

このコードは、ページが完全に読み込まれた後に updateCalendar 関数を呼び出します。

これで月間カレンダーの制作が完了しました。これで、この HTML ファイルをブラウザで開いて、生成された月次カレンダーを確認できるようになります。

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