原生js日历插件 js日历效果

作者：袖梨 2022-06-25

提示：您可以先修改部分代码再运行

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>日历 - 插件</title>
    
    <style>
        * {padding:0;margin:0;font-size:12px;}
        .fl {float:left}
        .fr {float:right}
        .dn {display:none}
        /*日历 begin*/
.data_box           { }
.showDate           {line-padding:0 5px;border:1px solid #e1e1e1;color:#999;}
.show_mn            {text-align:center;padding:0 20px;}
.sel_date           {margin-top:10px;border:1px solid #999;padding:3px}
.data_table         {width:100%;margin-top:10px;}
.data_table td      {text-align:center;cursor:pointer;font-size:14px;}
.data_table td.active      {color:#fff;background-color:#999}
.data_table td.hover{color:blue;}
.showDate2          {padding:3px 5px;color:#999;border:1px solid #e1e1e1;text-align:center}
.showDate2.active   {border:1px solid #c50000; }
.prev_m,.next_m     {display:block;background-color:#0094ff;color:#fff;cursor:pointer;text-align:center;font: bold 12px/22px "宋体"}
.prev_y,.next_y     {display:block;background-color:#0094ff;color:#fff;cursor:pointer;text-align:center;font: bold 12px/22px "宋体";margin:0 5px;}
/*日历 end*/
    </style>
    <script src="js/base.js" type="text/javascript"></script>
    <script>
LiChang = {
            getByClass: function (oPare, cla) {
                var oChild = oPare.getElementsByTagName("*");
                var arr = [];
                for (var i = 0; i < oChild.length; i++) {
                    var arrCla = oChild[i].className.split(" ");
                    var j;
                    for (var j in arrCla) {
                        if (arrCla[j] == cla) {
                            arr.push(oChild[i]);
                            break;
                        }
                    }
                }
                return arr;
            }
        }
        function showDate(option) {
            this.obj = document.getElementById(option.id);
        }
        showDate.prototype.init = function () {
            var _self = this;
            _self.dateText = LiChang.getByClass(_self.obj, "showDate")[0];
            _self.dateBox = LiChang.getByClass(_self.obj, "sel_date")[0];
            _self.yearBox = LiChang.getByClass(_self.obj, "year")[0];
            _self.mnBox = LiChang.getByClass(_self.obj, "month")[0];
            _self.dataTable = LiChang.getByClass(_self.dateBox, "data_table")[0];
            _self.tbody = _self.dataTable.tBodies[0];
            _self.td = _self.tbody.getElementsByTagName("td");
            _self.prevM= LiChang.getByClass( _self.dateBox,"prev_m")[0];
            _self.nextM = LiChang.getByClass(_self.dateBox, "next_m")[0];
            _self.prevY = LiChang.getByClass(_self.dateBox, "prev_y")[0];
            _self.nextY = LiChang.getByClass(_self.dateBox, "next_y")[0];
            
            //显示日历
            _self.dateText.onfocus = function () {
                _self.changeDefault(this);
                _self.show();
                _self.showNow();
                //_self.dateText.blur();
            }
            //点击空白 隐藏日历
            document.onclick = function (event) {
                event = event || window.event;
                var Target = event.target || event.srcElement;
                _self.hide(event, Target,this);
            }
            //点击选择日期
            for (var i = 0; i < _self.td.length; i++) {
                _self.td[i].onclick = function () {
                    var newDd = this.innerHTML;
                    var newYear = _self.yearBox.value;
                    var newMn = _self.mnBox.value;
                    if (newDd.match(/^s{0}$/g)) {  //如果td有值;
                        return false;
                    }
                    _self.dateText.value = newYear + "年" + newMn + "月" + newDd + "日";
                    _self.dateBox.className += " ";
                    _self.dateBox.className += "dn";
                }
                _self.td[i].onmouseover = function () {
                    if (this.className.indexOf("hove") == -1) {
                        this.className += " hover";
                    }
                }
                _self.td[i].onmouseout = function () {
                    this.className = this.className.replace("hover","")
                }
            }
            //点击切换月份
            _self.prevM.onclick =_self.nextM.onclick= function () {
                _self.changeMn(this);
                return this;
            }
            //点击切换年份
            _self.prevY.onclick = _self.nextY.onclick = function () {
                _self.changeYr(this);
                return this;
            }
        }
        //点击切换月份
        showDate.prototype.changeMn = function (obj) {
            var _self = this;
            var NewMn = parseInt(_self.mnBox.value, 10);
            
            var newYear = parseInt(_self.yearBox.value, 10);
            if (obj == _self.nextM) {
                NewMn++;
            } else {
                NewMn--;
            }
            if (NewMn < 1) {
                NewMn = 12;
                newYear -= 1;
            } else if (NewMn > 12) {
                NewMn = 1;
                newYear += 1;
            }
            _self.mnBox.value = NewMn;
            _self.showNow(newYear, NewMn);
        }
        //点击切换年份
        showDate.prototype.changeYr = function (obj) {
            var _self = this;
            var NewMn = parseInt(_self.mnBox.value, 10);
            var newYear = parseInt(_self.yearBox.value, 10);
            if (obj == _self.nextY) {
                newYear++;
            } else {
                newYear--;
            }
            if (newYear < 1900) {
                newYear = 1900;
            } else if (newYear > 2099) {
                newYear = 2099;
            }
            _self.mnBox.value = NewMn;
            _self.showNow(newYear, NewMn);
        }
        //文本框 清空初始值
        showDate.prototype.changeDefault = function (obj) {
            var _self = this;
            var deVal = obj.defaultValue;
            if (obj.value == deVal) {
                obj.value = "";
            }
        }
        //文本框 还原初始值
        showDate.prototype.changeDefault2 = function (obj) {
            var _self = this;
            var deVal = obj.defaultValue;
            if (obj.value.match(/^s{0}$/)) {
                obj.value = deVal;
            }
        }
        //显示日历
        showDate.prototype.show = function () {
            var _self = this;
            if (_self.dateBox.className.indexOf("dn") != -1) {
                var cls = _self.dateBox.className;
                _self.dateBox.className = cls.replace("dn", "");
            }
        }
        //隐藏日历
        showDate.prototype.hide = function (event, Target, obj) {
            var _self = this;
            var oPare = Target.parentNode;
            var isChild = true; //默认是子元素
            if (oPare == obj || Target == obj) {
                isChild = false;
            } else {
                loop: while (oPare != _self.obj) {
                    oPare = oPare.parentNode;
                    if (oPare == obj) {
                        isChild = false;
                        break loop;
                    }
                }
            }
            if (!isChild && _self.dateBox.className.indexOf("dn") == -1) {
                _self.dateBox.className += " ";
                _self.dateBox.className += "dn";
                _self.changeDefault2(_self.dateText);
            }
            
        }
        //填充年、月
        showDate.prototype.showNow = function (yr,mn) {
            var _self = this;
            var now = new Date();
            var year = yr || now.getFullYear();
            var month = mn-1 || now.getMonth();
            var dd = now.getDate();
            //填充 年 和 月
            _self.yearBox.value = year;
            _self.mnBox.value = mn || now.getMonth()+1;
            //填充日期
            _self.showAllDay(year, month, dd);
        }
        //填充当月的所有日期
        showDate.prototype.showAllDay = function (Yr, Mn, Dd) {
            var _self = this;
            var arr31 = [1, 3, 5, 7, 8, 10, 12];            
            var is31 = true;
            var newDd = new Date();  //根据传入的数值生成新的日期
            newDd.setFullYear(Yr,Mn,Dd);
            var year = newDd.getFullYear(),
                month = newDd.getMonth(),
                dd = newDd.getDate();
            var firstD = new Date();
            firstD.setFullYear(year, month, 1);
            var firstDay = firstD.getDay();
            var str31 = arr31.join(",");
            var regExp = eval("/" + (month + 1) + ",|," + (month + 1) + ",|," + (month + 1) + "/g");
            var dayLen = 31;
            //判断每个月有多少天
            if (str31.search(regExp) == -1) {
                dayLen = 30;
            }
            //清空日期
            for (var i = 0; i < _self.td.length; i++) {
                _self.td[i].innerHTML = "";
                _self.td[i].className = _self.td[i].className.replace("active", "");
            }
            //如果有31天
            for (var j = 0; j < dayLen; j++) {
                _self.td[j + firstDay].innerHTML = j + 1;
                if (j + 1 == dd && _self.td[j + firstDay].className.indexOf("active")==-1) {
                    _self.td[j + firstDay].className += " ";
                    _self.td[j + firstDay].className += "active";
                }
            }
        }
        //函数调用
        window.onload = function () {
            var showDate1 = new showDate({ id: "data_box" });
            showDate1.init();
        }
    </script>
</head>
<body>
    <div class="clearfix dome3_box">
        
        <div class="data_box" id="data_box">
            <input type="text"  class="showDate" value="点击选择日期" />
            <div class="sel_date dn">
                <div class="clearfix">
                    <span class="prev_y fl"><<</span><span class="prev_m fl"><</span>
                    <span class="next_y fr">>></span><span class="next_m fr">></span>
                    <div class="show_mn">
                        <input type="text" class="showDate2 year" value="选择年份" />
                        <span class="ml5 mr5">年</span>
                        <input type="text" class="showDate2 month" value="选择月份" />
                        <span class="ml5">月</span>
                    </div>                            </div>
        </div>
            </section>
    <section class="wrap-box">
        <div class="g-tit">
            <h2>相关文章</h2>
        </div>
        <ul class="s-list nobord notop">
                            <li>
                    <a href="/art-411742.htm" class="s-card">
                        <div class="s-card-l">
                            <p class="tit">绝区零嗷呜报刊亭刮刮卡奖励是什么 绝区零嗷呜报刊亭刮刮卡奖励介绍</p>
                            <div class="info">
                                <span class="person">游戏攻略</span>
                                <span class="time">2024-07-06</span>
                            </div>
                        </div>
                        <div class="s-card-pic">
                            <img src="/images/lazy.gif" data-src="/uploads/20240706/logo_6688f312b8f7e1.jpeg" alt="绝区零嗷呜报刊亭刮刮卡奖励是什么 绝区零嗷呜报刊亭刮刮卡奖励介绍" />
                        </div>
                    </a>
                </li>
                            <li>
                    <a href="/art-411741.htm" class="s-card">
                        <div class="s-card-l">
                            <p class="tit">绝区零耳聪目明奖章攻略 绝区零耳聪目明小卡格车位置大全</p>
                            <div class="info">
                                <span class="person">游戏攻略</span>
                                <span class="time">2024-07-06</span>
                            </div>
                        </div>
                        <div class="s-card-pic">
                            <img src="/images/lazy.gif" data-src="/uploads/20240706/logo_6688f3111ed231.jpeg" alt="绝区零耳聪目明奖章攻略 绝区零耳聪目明小卡格车位置大全" />
                        </div>
                    </a>
                </li>
                            <li>
                    <a href="/art-411740.htm" class="s-card">
                        <div class="s-card-l">
                            <p class="tit">原神妮露莎邦之息好看吗</p>
                            <div class="info">
                                <span class="person">游戏攻略</span>
                                <span class="time">2024-07-06</span>
                            </div>
                        </div>
                        <div class="s-card-pic">
                            <img src="/images/lazy.gif" data-src="/uploads/20240706/logo_6688ebf227e3f1.jpeg" alt="原神妮露莎邦之息好看吗" />
                        </div>
                    </a>
                </li>
                            <li>
                    <a href="/art-411738.htm" class="s-card">
                        <div class="s-card-l">
                            <p class="tit">绝区零嗷呜报刊亭刮刮卡奖励是什么</p>
                            <div class="info">
                                <span class="person">游戏攻略</span>
                                <span class="time">2024-07-06</span>
                            </div>
                        </div>
                        <div class="s-card-pic">
                            <img src="/images/lazy.gif" data-src="/uploads/20240706/logo_6688ebf0dbdce1.jpeg" alt="绝区零嗷呜报刊亭刮刮卡奖励是什么" />
                        </div>
                    </a>
                </li>
                            <li>
                    <a href="/art-411739.htm" class="s-card">
                        <div class="s-card-l">
                            <p class="tit">绝区零耳聪目明奖章攻略</p>
                            <div class="info">
                                <span class="person">游戏攻略</span>
                                <span class="time">2024-07-06</span>
                            </div>
                        </div>
                        <div class="s-card-pic">
                            <img src="/images/lazy.gif" data-src="/uploads/20240706/logo_6688ebf1751331.jpeg" alt="绝区零耳聪目明奖章攻略" />
                        </div>
                    </a>
                </li>
                            <li>
                    <a href="/art-411736.htm" class="s-card">
                        <div class="s-card-l">
                            <p class="tit">原神KFC联动怎么买</p>
                            <div class="info">
                                <span class="person">游戏攻略</span>
                                <span class="time">2024-07-06</span>
                            </div>
                        </div>
                        <div class="s-card-pic">
                            <img src="/images/lazy.gif" data-src="/uploads/20240706/logo_6688ebef9db061.jpeg" alt="原神KFC联动怎么买" />
                        </div>
                    </a>
                </li>
                    </ul>
    </section>
    <section class="wrap-box">
        <div class="g-tit">
            <h2>精彩推荐</h2>
        </div>
        <ul class="card-box">
                            <li class="card3">
                    <a href="/app/81737.htm" target="_self" class="figure">
                        <div class="figure-box">
                            <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20240520/logo_664b2066305bb1.jpg" alt="勇者突击队手游" />
                        </div>
                        <p class="figure-head">勇者突击队手游</p>
                        <span class="figure-btn">下载</span>
                    </a>
                </li>
                            <li class="card3">
                    <a href="/app/81446.htm" target="_self" class="figure">
                        <div class="figure-box">
                            <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20240519/logo_664950608b2441.png" alt="修真大师" />
                        </div>
                        <p class="figure-head">修真大师</p>
                        <span class="figure-btn">下载</span>
                    </a>
                </li>
                            <li class="card3">
                    <a href="/app/81443.htm" target="_self" class="figure">
                        <div class="figure-box">
                            <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20240518/logo_66484532a33661.png" alt="传奇农场游戏最新版" />
                        </div>
                        <p class="figure-head">传奇农场游戏最新版</p>
                        <span class="figure-btn">下载</span>
                    </a>
                </li>
                            <li class="card3">
                    <a href="/app/81439.htm" target="_self" class="figure">
                        <div class="figure-box">
                            <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20240518/logo_6647fee25a33c1.jpg" alt="虐杀原型游戏下载" />
                        </div>
                        <p class="figure-head">虐杀原型游戏下载</p>
                        <span class="figure-btn">下载</span>
                    </a>
                </li>
                    </ul>
        <ul class="card-box-b">
                            <li class="card10">
                    <a href="/app/82264.htm" target="_self" class="figure2">
                        <div class="figure-box">
                            <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20240524/logo_66506674dde781.png" alt="Police Sim 2022中文版" />
                        </div>
                        <div class="figure-cont">
                            <p class="figure-head">Police Sim 2022中文版</p>
                            <div class="figure-desc">
                                <span>模拟经营</span>
                                <span>Police Sim 2022中文版</span>
                            </div>
                            <div class="figure-desc">
                                <p>经典好玩的警车追捕游戏</p>
                            </div>
                        </div>
                        <span class="figure-btn">下载</span>
                    </a>
                </li>
                            <li class="card10">
                    <a href="/app/81438.htm" target="_self" class="figure2">
                        <div class="figure-box">
                            <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20240518/logo_6647f0db13af21.png" alt="武器店模拟器游戏下载" />
                        </div>
                        <div class="figure-cont">
                            <p class="figure-head">武器店模拟器游戏下载</p>
                            <div class="figure-desc">
                                <span>模拟经营</span>
                                <span>武器店模拟器游戏下载</span>
                            </div>
                            <div class="figure-desc">
                                <p>武器店模拟器作为一款内容设计很有想法的经营武器店手游</p>
                            </div>
                        </div>
                        <span class="figure-btn">下载</span>
                    </a>
                </li>
                            <li class="card10">
                    <a href="/app/81402.htm" target="_self" class="figure2">
                        <div class="figure-box">
                            <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20240517/logo_6646e5a96271b1.jpg" alt="爆改庄园免费正版" />
                        </div>
                        <div class="figure-cont">
                            <p class="figure-head">爆改庄园免费正版</p>
                            <div class="figure-desc">
                                <span>模拟经营</span>
                                <span>爆改庄园免费正版</span>
                            </div>
                            <div class="figure-desc">
                                <p>自由设计一个全新的庄园。</p>
                            </div>
                        </div>
                        <span class="figure-btn">下载</span>
                    </a>
                </li>
                            <li class="card10">
                    <a href="/app/81170.htm" target="_self" class="figure2">
                        <div class="figure-box">
                            <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20240516/logo_66458614967631.png" alt="大繁盛饱腹市场汉化版" />
                        </div>
                        <div class="figure-cont">
                            <p class="figure-head">大繁盛饱腹市场汉化版</p>
                            <div class="figure-desc">
                                <span>模拟经营</span>
                                <span>大繁盛饱腹市场汉化版</span>
                            </div>
                            <div class="figure-desc">
                                <p>大繁盛饱腹市场作为一款全新的美食手游</p>
                            </div>
                        </div>
                        <span class="figure-btn">下载</span>
                    </a>
                </li>
                            <li class="card10">
                    <a href="/app/81167.htm" target="_self" class="figure2">
                        <div class="figure-box">
                            <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20240516/logo_664577f41b4ad1.png" alt="恋爱通告安卓下载" />
                        </div>
                        <div class="figure-cont">
                            <p class="figure-head">恋爱通告安卓下载</p>
                            <div class="figure-desc">
                                <span>模拟经营</span>
                                <span>恋爱通告安卓下载</span>
                            </div>
                            <div class="figure-desc">
                                <p>恋爱通告作为一款超级好玩有趣的休闲模拟经营游戏</p>
                            </div>
                        </div>
                        <span class="figure-btn">下载</span>
                    </a>
                </li>
                    </ul>
    </section>
    <footer class="foot">
    <a href="/" class="logo-icon">
        <img src="/mobile/images/logo2.png" alt="一聚教程网">
    </a>
    <p>Copyright © 2010-2022</p>
    <p>111cn.net All Rights Reserved</p>

</footer>
<script>
    var advData = {"img_fixed_pc_adv":"https:\/\/img.111cn.net\/uploads\/20240509\/663c2e9729f58.jpg","img_fixed_mob_adv":"https:\/\/img.111cn.net\/uploads\/20240509\/663c2e8793225.jpg","url_adv":"http:\/\/shop.hushen.cn\/shop\/c\/baojianpin.html","str_adv":"\u864e\u795e\u5546\u57ce\uff1a\u5173\u7231\u7537\u6027\uff0c\u66f4\u61c2\u7537\u4eba\u3002\u89e3\u51b3\u5927\u4f17\u7684\u7537\u8a00\u4e4b\u9690","img_popup_adv":"https:\/\/img.111cn.net\/uploads\/20240509\/663c2e748238d.png","pc_show_img":"2","pc_show_popup":"2","pc_show_video":"2","mob_show_img":"2","mob_show_popup":"2","mob_show_video":"2","close_adv":"https:\/\/img.111cn.net\/uploads\/20240508\/663b20650801e.png","video_adv":"\/pc\/images\/pc-adv.mp4"};
</script>
<script src="/jspc/funcmob.js" type="text/javascript"></script>

<script async src="https://www.googletagmanager.com/gtag/js?id=G-DSRRGRV1TL"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

gtag('config', 'G-DSRRGRV1TL');
</script>    <div class="back-top" style="display: block;">
        <span class="icon-box">
            <svg class="icon" viewBox="0 0 1024 1024">
                <path d="M213.333333 640h170.666667v256h256v-256h170.666667l-298.666667-341.333333zM170.666667 128h682.666666v85.333333H170.666667z" fill="#0374f3"></path>
            </svg>
        </span>
    </div>
</div>
<script src="/js/stat.js"></script>
</body>
</html>