首页 > 其他分享> > 案例——原生js模块化开发日历控件
案例——原生js模块化开发日历控件

2021-01-30 00:01:16 作者：互联网
模块化开发日历

效果图：
在这里插入图片描述
代码：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>日历控件</title>
    <style>
        body {
            -webkit-user-select: none;
        }
        
        #calendar {
            width: 200px;
            padding: 5px;
            background: orange;
            position: absolute;
            z-index: 100;
        }
        
        #calendar h6 {
            font-size: 16px;
            background: blue;
            color: white;
            height: 30px;
            line-height: 30px;
            text-align: center;
            padding: 0;
            margin: 0;
            position: relative;
            cursor: pointer;
        }
        
        #calendar h6 span {
            width: 35px;
            height: 30px;
            position: absolute;
            top: 0;
        }
        
        #calendar h6 span.prev {
            left: 0;
            background: #000000;
        }
        
        #calendar h6 span.next {
            right: 0;
            background: #000000;
        }
        
        #calendar ul {
            padding: 0;
            margin: 0;
            list-style: none;
            overflow: hidden;
        }
        
        #calendar ul li {
            float: left;
            width: 26px;
            height: 26px;
            background: darkgreen;
            line-height: 26px;
            text-align: center;
            border: 1px solid #cccccc;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <input type="text" value="" onfocus="createCalendar(this)">
    <div style="width: 200px;height: 200px; background: #CCC;"></div>

</body>
<script>
    function createCalendar(ele) {
        var obj = offset(ele);
        var x = obj.left;
        var y = obj.top + ele.offsetHeight + 5;
        if (!document.getElementById("calendar")) {
            var calendar = document.createElement("div");
            calendar.id = "calendar";
            calendar.style.left = x + "px";
            calendar.style.top = y + "px";
            var h6 = document.createElement("h6");
            var prev = document.createElement("span");
            var title = document.createElement("div");
            var next = document.createElement("span");
            prev.className = "prev";
            next.className = "next";
            prev.innerHTML = "上";
            next.innerHTML = "下";
            calendar.appendChild(h6);
            h6.appendChild(prev);
            h6.appendChild(title);
            h6.appendChild(next);
            document.body.appendChild(calendar);

            oUl = document.createElement("ul");
            var currentDate = new Date;
            var currentYear = currentDate.getFullYear();
            var currentMonth = currentDate.getMonth();
            prev.onclick = function() {
                active(--currentMonth);
            };
            next.onclick = function() {
                active(++currentMonth);
            };
            active(currentMonth);
            calendar.appendChild(oUl);
        }

        function active(m) {
            oUl.innerHTML = "";
            var activeDate = new Date(currentYear, m); //活动日期，不断改变
            activeDate.setDate(1); //设置活动日期为1号
            var diff = 1 - activeDate.getDay(); //获取1号日期前面还有几个小li，用来漏出上个月的日期
            var month = activeDate.getMonth();
            title.innerHTML = activeDate.getFullYear() + "年" + (month + 1) + "月";
            activeDate.setDate(diff); //设置活动日期为上个月漏出的第一个日期
            for (var i = 0; i < 42; i++) { //不断循环，创建小li，写入日期，添加到ul中，并且设置活动日期加一
                var oLi = document.createElement("li");
                var date = activeDate.getDate();
                oLi.innerHTML = date;
                //实现获取日期填入input中
                oLi.dateValue = activeDate.getFullYear() + "-" + (activeDate.getMonth() + 1) + "-" + date;
                oLi.onclick = function() {
                    ele.value = this.dateValue;
                    document.body.removeChild(calendar);
                    calendar = null;
                }

                oUl.appendChild(oLi);
                if (activeDate.getMonth() != month) {
                    oLi.style.color = "#cccccc";
                }
                activeDate.setDate(date + 1);
            }

        }


        //计算任意DOM元素距离文档的左或上的绝对偏移
        function offset(ele) {
            var p = ele.offsetParent,
                l = ele.offsetLeft,
                t = ele.offsetTop;
            while (p) {
                //判断IE8的方法
                if (window.navigator.userAgent.indexOf("MISE 8") > -1) {
                    l += p.offsetLeft;
                    t += p.offsetTop;
                } else {
                    l += p.offsetLeft + p.clientLeft;
                    t += p.offsetTop + p.clientTop;
                }
                p = p.offsetTop;
            }

            return {
                left: l,
                top: t
            }
        }
    }
</script>

</html>
标签：activeDate,控件,模块化,h6,js,var,ele,calendar,document
来源： https://blog.csdn.net/gmh1118/article/details/113408756