Home > Article > Web Front-end > javascript set annual calendar
javascript set annual calendar
- 王林Original
- 2023-05-21 13:20:07536browse
With the continuous development of Internet technology, more and more websites and applications require calendar functions. In front-end development, JavaScript is one of the most commonly used languages and one of the common ways to implement calendar functions. In this article, I'll show you how to set up an annual calendar using JavaScript.
Step 1: Create HTML skeleton and CSS styles
We can first create an HTML skeleton and necessary CSS styles. The following is a simple example:
<!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>Step 2: Use JavaScript to generate the annual calendar
Now, we can use JavaScript to generate the annual calendar. The following is a code example:
// 获取年份
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);
}The above code will generate an annual calendar containing 12 months. In the code, we use Date objects and JavaScript loop functions. The Date object is used to obtain information about date and time, and the loop function is used to generate weekday elements and date elements.
Step 3: Improve the CSS style
Now that we have the basic HTML and JavaScript code, the style of the almanac may not exactly meet our needs. In this step, we will use CSS to complete the styling. The following is the complete CSS style code:
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;
}
}The above style code will override the default style and add some support for responsive adaptability. @media query is used to change the style of the monthly calendar when a specific screen width is reached.
At this point, our calendar is complete! You can copy the above code into an HTML file and open it, and then you can see the almanac we just generated.
Summary
In this article, we showed you how to set up a simple annual calendar using JavaScript. We used Date objects, loop functions and CSS styles. Through these methods, we successfully generated a beautiful and practical annual calendar. I hope this example can provide some inspiration for your front-end development work.
The above is the detailed content of javascript set annual calendar. For more information, please follow other related articles on the PHP Chinese website!