Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >javascript menetapkan kalendar tahunan
javascript menetapkan kalendar tahunan
- 王林asal
- 2023-05-21 13:20:07558semak imbas
Dengan perkembangan teknologi Internet yang berterusan, semakin banyak laman web dan aplikasi memerlukan fungsi kalendar. Dalam pembangunan bahagian hadapan, JavaScript ialah salah satu bahasa yang paling biasa digunakan dan salah satu cara biasa untuk melaksanakan fungsi kalendar. Dalam artikel ini, saya akan menunjukkan kepada anda cara menyediakan kalendar tahunan menggunakan JavaScript.
Langkah 1: Buat rangka HTML dan gaya CSS
Kita boleh mula-mula mencipta rangka HTML dan gaya CSS yang diperlukan. Berikut ialah contoh mudah:
<!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>Langkah 2: Gunakan JavaScript untuk menjana almanak
Sekarang, kita boleh menggunakan JavaScript untuk menjana almanak. Berikut ialah contoh kod:
// 获取年份
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);
}Kod di atas akan menjana kalendar tahunan yang mengandungi 12 bulan. Dalam kod, kami menggunakan objek Tarikh dan fungsi gelung JavaScript. Objek Tarikh digunakan untuk mendapatkan maklumat tentang tarikh dan masa, dan fungsi gelung digunakan untuk menjana elemen hari minggu dan elemen tarikh.
Langkah 3: Sempurnakan gaya CSS
Sekarang kita mempunyai kod HTML dan JavaScript asas, gaya almanak mungkin tidak betul-betul memenuhi keperluan kita. Dalam langkah ini, kami akan menggunakan CSS untuk melengkapkan penggayaan. Berikut ialah kod gaya CSS yang lengkap:
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;
}
}Kod gaya di atas akan mengatasi gaya lalai dan menambah beberapa sokongan untuk kebolehsuaian responsif. Pertanyaan @media digunakan untuk menukar gaya kalendar bulanan apabila lebar skrin tertentu dicapai.
Pada ketika ini, kalendar kami sudah lengkap! Anda boleh menyalin kod di atas ke dalam fail HTML dan membukanya, dan kemudian anda boleh melihat almanak yang baru kami hasilkan.
Ringkasan
Dalam artikel ini, kami menunjukkan kepada anda cara menyediakan kalendar tahunan mudah menggunakan JavaScript. Kami menggunakan objek Tarikh, fungsi gelung dan gaya CSS Melalui kaedah ini, kami berjaya menghasilkan kalendar tahunan yang cantik dan praktikal. Saya harap contoh ini dapat memberikan sedikit inspirasi untuk kerja pembangunan bahagian hadapan anda.
Atas ialah kandungan terperinci javascript menetapkan kalendar tahunan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!