js手写日历插件

这个示例展示了如何使用JavaScript从头开始创建一个日历插件。代码中定义了一个`loadcalendar`函数来生成日历,根据当前日期计算月份天数,并在HTML表格中显示。还包含了增加和减少月份的功能,以及高亮显示当前日期。
摘要由CSDN通过智能技术生成
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
table{text-align: center;border-collapse:collapse;}
.active{color:deeppink;}
</style>
</head>
<body>

</body>
<script type="text/javascript">
//获取时间
var date = new Date();
var y = date.getFullYear();
var _m = date.getMonth();
### 回答1: 手写一个日历可能比较复杂,但可以使用 JavaScript 的 `Date` 对象和一些日期处理函数来实现。下面是一个简单的实现: ``` // 获取当前日期 var now = new Date(); // 获取当前月份 var month = now.getMonth(); // 获取当前年份 var year = now.getFullYear(); // 创建日历的表格 var table = document.createElement("table"); table.setAttribute("border", "1"); table.setAttribute("cellspacing", "0"); table.setAttribute("cellpadding", "5"); document.body.appendChild(table); // 创建表格的标题行 var caption = table.createCaption(); caption.innerHTML = year + "年" + (month + 1) + "月"; var thead = document.createElement("thead"); table.appendChild(thead); var tr = document.createElement("tr"); thead.appendChild(tr); var th = null; for (var i = 0; i < 7; i++) { th = document.createElement("th"); tr.appendChild(th); } th.innerHTML = "星期日"; th.innerHTML = "星期一"; th.innerHTML = "星期二"; th.innerHTML = "星期三"; th.innerHTML = "星期四"; th.innerHTML = "星期五"; th.innerHTML = "星期六"; // 创建表格的主体部分 var tbody = document.createElement("tbody"); table.appendChild(tbody); for (var i = 0; i < 6; i++) { tr = document.createElement("tr"); tbody.appendChild(tr); for (var j = 0; j < 7; j++) { td = document.createElement("td"); tr.appendChild(td); } } // 计算当前月份的天数 var days = new Date(year, month + 1, 0).getDate(); // 计算当前月份第一天是星期几 var firstDay = new Date(year, month, 1).getDay(); // 填充表格的主体部分 var count = 1; for (var i = 0; i < 6; i++) { for (var j = 0; j < 7; j++) { if (i === 0 && j < firstDay) { // 填充空 ### 回答2: 要手写一个JS星期日历,可以按照以下步骤进行: 1. 首先创建一个HTML文件,定义一个容器元素,用于显示日历的表格。 2. 在JS文件中,使用`Date`对象获取当前日期的年份和月份信息,并存储在变量中。 3. 使用`switch`语句确定当前月份的天数,并存储在一个名为`daysInMonth`的变量中。 4. 创建一个名为`calendar`的函数,用于创建和填充日历表格。 5. 在`calendar`函数中,使用`document.createElement()`方法创建HTML元素:表格、行和单元格。 6. 在循环中,根据`daysInMonth`变量的值创建和填充表格的行和单元格。 7. 在每个单元格中,使用Date对象的`getDate()`方法获取日期,并将其填充到单元格中。 8. 使用CSS样式来美化日历表格,例如设置表格边框、单元格宽度、字体样式等。 9. 调用`calendar`函数,将日历表格添加到HTML容器元素中,以便在网页上显示出来。 以下是一个简单的示例代码: ```html <!DOCTYPE html> <html> <head> <title>JS手写星期日历</title> <style> table { border-collapse: collapse; } td { border: 1px solid black; width: 50px; height: 50px; text-align: center; font-weight: bold; } </style> </head> <body> <div id="calendar"></div> <script> var currentDate = new Date(); var currentYear = currentDate.getFullYear(); var currentMonth = currentDate.getMonth(); var daysInMonth; switch(currentMonth) { case 1: if((currentYear % 4 == 0 && currentYear % 100 != 0) || currentYear % 400 == 0) { daysInMonth = 29; } else { daysInMonth = 28; } break; case 3: case 5: case 8: case 10: daysInMonth = 30; break; default: daysInMonth = 31; } function calendar() { var container = document.getElementById("calendar"); var table = document.createElement("table"); for(var i = 0; i < daysInMonth/7; i++) { var row = document.createElement("tr"); for(var j = 0; j < 7; j++) { var cell = document.createElement("td"); var day = i * 7 + j + 1; if(day <= daysInMonth) { cell.innerHTML = day; } row.appendChild(cell); } table.appendChild(row); } container.appendChild(table); } calendar(); </script> </body> </html> ``` 这样,一个简单的JS手写星期日历就完成了。运行该代码,即可在网页上显示出一个以当前月份为基础的日历表格。 ### 回答3: 要手写一个星期日历,可以使用JS编写以下代码: ```javascript // 获取当前日期 var today = new Date(); var year = today.getFullYear(); var month = today.getMonth() + 1; var day = today.getDate(); // 获取本月的第一天和最后一天的日期 var firstDay = new Date(year, month - 1, 1); // 注意月份要减1 var lastDay = new Date(year, month, 0); // 获取上个月的最后一天即本月的最后一天 // 获取本月的天数和第一天是星期几 var numDays = lastDay.getDate(); var firstWeekday = firstDay.getDay(); // 定义一个用于存储星期的数组 var weekDays = ["日", "一", "二", "三", "四", "五", "六"]; // 打印日历头部 console.log(year + "年" + month + "月"); console.log("日 一 二 三 四 五 六"); // 打印空白占位符 for (var i = 0; i < firstWeekday; i++) { process.stdout.write(" "); } // 打印日期 for (var j = 1; j <= numDays; j++) { process.stdout.write((j < 10 ? " " : "") + j + " "); if ((firstWeekday + j) % 7 === 0) { // 每行结束换行 console.log(); } } ``` 这段代码首先获取当前日期,然后计算本月的第一天和最后一天的日期,以及本月的天数和第一天是星期几。然后使用一个存储星期的数组,打印日历头部和星期的标题。 接着打印空白占位符,保证第一天之前的日期没有显示。然后利用循环打印日期,如果每行的日期数达到7个就换行。最后得到一个简单的星期日历输出。 注意:以上代码只是一个简单的示例,可能在细节上还有待完善,比如排版、颜色等。如果需求更复杂,可以根据实际需求进行相应的修改和优化。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值