ホームページ > 記事 > ウェブフロントエンド > JavaScriptセットの年間カレンダー
JavaScriptセットの年間カレンダー
- 王林オリジナル
- 2023-05-21 13:20:07493ブラウズ
インターネット技術の継続的な発展に伴い、カレンダー機能を必要とする Web サイトやアプリケーションがますます増えています。フロントエンド開発において、JavaScript は最も一般的に使用される言語の 1 つであり、カレンダー機能を実装する一般的な方法の 1 つです。この記事では、JavaScript を使用して年間カレンダーを設定する方法を説明します。
ステップ 1: HTML スケルトンと CSS スタイルを作成する
まず、HTML スケルトンと必要な CSS スタイルを作成します。以下は簡単な例です:
<!DOCTYPE html>
<html>
<head>
<title>年历设置</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.calendar {
display: flex;
flex-wrap: wrap;
padding: 20px;
}
.month {
flex-basis: calc(100% / 4 - 20px);
margin-right: 20px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 5px #ccc;
}
.month-header {
background-color: #007bff;
color: #fff;
padding: 10px;
font-weight: bold;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.weekdays {
display: flex;
background-color: #efefef;
padding: 5px;
border-bottom: 1px solid #ccc;
}
.day {
flex-basis: calc(100% / 7);
padding: 5px;
text-align: center;
border: 1px solid #ccc;
}
.today {
background-color: #007bff;
color: #fff;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="calendar">
<!-- 生成的年历内容将在此处添加 -->
</div>
</body>
</html>ステップ 2: JavaScript を使用して年間カレンダーを生成します
ここで、JavaScript を使用して年間カレンダーを生成できます。コード例を次に示します。
// 获取年份
const year = new Date().getFullYear();
// 获取月份名称
const months = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
];
// 生成月历函数
function generateMonth(monthIndex) {
// 创建月历元素
const monthElement = document.createElement("div");
monthElement.classList.add("month");
// 创建月份名称元素
const headerElement = document.createElement("div");
headerElement.classList.add("month-header");
headerElement.textContent = months[monthIndex];
monthElement.appendChild(headerElement);
// 创建星期名称元素
const weekdaysElement = document.createElement("div");
weekdaysElement.classList.add("weekdays");
const weekdays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
weekdays.forEach(function(weekday) {
const weekdayElement = document.createElement("div");
weekdayElement.classList.add("day");
weekdayElement.textContent = weekday;
weekdaysElement.appendChild(weekdayElement);
});
monthElement.appendChild(weekdaysElement);
// 获取当前月份的天数
const daysInMonth = new Date(year, monthIndex + 1, 0).getDate();
// 获取当前月份的第一天是星期几
const firstDayOfWeek = new Date(year, monthIndex, 1).getDay();
// 生成日期元素
for (let day = 1; day <= daysInMonth; day++) {
const dayElement = document.createElement("div");
dayElement.classList.add("day");
dayElement.textContent = day;
// 如果是今天，将其设置为特殊样式
if (
year === new Date().getFullYear() &&
monthIndex === new Date().getMonth() &&
day === new Date().getDate()
) {
dayElement.classList.add("today");
}
monthElement.appendChild(dayElement);
}
return monthElement;
}
// 生成12个月的月历
for (let i = 0; i < 12; i++) {
const monthElement = generateMonth(i);
document.querySelector(".calendar").appendChild(monthElement);
}上記のコードは、12 か月を含む年間カレンダーを生成します。コードでは、Date オブジェクトと JavaScript ループ関数を使用します。 Date オブジェクトは日付と時刻に関する情報を取得するために使用され、loop 関数は曜日要素と日付要素を生成するために使用されます。
ステップ 3: CSS スタイルを改善する
基本的な HTML と JavaScript コードが完成しましたが、暦のスタイルはニーズを正確に満たしていない可能性があります。このステップでは、CSS を使用してスタイルを完成させます。以下は完全な CSS スタイル コードです:
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.calendar {
display: flex;
flex-wrap: wrap;
padding: 20px;
}
.month {
flex-basis: calc(100% / 4 - 20px);
margin-right: 20px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 5px #ccc;
}
.month-header {
background-color: #007bff;
color: #fff;
padding: 10px;
font-weight: bold;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.weekdays {
display: flex;
background-color: #efefef;
padding: 5px;
border-bottom: 1px solid #ccc;
}
.day {
flex-basis: calc(100% / 7);
padding: 5px;
text-align: center;
border: 1px solid #ccc;
}
.today {
background-color: #007bff;
color: #fff;
border-radius: 50%;
}
@media only screen and (max-width: 768px) {
.month {
flex-basis: calc(100% / 2 - 10px);
margin-right: 10px;
}
}上記のスタイル コードはデフォルトのスタイルをオーバーライドし、応答性の高い適応性のサポートを追加します。 @media クエリは、特定の画面幅に達したときに月間カレンダーのスタイルを変更するために使用されます。
この時点で、カレンダーが完成しました。上記のコードを HTML ファイルにコピーして開くと、生成したアルマナックが表示されます。
概要
この記事では、JavaScript を使用して簡単な年間カレンダーを設定する方法を説明しました。 Date オブジェクト、ループ関数、CSS スタイルを使用して、美しく実用的な年間カレンダーを生成することに成功しました。この例がフロントエンド開発作業にインスピレーションを与えることを願っています。
以上がJavaScriptセットの年間カレンダーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。