原生JS实现日历
这周写自己的项目发现又用到日历了，加之自己毕业之后的第一个工作中遇到的任务也是需要写个日历(组员写了，我就不用写了)，今天就来好好折腾一下日历是怎么写的。
首先，我们看看 windows 的日历。发现总共有这么几个元素。先实现试试。
- 1.年份的选择、月份的选择
- 2.周一 ~ 周日
- 3.日历格子 6*7 = 42
先来实现个简单的雏形，麻烦的事情慢慢来
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.week-item {
display: inline-block;
width: 80px;
height: 40px;
line-height: 40px;
border: 1px solid sandybrown;
text-align: center;
}
.date-item {
display: inline-block;
width: 80px;
height: 40px;
line-height: 40px;
border: 1px solid beige;
text-align: center;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="year-line">
<button class="year-prev">上一年</button>
<button class="year-now">2019</button>
<button class="year-next">下一年</button>
</div>
<div id="weekLine" class="week-line"></div>
<div id="dateWrap" class="date-wrap"></div>
</div>
</body>
<script>
let weekArr = ['一', '二', '三', '四', '五', '六', '日'];
weekArr = weekArr.map(item => '星期' + item);
console.log('arr', weekArr);
// 插入星期 dom
let weekDomStr = '';
let oFragWeek = document.createDocumentFragment();
weekArr.forEach(item => {
let oSpan = document.createElement('span');
let oText = document.createTextNode(item);
oSpan.appendChild(oText);
oSpan.classList.add('week-item');
oFragWeek.appendChild(oSpan);
});
let weekWrap = document.getElementById('weekLine');
weekWrap.appendChild(oFragWeek);
// 插入日期 DOM - 42个dom
let oFragDate = document.createDocumentFragment();
let oCount = 0;
for (let i = 0; i < 6; i++) {
let oneLineFrag = document.createDocumentFragment();
let oDiv = document.createElement('div');
oDiv.classList.add('date-line');
for (let j = 0; j < 7; j++) {
let oSpan = document.createElement('span');
let oText = document.createTextNode(oCount);
oSpan.classList.add('date-item');
oSpan.appendChild(oText);
oneLineFrag.appendChild(oSpan);
oCount++;
}
oDiv.appendChild(oneLineFrag);
oFragDate.appendChild(oDiv);
}
let dateWrap = document.querySelector('#dateWrap');
dateWrap.appendChild(oFragDate);
</script>
</html>
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！