js手写日历插件
程序员文章站
2022-07-06 12:37:17
<!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>