Ideen und Code zur Implementierung des Kalenders in nativem JS

本篇文章给大家带来的内容是关于原生js实现日历的思路与代码，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

demo效果：

实现日历的思路：

1、利用new Date()获取今天日期

2、判断今年是平年还是闰年，确定今年每个月有多少天

3、确定今天日期所在月的第一天是星期几

4、计算出日历的行数

5、利用今天日期所在月的天数与该月第一天星期几来渲染日历表格

6、左右切换月份

源码：

html

<div class="calendar-container">
    <div class="calendar-header">
        <div class="left btn"><</div>
        <div class="year"></div>
        <div class="right btn">></div>
    </div>
    <div class="calendar-body">
        <div class="week-row">
            <div class="week box">日</div>
            <div class="week box">一</div>
            <div class="week box">二</div>
            <div class="week box">三</div>
            <div class="week box">四</div>
            <div class="week box">五</div>
            <div class="week box">六</div>
        </div>
        <div class="day-rows">
            <!--日期的渲染的地方-->
        </div> 
    </div>
</div>

css

.calendar-container{
    width: calc(31px*7 + 1px);
    }
.calendar-header{
    display: flex;    
    justify-content: space-between;
    }
.year{
    text-align: center;    
    line-height: 30px;
    }
.btn{
    width: 30px;    
    height: 30px;    
    text-align: center;    
    line-height: 30px;    
    cursor: pointer;
    }
.calendar-body{
    border-right: 1px solid #9e9e9e;    
    border-bottom: 1px solid #9e9e9e;
    }
.week-row, 
.day-rows, 
.day-row{
    overflow: hidden;
    }
.box{
    float: left;    
    width: 30px;    
    height: 30px;    
    border-top: 1px solid #9e9e9e;    
    border-left: 1px solid #9e9e9e;    
    text-align: center;    
    line-height: 30px;
    }
.week{
    background: #00bcd4;
    }
.day{
    background: #ffeb3b;
    }
.curday{ 
   background: #ff5722;
   }

js

// 获取今天日期
let curTime = new Date(),
    curYear = curTime.getFullYear(),
    curMonth = curTime.getMonth(),
    curDate = curTime.getDate();
    console.log(curTime, curYear, curMonth, curDate)
    // 判断平年还是闰年
    function isLeapYear(year){    
    return (year%400 === 0) || ((year%4 === 0) && (year%100 !== 0))
}
function render(curYear, curMonth){    
document.querySelector('.year').innerHTML = `${curYear}年${curMonth + 1}月`;    
// 判断今年是平年还是闰年，并确定今年的每个月有多少天    
let daysInMonth = [31, isLeapYear(curYear) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];    
// 确定今天日期所在月的第一天是星期几    
let firstDayInMonth = new Date(curYear, curMonth, 1),
        firstDayWeek = firstDayInMonth.getDay();    
        // 根据当前月的天数和当前月第一天星期几来确定当前月的行数    
        let calendarRows = Math.ceil((firstDayWeek + daysInMonth[curMonth])/7);    
        // 将每一行的日期放入到rows数组中    
        let rows = [];    
        // 外循环渲染日历的每一行    
        for(let i = 0; i < calendarRows; i++){
        rows[i] = `<p class="day-row">`;        
        // 内循环渲染日历的每一天        
        for(let j = 0; j < 7; j++){            
        // 内外循环构成了一个calendarRows*7的表格，为当前月的每个表格设置idx索引；            
        // 利用idx索引与当前月第一天星期几来确定当前月的日期            
        let idx = i*7 + j,
                date = idx - firstDayWeek + 1;            
                // 过滤掉无效日期、渲染有效日期            
                if(date <= 0 || date > daysInMonth[curMonth]){
                rows[i] += `<p class="day box"></p>`
            }else if(date === curDate){
                rows[i] += `<p class="day box curday">${date}</p>`
            }else{
                rows[i] += `<p class="day box">${date}</p>`
            }
        }
        rows[i] += `</p>`
    }    let dateStr = rows.join(&#39;&#39;);    
    document.querySelector(&#39;.day-rows&#39;).innerHTML = dateStr;
}
// 首次调用render函数
render(curYear, curMonth);
let leftBtn = document.querySelector(&#39;.left&#39;),
    rightBtn = document.querySelector(&#39;.right&#39;);
    // 向左切换月份
leftBtn.addEventListener(&#39;click&#39;, function(){
    curMonth--;    
    if(curMonth < 0){
        curYear -= 1;
        curMonth = 11;
    }
    render(curYear, curMonth);
})
// 向右切换月份
rightBtn.addEventListener(&#39;click&#39;, function(){
    curMonth++;    
    if(curMonth > 11){
        curYear += 1;
        curMonth = 0;
    }
    render(curYear, curMonth);
})

小结：

1、为了实现左右切换月份，将日历日期渲染代码放入到了render函数，方便月份切换后重新渲染；

2、确定当前月的行数时，要结合当前月的天数与当前月第一天星期几来共同确定；

3、原生js日历中比较核心的就是如何确定每一天的日期，在这儿利用了内外循环，内外循环构成了一个calendarRows*7的表格，为当前月的每个表格设置idx索引；利用idx索引与当前月第一天星期几来确定当前月的日期；记得要过滤掉无效日期！！！

相关推荐：

JS日历 推荐_时间日期

推荐一个小巧的JS日历_时间日期

Das obige ist der detaillierte Inhalt vonIdeen und Code zur Implementierung des Kalenders in nativem JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!