在JS中怎么自定义日历,代码是什么

Admin 2022-06-18 群英技术资讯

这篇文章主要介绍“在JS中怎么自定义日历,代码是什么”,有一些人在在JS中怎么自定义日历,代码是什么的问题上存在疑惑,接下来小编就给大家来介绍一下相关的内容,希望对大家解答有帮助,有这个方面学习需要的朋友就继续往下看吧。


本文实例为大家分享了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>

效果:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
  • js css+html实现简单的日历
  • 轻量级的原生js日历插件calendar.js使用指南
  • JS学习之一个简易的日历控件
  • Vue.js创建Calendar日历效果
  • JS日历 推荐
  • 纯js简单日历实现代码
  • js日历控件(可精确到分钟)
  • php+javascript的日历控件
  • js+html制作简单日历的方法
  • JS实现一个简单的日历

这篇关于“在JS中怎么自定义日历,代码是什么”的文章就介绍到这了,更多相关的内容,欢迎关注群英网络,小编将为大家输出更多高质量的实用文章!
标签: js日历

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。

猜你喜欢

群英网络开启智能安全云计算之旅

注册领取新人大礼包
专业资深工程师驻守
7X24小时快速响应
一站式无忧技术支持
免费备案服务

联系我们

24小时售后 24小时售后TEL:0668-2555666 售前咨询TEL:400-678-4567 投诉建议TEL:0668-2555999 投诉建议邮箱:[email protected] 信息安全TEL:0668-2555118 域名空间客服 公司总机:0668-2555555 公司传真:0668-2555000
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 或 0668-2555555
在线客服
微信公众号
返回顶部
返回顶部 返回顶部