给我用JavaScript写一个万年历
时间: 2023-08-31 08:35:30 浏览: 100
JavaScript编写的万年历
### 回答1:
好的,以下是一个使用JavaScript编写的简单万年历:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>万年历</title>
</head>
<body>
<h1>万年历</h1>
<div id="calendar"></div>
<script>
// 获取当前日期
var now = new Date();
// 定义月份和星期的名称
var months = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"];
var weekdays = ["日", "一", "二", "三", "四", "五", "六"];
// 创建日历
var calendar = document.getElementById("calendar");
// 添加年份和月份
var yearMonth = document.createElement("h2");
yearMonth.innerHTML = now.getFullYear() + "年" + months[now.getMonth()];
calendar.appendChild(yearMonth);
// 添加星期标题
var weekDaysRow = document.createElement("div");
for (var i = 0; i < weekdays.length; i++) {
var weekday = document.createElement("div");
weekday.innerHTML = weekdays[i];
weekDaysRow.appendChild(weekday);
}
weekDaysRow.classList.add("weekdays");
calendar.appendChild(weekDaysRow);
// 获取当前月份的第一天
var firstDay = new Date(now.getFullYear(), now.getMonth(), 1);
// 获取当前月份的最后一天
var lastDay = new Date(now.getFullYear(), now.getMonth() + 1, 0);
// 添加日期
var currentDate = firstDay;
var currentRow = document.createElement("div");
currentRow.classList.add("dates");
for (var i = 0; i < firstDay.getDay(); i++) {
var emptyCell = document.createElement("div");
currentRow.appendChild(emptyCell);
}
while (currentDate <= lastDay) {
var dateCell = document.createElement("div");
dateCell.innerHTML = currentDate.getDate();
if (currentDate.getMonth() !== now.getMonth()) {
dateCell.classList.add("other-month");
}
if (currentDate.toDateString() === now.toDateString()) {
dateCell.classList.add("today");
}
currentRow.appendChild(dateCell);
if (currentDate.getDay() === 6) {
calendar.appendChild(currentRow);
currentRow = document.createElement("div");
currentRow.classList.add("dates");
}
currentDate.setDate(currentDate.getDate() + 1);
}
for (var i = lastDay.getDay(); i < 6; i++) {
var emptyCell = document.createElement("div");
currentRow.appendChild(emptyCell);
}
calendar.appendChild(currentRow);
// 添加样式
var style = document.createElement("style");
style.innerHTML = `
h2 {
margin-top: 0;
}
.weekdays {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.dates {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.dates > div {
width: 30px;
height: 30px;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
}
.other-month {
color
### 回答2:
待办困扰了我很久,想用JavaScript编写一个万年历,以帮助自己和他人更方便地查看日期。
首先,我会使用HTML创建一个基本的网页结构,包括一个包含日历的DIV容器。然后,我会使用CSS样式化日历,使其具有良好的可读性和交互性。
接下来,我会在JavaScript中创建一个函数,用于生成日历。在这个函数中,我会使用Date对象来获取今天的日期,并根据当前的年份和月份计算出月份的天数。然后,我会循环生成一个表格,显示每一天的日期。
为了使得日历具备导航功能,我会在网页上添加上一页和下一页的按钮,并添加相应的事件监听器。当用户点击这些按钮时,JavaScript代码会更新当前的年份和月份,并重新生成日历表格。
另外,我会为日历中的每一天添加事件监听器,以实现用户点击日期时的交互效果。当用户点击某一天时,JavaScript代码会弹出一个提示框,显示该日期的详细信息。
最后,我会添加一些附加功能,如显示当前日期、切换到当前月份等。这些功能可以通过JavaScript的内置函数和方法来实现。
总结来说,通过HTML、CSS和JavaScript的结合使用,我可以编写一个简单而实用的万年历,为用户提供方便的日期查询和交互功能。这个万年历不仅可以帮助我管理时间,还可以与其他人分享,让大家共同受益。
### 回答3:
万年历是一个涉及年份和月份的复杂日历,该日历可以显示指定年份和月份中的日期和星期几。
下面是一个用JavaScript写的简化版万年历的例子:
```javascript
// 获取指定年份和月份的日历
function getCalendar(year, month) {
// 创建存储日期的数组
let calendar = [];
// 获取该月的第一天
let firstDay = new Date(year, month - 1, 1);
// 获取该月的最后一天
let lastDay = new Date(year, month, 0).getDate();
// 获取该月的第一天是星期几
let firstDayOfWeek = firstDay.getDay();
// 用空集填充该月第一天之前的日期
for (let i = 0; i < firstDayOfWeek; i++) {
calendar.push('');
}
// 填充该月的日期
for (let i = 1; i <= lastDay; i++) {
calendar.push(i);
}
return calendar;
}
// 打印日历
function printCalendar(year, month) {
let calendar = getCalendar(year, month);
let weekdays = ['日', '一', '二', '三', '四', '五', '六'];
console.log(year + '年' + month + '月');
console.log('日 一 二 三 四 五 六');
for (let i = 0; i < calendar.length; i++) {
// 每行显示七个日期并换行
if (i % 7 == 0) {
console.log('');
}
// 打印日期和星期几
if (calendar[i]) {
console.log(calendar[i] + ' ' + weekdays[(i % 7)]);
} else {
console.log(' ');
}
}
}
// 示例用法
printCalendar(2022, 5);
```
这个简化版的万年历可以根据给定的年份和月份显示该月的日期和星期几。输出的格式为:
```
年份 月份
日 一 二 三 四 五 六
日期 星期几
```
你可以根据需要修改和优化这个代码,以满足特定的要求。
阅读全文