<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.calendar {
width: 720px;
}
.week {
width: 100%;
height: 100px;
padding: 0;
display: grid;
grid-template-columns: 100px 100px 100px 100px 100px 100px 100px;
list-style-type: none;
}
.week li {
width: 100px;
height: 100%;
list-style: none;
display: flex;
align-items: center;
justify-content: center;
}
.days {
width: 100%;
padding: 0;
display: grid;
grid-template-columns: 100px 100px 100px 100px 100px 100px 100px;
grid-template-rows: 100px 100px 100px 100px 100px 100px 100px;
list-style-type: none;
}
.days span {
width: 99px;
height: 99px;
display: inline-block;
display: flex;
align-items: center;
justify-content: center;
margin: 1px 1px;
}
.days .active {
width: 98px;
height: 98px;
border: 1px solid red;
border-radius: 8px;
cursor: pointer;
}
.dain {
width: 5px;
height: 5px;
border-radius: 50%;
background: red;
}
.wisas {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
pointer-events: auto;
}
.days .gay {
color: gray;
}
</style>
</head>
<body>
<input type="file" name="上传" accept="image/*" multiple id="xx">
<div>1111111</div>
<h3>日历</h3>
切换年份<select name="jxon" id="yearSelect">
</select>
切换日期 <select name="jon" id="selectMathod">
</select>
<div class="calendar">
<div>日期 1 2 3</div>
<ul class="week">
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li>六</li>
<li>日</li>
</ul>
<div class="days"></div>
</div>
</body>
<script>
let dom = document.getElementById('xx');
dom.addEventListener('change', (e) => {
const files = e.target.files
const rawFile = files[0] // only use files[0]
console.log(files, rawFile)
if (!rawFile) return
let reader = new FileReader();
reader.readAsDataURL(rawFile);
reader.onload = e => {
console.log(e.target.result)
}
})
// 日历
let daysArr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
let yearArr = [2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021, 2022];
const daysDom = document.querySelector('.days');
getWeenkDays(new Date().getMonth()) // 触发
// 点击事件
daysDom.addEventListener('click', function (e) {
const clickDays = document.querySelectorAll('.days span');
clickDays.forEach((item) => {
item.classList.remove('active');
})
if (e.target.tagName === 'SPAN' && !e.target.getAttribute('noclick')) {
e.target.classList.add('active')
} else if (e.target.className === 'wisas') { // 点击子级给父级添加选中class
e.target.parentNode.classList.add('active')
}
})
// dateDayFunc();
// 获取上月 当月 下月数据 合并当前月份展示数据
function dateDayFunc(years, n) {
let date = new Date(years);
let nowMonth = date.getMonth() // 当前月份
date.setMonth(Number(n), 1)
let weenkAwwNum = date.getDay(); // 获取当天周几
// 当月总共天数
date.setMonth(Number(n) + 1, 0)
var newAww = date.getDate();
// console.log('单月', date.getFullYear(), date.getMonth() + 1, weenkAwwNum, newAww,);
// 上月总共天数
date.setMonth(Number(n), 0)
let oldAww = date.getDate();
// console.log('上月', date.getMonth() + 1, weenkAwwNum);
// 下月总共天数
date.setMonth(Number(n) + 2, 0)
let downAww = date.getDate();
// console.log('下月', date.getMonth() + 1, weenkAwwNum);
// console.log(oldAww, newAww, downAww);
const oldAwwArr = [];
for (let i = 1; i <= oldAww; i++) {
oldAwwArr.push({ day: i })
}
const newAwwArr = [];
for (let i = 1; i <= newAww; i++) {
newAwwArr.push({ day: i })
}
const downAwwArr = [];
for (let i = 1; i <= downAww; i++) {
downAwwArr.push({ day: i })
}
return { oldAwwArr, newAwwArr, downAwwArr, weenkAwwNum };
}
// 获取当前日期
function getWeenkDays(years, n) {
const time = new Date(years)
const year = time.getFullYear();
const day = time.getDate();
const weenkNum = time.getDay();
const mathodNum = time.getMonth() + 1; // 0 - 11 默认 得改 加一
const { oldAwwArr, newAwwArr, downAwwArr, weenkAwwNum } = dateDayFunc(years, n);
// console.log(oldAwwArr, newAwwArr, downAwwArr, weenkAwwNum)
const daysArrNew = [];
// 不全上下月
if (weenkAwwNum !== 0 && weenkAwwNum !== 1) { // 周二到周六
const fistArr = oldAwwArr.slice(-weenkAwwNum + 1);
fistArr.forEach((item) => {
item.color = 'gay'
})
daysArrNew.push(...fistArr);
daysArrNew.push(...newAwwArr);
const lens = 7 - (daysArrNew?.length - (Math.floor(daysArrNew?.length / 7) * 7));
const lastArr = downAwwArr.slice(0, lens);
lastArr.forEach((item) => {
item.color = 'gay'
})
daysArrNew.push(...lastArr);
} else if (weenkAwwNum === 1) { // z周一
daysArrNew.push(...newAwwArr);
const lens = 7 - (daysArrNew?.length - (Math.floor(daysArrNew?.length / 7) * 7));
const lastArr = downAwwArr.slice(0, lens);
lastArr.forEach((item) => {
item.color = 'gay'
})
daysArrNew.push(...lastArr);
} else if (weenkAwwNum === 0) { // 周天
const fistArr = oldAwwArr.slice(-6);
fistArr.forEach((item) => {
item.color = 'gay';
})
daysArrNew.push(...fistArr);
daysArrNew.push(...newAwwArr);
const lens = 7 - (daysArrNew?.length - (Math.floor(daysArrNew?.length / 7) * 7));
const lastArr = downAwwArr.slice(0, lens);
lastArr.forEach((item) => {
item.color = 'gay'
})
daysArrNew.push(...lastArr);
}
renderDom(daysArrNew);
}
// 页面渲染
function renderDom(data) {
daysDom.innerHTML = ''
data.forEach((item) => {
const domSpan = document.createElement('span');
domSpan.className = item.color ? item.color : '';
domSpan.setAttribute('noclick', item.color ? item.color : '')
if (item.color) {
domSpan.innerHTML = item.day;
} else {
domSpan.innerHTML = '<div class="wisas">' + item.day + '<div class="dain"/>' + '</div>';
}
daysDom.appendChild(domSpan)
})
}
// 月份
const selectMathodDom = document.getElementById('selectMathod');
// 年
const selectYearDom = document.getElementById('yearSelect');
daysArr.forEach((item, index) => {
const domSpan = document.createElement('option');
domSpan.setAttribute('value', index)
domSpan.innerHTML = index + 1;
selectMathodDom.appendChild(domSpan)
})
// 改变月份
selectMathodDom.addEventListener('change', function (e) {
getWeenkDays(selectYearDom.value, e.target.value)
})
yearArr.forEach((item, index) => {
const domSpan = document.createElement('option');
domSpan.setAttribute('value', item)
domSpan.innerHTML = item;
selectYearDom.appendChild(domSpan)
})
// 改变月份
selectYearDom.addEventListener('change', function (e) {
getWeenkDays(e.target.value, selectMathodDom.value)
})
yearSelect
</script>
</html>
标签：const,item,100px,daysArrNew,js,改变,date,手写,domSpan From： https://www.cnblogs.com/fyh0912/p/16719526.html