原生日历

程序员文章站 2022-03-22 09:38:39

参考这位博主写的一个日历。主要是为了了解思路是怎么样的。链接: https://www.cnblogs.com/cengjingdeshuige/p/12560673.html一、思路获取当前的本地时间，然后通过setMonth()来实现加月、减月通过获取当月的天数和当天的周几来确认上一月、这个月、下个月在当月所占的格子数通过循环来实现渲染1.html代码如下（示例）：...

参考这位博主写的一个日历。主要是为了了解思路是怎么样的。
链接: https://www.cnblogs.com/cengjingdeshuige/p/12560673.html

一、思路

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

1.html

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-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="selectMonth">
        <div class="selectTitle">
            <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;
}

.selectMonth {
    display: none;
    padding: 15px
}

.selectTitle {
    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 selectMonth = document.querySelector(".selectMonth");
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.setYear(time.getFullYear() - 1);
    year.innerHTML = `${time.getFullYear()}年`;
};
nextYear.onclick = () => {
    time.setYear(time.getFullYear() + 1);
    year.innerHTML = `${time.getFullYear()}年`;
};

// 点击头部展示月份
oTime.onclick = () => {
    calendar.style.display = "none";
    selectMonth.style.display = "block";
};

// 设置头部时间
function nowTime(time) {
    oTime.innerHTML = `${time.getFullYear()}年${time.getMonth() + 1}月`;
    year.innerHTML = `${time.getFullYear()}年`;
}

// 获取上一个月的天数的数组
function getPrevDays(time) {
    const times = new Date(time);
    let prevMonthDays = [];
    let prevDays = new Date(times.getFullYear(), times.getMonth(), 0).getDate(); // 上个月的天数
    let nowWeek = times.getDay(times.setDate(1)); // 计算出本月的第一天为周几;
    nowWeek = nowWeek == 0 ? 7 : nowWeek; // 如果返回的是0，说明是周日，需要空一行；
    for (let i = prevDays; i > (prevDays - nowWeek); i--) {
        prevMonthDays.push(i);
    }
    prevMonthDays.reverse();
    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>`;
        } else {
            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";
        selectMonth.style.display = "none";
        getYearMonth(time, i);
    };
}

function getYearMonth(time, value = '') {
    // js中月份是从0开始的
    time.setMonth(value);
    nowTime(time);
    mainList(time, getPrevDays(time), getCurrentDays(time));
}

// 用来判断是否是当前的日期
function getYMR(time) {
    time = time || new Date();
    return `${time.getFullYear()}-${time.getMonth() + 1}-${time.getDate()}`;
}

本文地址：https://blog.csdn.net/weixin_43836360/article/details/111028176

原生日历

一、思路

1.html

2.css

3.js

php Calender(日历)代码分享

JS实现带阴历的日历功能详解

原生JS实现逼真的图片3D旋转效果详解

教你如何利用人生日历卡点捡漏国庆火车票(两个妙招)

原生JS实现圣旨卷轴展开效果

原生js实现打字动画游戏

原生js实现回复评论功能

原生js实现节日时间倒计时功能

原生js实现中奖信息无间隙滚动效果

纯js模仿windows系统日历