js制作工作日管理日历
时间: 2023-08-10 20:04:07 浏览: 52
可以使用JavaScript来制作一个工作日管理日历。以下是一个简单的实现示例:
HTML代码:
```html
<div id="calendar"></div>
```
JavaScript代码:
```javascript
// 获取当前月份和年份
var currentDate = new Date();
var currentMonth = currentDate.getMonth();
var currentYear = currentDate.getFullYear();
// 获取本月的工作日天数
function getWorkingDaysInMonth(month, year) {
var daysInMonth = new Date(year, month + 1, 0).getDate();
var workingDays = 0;
for (var i = 1; i <= daysInMonth; i++) {
var date = new Date(year, month, i);
if (date.getDay() !== 0 && date.getDay() !== 6) {
workingDays++;
}
}
return workingDays;
}
// 生成工作日管理日历
function generateCalendar(month, year) {
var calendar = document.getElementById("calendar");
calendar.innerHTML = "";
// 创建标题行
var titleRow = document.createElement("div");
titleRow.classList.add("title-row");
var titleText = document.createTextNode(month + " " + year);
titleRow.appendChild(titleText);
calendar.appendChild(titleRow);
// 创建星期几行
var daysRow = document.createElement("div");
daysRow.classList.add("days-row");
var daysOfWeek = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
for (var i = 0; i < daysOfWeek.length; i++) {
var dayCell = document.createElement("div");
dayCell.classList.add("day-cell");
var dayText = document.createTextNode(daysOfWeek[i]);
dayCell.appendChild(dayText);
daysRow.appendChild(dayCell);
}
calendar.appendChild(daysRow);
// 创建日期行
var datesRow = document.createElement("div");
datesRow.classList.add("dates-row");
var daysInMonth = new Date(year, month + 1, 0).getDate();
var firstDayOfMonth = new Date(year, month, 1).getDay();
var dateCount = 1;
for (var i = 0; i < 42; i++) {
var dateCell = document.createElement("div");
dateCell.classList.add("date-cell");
if (i < firstDayOfMonth || dateCount > daysInMonth) {
var dateText = document.createTextNode("");
dateCell.appendChild(dateText);
} else {
var dateText = document.createTextNode(dateCount);
dateCell.appendChild(dateText);
dateCell.classList.add("working-day");
dateCount++;
}
datesRow.appendChild(dateCell);
}
calendar.appendChild(datesRow);
// 设置非工作日样式
var nonWorkingDays = document.querySelectorAll(".days-row .day-cell:nth-child(1), .days-row .day-cell:nth-child(7), .dates-row .date-cell:not(.working-day)");
for (var i = 0; i < nonWorkingDays.length; i++) {
nonWorkingDays[i].classList.add("non-working-day");
}
}
// 初始化日历
generateCalendar(currentMonth, currentYear);
```
CSS代码:
```css
#calendar {
display: flex;
flex-direction: column;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
}
.title-row {
font-size: 24px;
font-weight: bold;
text-align: center;
margin-bottom: 10px;
}
.days-row {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: 10px;
}
.day-cell {
flex-basis: calc(100% / 7);
text-align: center;
}
.dates-row {
display: flex;
flex-wrap: wrap;
}
.date-cell {
flex-basis: calc(100% / 7);
text-align: center;
padding: 5px;
}
.working-day {
background-color: #fff;
}
.non-working-day {
background-color: #eee;
}
```
这段代码将生成一个包含当前月份工作日的日历。你可以根据需要进行修改以满足特定的要求。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)