<!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"><<>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>
Copyright © 2004-2024 Ynicp.com 版权所有 法律顾问:建纬(昆明)律师事务所 昆明市网翼通科技有限公司 滇ICP备08002592号-4
