ホームページ >ウェブフロントエンド >フロントエンドQ&A >JavaScriptで月間カレンダーを作る方法
JavaScriptで月間カレンダーを作る方法
- 王林オリジナル
- 2023-05-16 12:45:08751ブラウズ
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 サイトの他の関連記事を参照してください。