js手写日历插件
Posted 曾经的水哥
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js手写日历插件相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>日历</title> <style> table { width: 320px; background: #333; color: #fff } td, th { text-align: center; height: 30px; } </style> </head> <body> <table> <thead> <tr> <th colspan="2"> <span class="left"><<</span> </th> <th colspan="3"> <span class="time"></span> </th> <th colspan="2"> <span class="right">>></span> </th> </tr> <tr> <th>日</th> <th>一</th> <th>二</th> <th>三</th> <th>四</th> <th>五</th> <th>六</th> </tr> </thead> <tbody class="main"></tbody> </table> <script> // 获取元素 let oTime = $(‘.time‘) let oMain = $(‘.main‘) let leftBtn = $(‘.left‘) let rightBtn = $(‘.right‘) let time = new Date() createCells() // 1. 创建表格 getPrevDays(time) // 2.获取上一个月占的格子 getCurrentDays(time); // 3.获取当前月所占的格子数 minHead(time) // 4.设置头部显示的内容 mainList(time, getPrevDays(time), getCurrentDays(time)) // 5. 月份显示的详情 leftBtn.onclick = function() { // 6.绑定两边的按钮 实现上一月下一月 time.setMonth(time.getMonth() - 1) getPrevDays(time) getCurrentDays(time) minHead(time) mainList(time, getPrevDays(time), getCurrentDays(time)) } rightBtn.onclick = function() { time.setMonth(time.getMonth() + 1) getPrevDays(time) getCurrentDays(time) minHead(time) mainList(time, getPrevDays(time), getCurrentDays(time)) } /* * * 获取元素 * */ function $(container) { return document.querySelector(container) } /* * * 创建表格 * */ function createCells() { for (var i=0; i<6; i++) { var tr = document.createElement(‘tr‘) for(var k=0; k<7; k++) { var td = document.createElement(‘td‘) tr.appendChild(td) } oMain.appendChild(tr) } } /* * * getPrevDays 获取上一个月 占的格子 * */ function getPrevDays(time) { var time = new Date(time) // 拷贝一份时间 防止修改时间引发冲突 var list = [] // 上一个月所占的天数 time.setDate(1) // 设置为当月第一天方便查看是星期几 var day = time.getDay() == 0 ? 7 : time.getDay() // 如果是0 说明需要空出来一行 显示上个月的时间 // 获取上一个月的天数 time.setDate(0) var maxDay = time.getDate() for(var i=maxDay; i> (maxDay-day); i--) { list.push(i) } list.reverse() return list } /* * 获取当月所占的格子 */ function getCurrentDays(time) { // debugger var time = new Date(time) // 拷贝一份时间 防止修改时间造成全局时间冲突 time.setDate(1) // 确保不会出现跨越现象 比如1.31跑到三月份去了 var list = [] // 下面的代码是为了获取当前月的信息 time.setMonth(time.getMonth() + 1) console.log(time.getMonth()) time.setDate(0) // 修改日期0 var maxDay = time.getDate() // 获取当月的天数 for(var i=1; i<=maxDay; i++) { list.push(i) } return list } /* * minHead 设置头部的显示 */ function minHead(time) { // oTime.innerHTML = time.getFullYear() + ‘年‘ + time.getMonth() + 1 oTime.innerHTML = `${time.getFullYear()}年${time.getMonth() + 1}月` } function getYMD(time) { time = time || new Date() return `${time.getFullYear()}-${time.getMonth() + 1}-${time.getDate()}` } /* * 月份显示的详情 上个月最后 + 本月 + 下个月开始的 */ function mainList(time, prevDays, currentDays) { var beforeCount = prevDays.length + currentDays.length var cellList = document.querySelectorAll(‘td‘) // 1. 展示上个月的 for(var i=0; i<prevDays.length; i++) { cellList[i].innerHTML = `<font color=‘red‘>${prevDays[i]}</font>` } // 2. 展示本月的 for(var i=0; i<currentDays.length; i++) { if (getYMD() === getYMD(time) && currentDays[i] == time.getDate()) { // 如果是今天 展示另外一种颜色 cellList[i + prevDays.length].innerHTML = `<font color=‘yellow‘>${currentDays[i]}</font>` } else { cellList[i + prevDays.length].innerHTML = `<font color=‘white‘>${currentDays[i]}</font>` } } // 3. 展示下个月的 for(var i=1; i< (42-beforeCount); i++) { cellList[i + beforeCount - 1].innerHTML = `<font color=‘red‘>${i}</font>` } } </script> </body> </html>
以上是关于js手写日历插件的主要内容，如果未能解决你的问题，请参考以下文章
vue10行代码实现上拉翻页加载更多数据，纯手写js实现下拉刷新上拉翻页不引用任何第三方插件