输入年月渲染当月的日历

最新推荐文章于 2023-08-01 15:46:15 发布

长庚启明

最新推荐文章于 2023-08-01 15:46:15 发布

阅读量360

点赞数 1

文章标签： javascript css html

本文链接：https://blog.csdn.net/weixin_42597658/article/details/110949025

版权

输入年月渲染当月日历 JavaScript

首先效果图是这样：

首先效果图是这样：

在这里插入图片描述

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <div id="time"></div>
</body>
<script src="./js/index.js"></script>
<script>
    init('time')
</script>
</html>

css代码如下:

style.css

.calendar-container {
    width: calc(120px*7 + 10px);
    position: relative;
    margin: 0 auto;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
}

.year {
    text-align: center;
    line-height: 60px;
}
.year #month{
    text-align: center;
    width: 30px;
    height:20px;
}
.year #year{
    text-align: center;
    width: 60px;
    height:20px;
    }
.btn {
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
}

.calendar-body {
    border-right: 2px solid #9e9e9e;
    border-bottom: 2px solid #9e9e9e;
}

.week-row,
.day-rows,
.day-row {
    overflow: hidden;
}

.box {
    float: left;
    width: 120px;
    height: 60px;
    border-top: 1px solid #9e9e9e;
    border-left: 1px solid #9e9e9e;
    text-align: center;
    line-height: 60px;

}

.week {
    background: #5ac6d4;
}

.day {
    background: #99afb9;
}

.curday {
    background: #d6e9e0;
}

JavaScript代码如下：

index.js:

let curTime = new Date(),
curYear = curTime.getFullYear(),
curMonth = curTime.getMonth(),// 获取月信息（从0开始 范围：0-11）
curDate = curTime.getDate(); //获取天信息 
// 判断平年还是闰年
function init(id){
    var str='<div class="calendar-container">'+
        '<div class="calendar-header">'+
            '<button>'+
                '<div class="left btn">&lt;</div>'+
            '</button>'+
            '<div class="year"> '+
                '<input type="text" id="year">年</input>'+
                '<input type="text" id="month">月</input>'+
                '<button class="submit" οnclick="showtime()">查询</button>'+
            '</div>'+
            '<button>'+
                '<div class="right btn">&gt;</div>'+
            '</button>'+
        '</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>'
    document.getElementById(id).innerHTML=str;
        // 首次调用render函数
    render(curYear, curMonth);
    let leftBtn = document.querySelector('.left'),
        rightBtn = document.querySelector('.right');
    // 向左切换月份
    leftBtn.addEventListener('click', function () {
        curMonth--;
        if (curMonth < 0) {
            curYear -= 1;
            curMonth = 11;
        }
        render(curYear, curMonth);
    })
    // 向右切换月份
    rightBtn.addEventListener('click', function () {
        curMonth++;
        if (curMonth > 11) {
            curYear += 1;
            curMonth = 0;
        }
        render(curYear, curMonth);
    })
}
function isLeapYear(year) {
         return (year % 400 === 0) || ((year % 4 === 0) && (year % 100 !== 0))
     }
function render(curYear, curMonth) {
    document.querySelector('#year').value = `${curYear}`;
    document.querySelector('#month').value = `${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;
                var myDate = new Date();
            localM  =  myDate.getMonth();
            localY  =  myDate.getFullYear();
            // 过滤掉无效日期、渲染有效日期            
            if (date <= 0 || date > daysInMonth[curMonth]) {
                rows[i] += `<p class="day box"></p>`
                } 
             else if (date === curDate&&localM === curMonth&&localY === curYear) {
                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('');
    document.querySelector('.day-rows').innerHTML = dateStr;
}
function showtime(){
    year= document.getElementById("year").value;
    month = document.getElementById("month").value-1;
    render(year, month);
}

这是第一次优化之后的代码，因为导师给我提出整个都封装起来的要求，供各位参考。
再次优化之后再更新。

长庚启明

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
输入年月渲染当月的日历

输入年月渲染当月日历 JavaScript首先效果图是这样：html代码：css代码如下:JavaScript代码如下：首先效果图是这样：html代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
复制链接

扫一扫