原生日历

更新时间:2023-04-07 16:07:07 阅读：评论：0

参考这位博主写的一个日历。主要是为了了解思路是怎么样的。
链接: /d/file/titlepic/12560673.html

获取当前的本地时间，然后通过tMonth()来实现加月、减月通过获取当月的天数和当天的周几来确认上一月、这个月、下个月在当月所占的格子数通过循环来实现渲染

1.html

代码如下（示例）：

<!DOCTYPE html><html lang="en"><head>    <meta chart="UTF-8">    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,ur-scalable=no" />    <title>日历</title>    <link rel="stylesheet" href="index.css"></head><body>    <div class="calendar">        <div class="year-line">            <div class="prevMonth"></div>            <div class="nowTime"></div>            <div class="nextMonth"></div>        </div>        <div class=哈工大威海分校"weekLine">            <span>日</span>            <span>一</span>            <span>二</span>            <span>三</span>            <span>四</span>            <span>五</span>            <span>六</span>        </div>        <div class="dateLine"></div>    </div>    <div class="lectMonth">        <div class="lectTitle">            <div class="year"></div>            <div class="button">                <div class="prevYear">∧</div>                <div class="nextYear">∨</div>            </div>        </div>        <div class="Month">            <span class="month">1月</span>            <span class="month">2月</span>            <span class="month">3月</span>            <span class="month">4月</span>            <span class="month">5月</span>            <span class="month">6月</span>            <span class="month">7月</span>            <span class="month">8月</span>            <span class="month">9月</span>            <span class="month">10月</span>            <span class="month">11月</span>            <span class="month">12月</span>        </div>    </div>    </div>    <script src="./calendar.js"></script></body></html>

2.css

代码如下（示例）：

html,body {     width: 100%;    height: 100%;    margin: 0;    padding: 0;}* {     box-sizing: border-box;}.calendar {     width: 100%;    padding: 15px;}.year-line {     display: flex;    align-items: center;    margin-bottom: 20px;}.prevMonth::before {     content: '<';}.nextMonth::before {     content: '>'}.nowTime {     flex: 1;    text-align: center;    font-size: 20px;}.weekLine {     padding: 10px;    border-bottom: 1px solid #ddd;    display: flex;}.weekLine span {     flex: 1;    text-align: center;}.dateLine {     padding: 10px;}.dateLine div {     display: flex;}.day {     flex: 1;    text-align: center;  看雪教学设计  margin-bottom: 15px;郑伊月}.lectMonth {     display: none;    padding: 15px}.lectTitle {     margin-bottom: 20px;    font-size: 20px;    display: flex;    justify-content: space-between;}.button {     display: flex;}.prevYear {     margin-right: 20px;}.Month span {     display: inline-block;    width: calc(25% - 10px);    height: 80px;    margin-right: 10px;    text-align: center;    line-height: 80px;    margin-bottom: 5px;}.Month span:nth-child(2n) {     margin-right: 0;}

3.js

代码如下：

// 获取元素let calendar = document.querySelector(".calendar");let lectMonth = document.querySelector(".lectMonth");let oTime = document.querySelector(".nowTime");let prev = document.querySelector(".prevMonth"); // 左按钮let next = document.querySelector(".nextMonth"); // 右按钮let dateLine = document.querySelector(".dateLine"); // 日期let year = document.querySelector(".year");let prevYear = document.querySelector(".prevYear"); // 上一年按钮let nextYear = document.querySelector(".nextYear"); // 下一年按钮let Allmonth = document.getElementsByClassName("month");let time = new Date();createCells();nowTime(time); // 获取当前时间mainList(time, getPrevDays(time), getCurrentDays(time)); // 渲染日历// 创建表格function createCells() { for (let i = 0; i < 6; i++) { const div = document.createElement('div');for (let k = 0; k < 7; k++) { const span = document.createElement('span');span.className = "day";div.appendChild(span);}dateLine.appendChild(div);}}// 加减月// 减月prev.onclick = () => { getYearMonth(time, time.getMonth() - 1);};// 加月next.onclick = () => { getYearMonth(time, time.getMonth() + 1);};// 加减年prevYear.onclick = () => { time.tYear(time.getFullYear() - 1);year.innerHTML = `${ time.getFullYear()}年`;};nextYear.onclick = () => { time.tYear(time.getFullYear() + 1);year.innerHTML = `${ time.getFullYear()}年`;};// 点击头部展示月份oTime.onclick = () => { calendar.style.display = "none";lectMonth.style.display = "block";};// 设置头部时间function nowTime(time) { oTime.innerHTML = `${ time.getFullYear()}年${ time.getMonth() + 1}月`;year.innerHTML = `${ time.getFullYear()}年`;}// 获取上一个月的天数的数组function getPrevDays(time) { const times = ne内蒙教育考试院w Date(time);let prevMonthDays = [];let prevDays = new Date(times.getFullYear(), times.getMonth(), 0).getDate(); // 上个月的天数let nowWeek = times.getDay(times.tDate(1)); // 计算出本月的第一天为周几;nowWeek = nowWeek == 0 ? 7 : nowWeek; // 如果返回的是0，说明是周日，需要空一行；for (let i = prevDays; i > (prevDays - nowWeek); i--) { prevMonthDays.push(i);}prevMonthDays.rever();return prevMonthDays;}// 获取当前月份的天数的数组;function getCurrentDays(time) { const times = new Date(time);let nowMonthDays = [];let day = new Date(times.getFullYear(), times.getMonth() + 1, 0).getDate();for (let i = 1; i <= day; i++) { nowMonthDays.push(i);}return nowMonthDays;}// 将获取到的天数填充到dateLine中function mainList(time, prevMonthDays, nowMonthDays内蒙古大学录取分数线) { let cellList = document.querySelectorAll(".day");let sumDays = prevMonthDays.length + nowMonthDays.length;// 展示上一个月的天数for (let i = 0; i < prevMonthDays.length; i++) { cellList[i].innerHTML = `<span style="color:#ccc">${ prevMonthDays[i]}</span>`;}let date = new Date();// 展示当月的天数for (let i = 0; i < nowMonthDays.length; i++) { if (date.getDate() == nowMonthDays[i] && getYMR() === getYMR(time)) { cellList[prevMonthDays.length + i].innerHTML = `<span style="border:1px solid #4049ff">${ nowMonthDays[i]}</span>`;} el { cellList[prevMonthDays.length + i].innerHTML = `<span>${ nowMonthDays[i]}</span>`;}}// 展示下个月的天数for (let i = 1; i <= (42 - sumDays); i++) { cellList[sumDays + i - 1].innerHTML = `<span style="color:#ccc">${ i}</span>`;}}// 给每一个月份添加事件for (let i = 0; i < Allmonth.length; i++) { Allmonth[i].onclick = function() { calendar.style.display = "block";lectMonth.style.display = "none";getYearMonth(time, i);};}function getYearMonth(time, value = '') { // js中月份是从0开始的time.tMonth(value);nowTime(time);mainList(time, getPrevDays(time), getCurrentDays(time));}// 用来判断是否是当前的日期function getYMR(time) { time = time || new Date();return `${ time.getFullYear()}-${ time.getMonth() + 1}-${ time.getDate()}`;}