原生js实现日历的思路与代码

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

demo效果：

实现日历的思路：

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

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

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

4、计算出日历的行数

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

6、左右切换月份

源码：

html

<div class="calendar-container">
    <div class="calendar-header">
        <div class="left btn">&lt;</div>
        <div class="year"></div>
        <div class="right btn">&gt;</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日历_时间日期

以上是原生js实现日历的思路与代码的详细内容。更多信息请关注PHP中文网其他相关文章！