当前位置：首页 > news >正文

原生日历表

news 2025/10/25 7:29:33

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>日历表</title><style>#day,#week {display: grid;grid-template-columns: repeat(7, 1fr);/* 7 列 */gap: 4px;width: 280px;/* 随意调 */}#day div,#week div {height: 40px;display: flex;align-items: center;justify-content: center;border: 1px solid #ccc;}</style>
</head><body><button id="addMonth">加一月</button><button id="subMonth">减一月</button><br>当前年月为:<span id="year"></span>年<span id="month"></span>月<br><div id="week"><div>一</div><div>二</div><div>三</div><div>四</div><div>五</div><div>六</div><div>日</div></div><div id="day"></div><script>var addMonth = document.getElementById('addMonth');var subMonth = document.getElementById('subMonth');var yearDom = document.getElementById('year');var monthDom = document.getElementById('month');var dayDom = document.getElementById('day');var date = new Date();var year = date.getFullYear();var month = date.getMonth() + 1;function formartData(year, month) {var date_01 = new Date(`${year}/${month}/01`);var weekday_01 = parseInt(date_01.getDay());var monthDays = new Date(year, month, 0).getDate();var mut = [];var max = weekday_01;if (weekday_01 == 0) {max = 7;}for (var i = 1; i < max; i++) {mut.push('');}for (var j = 1; j <= monthDays; j++) {mut.push(j);}const space_day = weekday_01 == 0 ? 6 : weekday_01 - 1const obj = {'当前年月为:': year + '-' + month,'当前月共有天数为:': monthDays,'当前月第一天星期为:': weekday_01,'当前月第一天需要补空格数为:': space_day,'当前月的数组为:': mut}console.log(obj)// 渲染元素(下面是元素渲染部分,如果只看逻辑看上面部分就行)yearDom.innerText = year;monthDom.innerText = month;let num = ''// 让元素补满最后一行(最后一行格子不需要补满的话可以注释掉这段逻辑)if (mut.length <= 35) {// 五行补满五行的格子num = 35 - mut.length} else {// 六行补满六行格子num = 42 - mut.length}for (var i = 0; i < num; i++) {mut.push('')}/* 渲染日期格子,清空旧格子,防止加减月份导致的重复渲染 */dayDom.innerHTML = '';mut.forEach(day => {const div = document.createElement('div');div.textContent = day || '';dayDom.appendChild(div);});// 如果需要像windows电脑那种样式,可以给dayDom添加一个class,然后给class设置样式// 如果想要让前后空白格子处上下月时间,则每次切换月,需要执行三次,分别是上月,本月和下月,将上月的末尾数据补到本月开头,将下月首部数据补到本月末尾即可,然后加class置灰即可// 总之这种方式不依赖组件,,但是需要自己处理样式,自己写逻辑,灵活性更大// PS:萧寂}window.onload = function () {// formartData(2020, 5);formartData(year, month);}addMonth.onclick = function () {month++;if (month > 12) {month = 1;year++;}formartData(year, month);}subMonth.onclick = function () {month--;if (month < 1) {month = 12;year--;}formartData(year, month);}</script>
</body></html>