JavaScript怎么实现自定义日历效果

2023-06-25 13:06:37 765人浏览八月长安

摘要

本篇内容主要讲解“javascript怎么实现自定义日历效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“JavaScript怎么实现自定义日历效果”吧!实现思路：获取每个月的第一天是星期几，然

本篇内容主要讲解“javascript怎么实现自定义日历效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“JavaScript怎么实现自定义日历效果”吧!

实现思路：获取每个月的第一天是星期几，然后把前面的天数填充为空，在获取每个月有多少天，循环填充，判断并给给当前时间添加单独样式，点击上一月，和下一月时改变月份。

获取当前月第一天：返回值是 0（周日）到 6（周六）之间的一个整数

var date = new Date();var y=date.getFullYear();var m=date.getMonth();new Date(y,m,1).getDay();

获取当前月有多少天

var date = new Date();var y=date.getFullYear();var m=date.getMonth();new Date(y,m+1,-1).getDate()+1;

最后点击上一月，下一月月份加一或减一，在执行封装的日历函数。

全部代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style>        * {            margin: 0;            padding: 0;        }        body {            background: #2c3e50;        }        .calendar {            width: 400px;            margin: 50px auto;        }        .calendar-tip {            font-size: 16px;            text-align: center;            color: #fff;        }        .prev {            float: left;            cursor: pointer;        }        .next {            float: right;            cursor: pointer;        }        .calendar-month {            text-align: center;            margin: 10px 0;            color: #fff;        }        ul {            list-style: none;            display: flex;        }        li {            width: 57px;            text-align: center;            height: 55px;            line-height: 55px;            font-size: 16px;            color: #fff;        }        .calendar-day {            display: flex;        }        .calendar-day span {            flex: 1;            color: #fff;            text-align: center;            height: 40px;            line-height: 40px;        }        .calendar-data {            display: flex;            flex-wrap: wrap;        }        li {            width: 57px;            cursor: pointer;        }        li:hover {            background: #2d3436;        }        .calendar-data .on {            color: #d63031;        }    </style></head><body>    <div class="calendar">        <div class="calendar-tip">            <span class="prev">上一月</span>            <em id="year">2022年</em>            <span class="next">下一月</span>        </div>        <div class="calendar-month">五月</div>        <div class="calendar-day">            <span>日</span>            <span>一</span>            <span>二</span>            <span>三</span>            <span>四</span>            <span>五</span>            <span>六</span>        </div>        <ul class="calendar-data">            <li>1</li>            <li>1</li>            <li>1</li>            <li>1</li>            <li>1</li>            <li>1</li>            <li>1</li>        </ul>    </div>    <script>        var date = new Date();        var year = document.querySelector("#year");        var month = document.querySelector(".calendar-month");        var calendarData = document.querySelector(".calendar-data");        var prev = document.querySelector(".prev");        var next = document.querySelector(".next");        var monthArr = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"];        var y,m,day,d,html,today;        calendar();        function calendar() {            y = date.getFullYear();            year.innerHTML = y + "年";            m = date.getMonth();            month.innerHTML = monthArr[m];            day = new Date(y, m, 1).getDay(); //获取每个月第一天是周几            d = new Date(y, m + 1, -1).getDate() + 1; //获取多少天            html = "";            //把每个月第一天之前的时间填充为空            for (var i = 0; i < day; i++) {                html += "<li> </li>";            }            for (var j = 1; j <= d; j++) {                if (y==new Date().getFullYear() && m==new Date().getMonth() && j== date.getDate()) {                    html += "<li class='on'>" + j + "</li>";                } else {                    html += "<li>" + j + "</li>";                }            }            calendarData.innerHTML = html;        }        prev.onclick = function () {            date.setMonth(date.getMonth() - 1);            calendar();        }        next.onclick = function () {            date.setMonth(date.getMonth() + 1);            calendar();        }    </script></body></html>

效果：

JavaScript怎么实现自定义日历效果