原生js仿百度日期带农历的日历代码下载



115 456 153



特效描述:原生js仿百度日期 带农历的日历代码,纯JS百度日历代码,带农历的日历下载。

代码结构

1. HTML代码

<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>  
    百度的Js日历,值得一看  
</title>  
<table cellpadding="0" cellspacing="0" id="1">  
    <tr>  
        <td>  
            <style>  
                body,td,.p1,.p2,.i{font-family:arial} body{margin:6px 0 0 0;background-color:#fff;color:#000;}  
                table{border:0} #cal{width:434px;border:1px solid #c3d9ff;font-size:12px;margin:8px  
                0 0 15px} #cal #top{height:29px;line-height:29px;background:#e7eef8;color:#003784;padding-left:70px}  
                #cal #top select{font-size:12px} #cal #top input{padding:0} #cal ul#wk{margin:0;padding:0;height:25px}  
                #cal ul#wk li{float:left;width:60px;text-align:center;line-height:25px;list-style:none}  
                #cal ul#wk li b{font-weight:normal;color:#c60b02} #cal #cm{clear:left;border-top:1px  
                solid #ddd;border-bottom:1px dotted #ddd;position:relative} #cal #cm .cell{position:absolute;width:42px;height:36px;text-align:center;margin:0  
                0 0 9px} #cal #cm .cell .so{font:bold 16px arial;} #cal #bm{text-align:right;height:24px;line-height:24px;padding:0  
                13px 0 0} #cal #bm a{color:7977ce} #cal #fd{display:none;position:absolute;border:1px  
                solid #dddddf;background:#feffcd;padding:10px;line-height:21px;width:150px}  
                #cal #fd b{font-weight:normal;color:#c60a00}  
            </style>  
            <!--[if IE]>  
                <style>  
                    #cal #top{padding-top:4px} #cal #top input{width:65px} #cal #fd{width:170px}  
                </style>  
            <![endif]-->  
            <div id="cal">  
                <div id="top">  
                    公元  
                    <select>  
                    </select>  
                    年  
                    <select>  
                    </select>  
                    月 农历  
                    <span>  
                    </span>  
                    年 [  
                    <span>  
                    </span>  
                    年 ]  
                    <input type="button" value="回到今天" title="点击后跳转回今天" style="padding:0px">  
                </div>  
                <ul id="wk">  
                    <li>  
                        一  
                    </li>  
                    <li>  
                        二  
                    </li>  
                    <li>  
                        三  
                    </li>  
                    <li>  
                        四  
                    </li>  
                    <li>  
                        五  
                    </li>  
                    <li>  
                        <b>  
                            六  
                        </b>  
                    </li>  
                    <li>  
                        <b>  
                            日  
                        </b>  
                    </li>  
                </ul>  
                <div id="cm">  
                </div>  
                <div id="bm">  
                </div>  
            </div>  
        </td>  
    </tr>  
</table>  
<script type="text/javascript">  
(function() {  
        var S = navigator.userAgent.indexOf("MSIE") != -1 && !window.opera;  
        function M(C) {  
            return document.getElementById(C)  
        }  
        function R(C) {  
            return document.createElement(C)  
        }  
        var P = [19416, 19168, 42352, 21717, 53856, 55632, 91476, 22176, 39632, 21970, 19168, 42422, 42192, 53840, 119381, 46400, 54944, 44450, 38320, 84343, 18800, 42160, 46261, 27216, 27968, 109396, 11104, 38256, 21234, 18800, 25958, 54432, 59984, 28309, 23248, 11104, 100067, 37600, 116951, 51536, 54432, 120998, 46416, 22176, 107956, 9680, 37584, 53938, 43344, 46423, 27808, 46416, 86869, 19872, 42448, 83315, 21200, 43432, 59728, 27296, 44710, 43856, 19296, 43748, 42352, 21088, 62051, 55632, 23383, 22176, 38608, 19925, 19152, 42192, 54484, 53840, 54616, 46400, 46496, 103846, 38320, 18864, 43380, 42160, 45690, 27216, 27968, 44870, 43872, 38256, 19189, 18800, 25776, 29859, 59984, 27480, 21952, 43872, 38613, 37600, 51552, 55636, 54432, 55888, 30034, 22176, 43959, 9680, 37584, 51893, 43344, 46240, 47780, 44368, 21977, 19360, 42416, 86390, 21168, 43312, 31060, 27296, 44368, 23378, 19296, 42726, 42208, 53856, 60005, 54576, 23200, 30371, 38608, 19415, 19152, 42192, 118966, 53840, 54560, 56645, 46496, 22224, 21938, 18864, 42359, 42160, 43600, 111189, 27936, 44448];  
        var K = "甲乙丙丁戊己庚辛壬癸";  
        var J = "子丑寅卯辰巳午未申酉戌亥";  
        var O = "鼠牛虎兔龙蛇马羊猴鸡狗猪";  
        var L = ["小寒", "大寒", "立春", "雨水", "惊蛰", "春分", "清明", "谷雨", "立夏", "小满", "芒种", "夏至", "小暑", "大暑", "立秋", "处暑", "白露", "秋分", "寒露", "霜降", "立冬", "小雪", "大雪", "冬至"];  
        var D = [0, 21208, 43467, 63836, 85337, 107014, 128867, 150921, 173149, 195551, 218072, 240693, 263343, 285989, 308563, 331033, 353350, 375494, 397447, 419210, 440795, 462224, 483532, 504758];  
        var B = "日一二三四五六七八九十";  
        var H = ["正", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "腊"];  
        var E = "初十廿卅";  
        var V = {  
            "0101": "*1元旦节",  
            "0214": "情人节",  
            "0305": "学雷锋纪念日",  
            "0308": "妇女节",  
            "0312": "植树节",  
            "0315": "消费者权益日",  
            "0401": "愚人节",  
            "0501": "*1劳动节",  
            "0504": "青年节",  
            "0601": "国际儿童节",  
            "0701": "中国共产党诞辰",  
            "0801": "建军节",  
            "0910": "中国教师节",  
            "1001": "*3国庆节",  
            "1224": "平安夜",  
            "1225": "圣诞节"  
        };  
        var T = {  
            "0101": "*2春节",  
            "0115": "元宵节",  
            "0505": "*1端午节",  
            "0815": "*1中秋节",  
            "0909": "重阳节",  
            "1208": "腊八节",  
            "0100": "除夕"  
        };  
        function U(Y) {  
            function c(j, i) {  
                var h = new Date((31556925974.7 * (j - 1900) + D[i] * 60000) + Date.UTC(1900, 0, 6, 2, 5));  
                return (h.getUTCDate())  
            }  
            function d(k) {  
                var h, j = 348;  
                for (h = 32768; h > 8; h >>= 1) {  
                    j += (P[k - 1900] & h) ? 1 : 0  
                }  
                return (j + b(k))  
            }  
            function a(h) {  
                return (K.charAt(h % 10) + J.charAt(h % 12))  
            }  
            function b(h) {  
                if (g(h)) {  
                    return ((P[h - 1900] & 65536) ? 30 : 29)  
                } else {  
                    return (0)  
                }  
            }  
            function g(h) {  
                return (P[h - 1900] & 15)  
            }  
            function e(i, h) {  
                return ((P[i - 1900] & (65536 >> h)) ? 30 : 29)  
            }  
            function C(m) {  
                var k, j = 0,  
                h = 0;  
                var l = new Date(1900, 0, 31);  
                var n = (m - l) / 86400000;  
                this.dayCyl = n + 40;  
                this.monCyl = 14;  
                for (k = 1900; k < 2050 && n > 0; k++) {  
                    h = d(k);  
                    n -= h;  
                    this.monCyl += 12  
                }  
                if (n < 0) {  
                    n += h;  
                    k--;  
                    this.monCyl -= 12  
                }  
                this.year = k;  
                this.yearCyl = k - 1864;  
                j = g(k);  
                this.isLeap = false;  
                for (k = 1; k < 13 && n > 0; k++) {  
                    if (j > 0 && k == (j + 1) && this.isLeap == false) {--k;  
                        this.isLeap = true;  
                        h = b(this.year)  
                    } else {  
                        h = e(this.year, k)  
                    }  
                    if (this.isLeap == true && k == (j + 1)) {  
                        this.isLeap = false  
                    }  
                    n -= h;  
                    if (this.isLeap == false) {  
                        this.monCyl++  
                    }  
                }  
                if (n == 0 && j > 0 && k == j + 1) {  
                    if (this.isLeap) {  
                        this.isLeap = false  
                    } else {  
                        this.isLeap = true; --k; --this.monCyl  
                    }  
                }  
                if (n < 0) {  
                    n += h; --k; --this.monCyl  
                }  
                this.month = k;  
                this.day = n + 1  
            }  
            function G(h) {  
                return h < 10 ? "0" + h: h  
            }  
            function f(i, j) {  
                var h = i;  
                return j.replace(/dd?d?d?|MM?M?M?|yy?y?y?/g,  
                function(k) {  
                    switch (k) {  
                    case "yyyy":  
                        var l = "000" + h.getFullYear();  
                        return l.substring(l.length - 4);  
                    case "dd":  
                        return G(h.getDate());  
                    case "d":  
                        return h.getDate().toString();  
                    case "MM":  
                        return G((h.getMonth() + 1));  
                    case "M":  
                        return h.getMonth() + 1  
                    }  
                })  
            }  
            function Z(i, h) {  
                var j;  
                switch (i, h) {  
                case 10:  
                    j = "初十";  
                    break;  
                case 20:  
                    j = "二十";  
                    break;  
                case 30:  
                    j = "三十";  
                    break;  
                default:  
                    j = E.charAt(Math.floor(h / 10));  
                    j += B.charAt(h % 10)  
                }  
                return (j)  
            }  
            this.date = Y;  
            this.isToday = false;  
            this.isRestDay = false;  
            this.solarYear = f(Y, "yyyy");  
            this.solarMonth = f(Y, "M");  
            this.solarDate = f(Y, "d");  
            this.solarWeekDay = Y.getDay();  
            this.solarWeekDayInChinese = "星期" + B.charAt(this.solarWeekDay);  
            var X = new C(Y);  
            this.lunarYear = X.year;  
            this.shengxiao = O.charAt((this.lunarYear - 4) % 12);  
            this.lunarMonth = X.month;  
            this.lunarIsLeapMonth = X.isLeap;  
            this.lunarMonthInChinese = this.lunarIsLeapMonth ? "闰" + H[X.month - 1] : H[X.month - 1];  
            this.lunarDate = X.day;  
            this.showInLunar = this.lunarDateInChinese = Z(this.lunarMonth, this.lunarDate);  
            if (this.lunarDate == 1) {  
                this.showInLunar = this.lunarMonthInChinese + "月"  
            }  
            this.ganzhiYear = a(X.yearCyl);  
            this.ganzhiMonth = a(X.monCyl);  
            this.ganzhiDate = a(X.dayCyl++);  
            this.jieqi = "";  
            this.restDays = 0;  
            if (c(this.solarYear, (this.solarMonth - 1) * 2) == f(Y, "d")) {  
                this.showInLunar = this.jieqi = L[(this.solarMonth - 1) * 2]  
            }  
            if (c(this.solarYear, (this.solarMonth - 1) * 2 + 1) == f(Y, "d")) {  
                this.showInLunar = this.jieqi = L[(this.solarMonth - 1) * 2 + 1]  
            }  
            if (this.showInLunar == "清明") {  
                this.showInLunar = "清明节";  
                this.restDays = 1  
            }  
            this.solarFestival = V[f(Y, "MM") + f(Y, "dd")];  
            if (typeof this.solarFestival == "undefined") {  
                this.solarFestival = ""  
            } else {  
                if (/\*(\d)/.test(this.solarFestival)) {  
                    this.restDays = parseInt(RegExp.$1);  
                    this.solarFestival = this.solarFestival.replace(/\*\d/, "")  
                }  
            }  
            this.showInLunar = (this.solarFestival == "") ? this.showInLunar: this.solarFestival;  
            this.lunarFestival = T[this.lunarIsLeapMonth ? "00": G(this.lunarMonth) + G(this.lunarDate)];  
            if (typeof this.lunarFestival == "undefined") {  
                this.lunarFestival = ""  
            } else {  
                if (/\*(\d)/.test(this.lunarFestival)) {  
                    this.restDays = (this.restDays > parseInt(RegExp.$1)) ? this.restDays: parseInt(RegExp.$1);  
                    this.lunarFestival = this.lunarFestival.replace(/\*\d/, "")  
                }  
            }  
            if (this.lunarMonth == 12 && this.lunarDate == e(this.lunarYear, 12)) {  
                this.lunarFestival = T["0100"];  
                this.restDays = 1  
            }  
            this.showInLunar = (this.lunarFestival == "") ? this.showInLunar: this.lunarFestival;  
            this.showInLunar = (this.showInLunar.length > 4) ? this.showInLunar.substr(0, 2) + "...": this.showInLunar  
        }  
        var Q = (function() {  
            var X = {};  
            X.lines = 0;  
            X.dateArray = new Array(42);  
            function Y(a) {  
                return (((a % 4 === 0) && (a % 100 !== 0)) || (a % 400 === 0))  
            }  
            function G(a, b) {  
                return [31, (Y(a) ? 29 : 28), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][b]  
            }  
            function C(a, b) {  
                a.setDate(a.getDate() + b);  
                return a  
            }  
            function Z(a) {  
                var f = 0;  
                var c = new U(new Date(a.solarYear, a.solarMonth - 1, 1));  
                var d = (c.solarWeekDay - 1 == -1) ? 6 : c.solarWeekDay - 1;  
                X.lines = Math.ceil((d + G(a.solarYear, a.solarMonth - 1)) / 7);  
                for (var e = 0; e < X.dateArray.length; e++) {  
                    if (c.restDays != 0) {  
                        f = c.restDays  
                    }  
                    if (f > 0) {  
                        c.isRest = true  
                    }  
                    if (d-->0 || c.solarMonth != a.solarMonth) {  
                        X.dateArray[e] = null;  
                        continue  
                    }  
                    var b = new U(new Date());  
                    if (c.solarYear == b.solarYear && c.solarMonth == b.solarMonth && c.solarDate == b.solarDate) {  
                        c.isToday = true  
                    }  
                    X.dateArray[e] = c;  
                    c = new U(C(c.date, 1));  
                    f--  
                }  
            }  
            return {  
                init: function(a) {  
                    Z(a)  
                },  
                getJson: function() {  
                    return X  
                }  
            }  
        })();  
        var W = (function() {  
            var C = M("top").getElementsByTagName("SELECT")[0];  
            var X = M("top").getElementsByTagName("SELECT")[1];  
            var G = M("top").getElementsByTagName("SPAN")[0];  
            var c = M("top").getElementsByTagName("SPAN")[1];  
            var Y = M("top").getElementsByTagName("INPUT")[0];  
            function a(g) {  
                G.innerHTML = g.ganzhiYear;  
                c.innerHTML = g.shengxiao  
            }  
            function b(g) {  
                C[g.solarYear - 1901].selected = true;  
                X[g.solarMonth - 1].selected = true  
            }  
            function f() {  
                var j = C.value;  
                var g = X.value;  
                var i = new U(new Date(j, g - 1, 1));  
                Q.init(i);  
                N.draw();  
                if (this == C) {  
                    i = new U(new Date(j, 3, 1));  
                    G.innerHTML = i.ganzhiYear;  
                    c.innerHTML = i.shengxiao  
                }  
                var h = new U(new Date());  
                Y.style.visibility = (j == h.solarYear && g == h.solarMonth) ? "hidden": "visible"  
            }  
            function Z() {  
                var g = new U(new Date());  
                a(g);  
                b(g);  
                Q.init(g);  
                N.draw();  
                Y.style.visibility = "hidden"  
            }  
            function d(k, g) {  
                for (var j = 1901; j < 2050; j++) {  
                    var h = R("OPTION");  
                    h.value = j;  
                    h.innerHTML = j;  
                    if (j == k) {  
                        h.selected = "selected"  
                    }  
                    C.appendChild(h)  
                }  
                for (var j = 1; j < 13; j++) {  
                    var h = R("OPTION");  
                    h.value = j;  
                    h.innerHTML = j;  
                    if (j == g) {  
                        h.selected = "selected"  
                    }  
                    X.appendChild(h)  
                }  
                C.onchange = f;  
                X.onchange = f  
            }  
            function e(g) {  
                d(g.solarYear, g.solarMonth);  
                G.innerHTML = g.ganzhiYear;  
                c.innerHTML = g.shengxiao;  
                Y.onclick = Z;  
                Y.style.visibility = "hidden"  
            }  
            return {  
                init: function(g) {  
                    e(g)  
                },  
                reset: function(g) {  
                    b(g)  
                }  
            }  
        })();  
        var N = (function() {  
            function C() {  
                var Z = Q.getJson();  
                var c = Z.dateArray;  
                M("cm").style.height = Z.lines * 38 + 2 + "px";  
                M("cm").innerHTML = "";  
                for (var a = 0; a < c.length; a++) {  
                    if (c[a] == null) {  
                        continue  
                    }  
                    var X = R("DIV");  
                    if (c[a].isToday) {  
                        X.style.border = "1px solid #a5b9da";  
                        X.style.background = "#c1d9ff"  
                    }  
                    X.className = "cell";  
                    X.style.left = (a % 7) * 60 + "px";  
                    X.style.top = Math.floor(a / 7) * 38 + 2 + "px";  
                    var b = R("DIV");  
                    b.className = "so";  
                    // http://www.codefans.net  
                    b.style.color = ((a % 7) > 4 || c[a].isRest) ? "#c60b02": "#313131";  
                    b.innerHTML = c[a].solarDate;  
                    X.appendChild(b);  
                    var Y = R("DIV");  
                    Y.style.color = "#666";  
                    Y.innerHTML = c[a].showInLunar;  
                    X.appendChild(Y);  
                    X.onmouseover = (function(d) {  
                        return function(f) {  
                            F.show({  
                                dateIndex: d,  
                                cell: this  
                            })  
                        }  
                    })(a);  
                    X.onmouseout = function() {  
                        F.hide()  
                    };  
                    X.onmouseup = function() {  
                        //alert('a');
                    };  
                    M("cm").appendChild(X)  
                }  
                var G = R("DIV");  
                G.id = "fd";  
                M("cm").appendChild(G);  
                F.init(G)  
            }  
            return {  
                draw: function(G) {  
                    C(G)  
                }  
            }  
        })();  
        var F = (function() {  
            var C;  
            function Y(e, c) {  
                if (arguments.length > 1) {  
                    var b = /([.*+?^=!:${}()|[\]\/\\])/g,  
                    Z = "{".replace(b, "\\$1"),  
                    d = "}".replace(b, "\\$1");  
                    var a = new RegExp("#" + Z + "([^" + Z + d + "]+)" + d, "g");  
                    if (typeof(c) == "object") {  
                        return e.replace(a,  
                        function(f, h) {  
                            var g = c[h];  
                            return typeof(g) == "undefined" ? "": g  
                        })  
                    }  
                }  
                return e  
            }  
            function G(b) {  
                var a = Q.getJson().dateArray[b.dateIndex];  
                var Z = b.cell;  
                var c = "#{solarYear} 年 #{solarMonth} 月 #{solarDate} 日 #{solarWeekDayInChinese}";  
                c += "<br><b>农历 #{lunarMonthInChinese}月#{lunarDateInChinese}</b>";  
                c += "<br>#{ganzhiYear}年 #{ganzhiMonth}月 #{ganzhiDate}日";  
                if (a.solarFestival != "" || a.lunarFestival != "" || a.jieqi != "") {  
                    c += "<br><b>#{lunarFestival} #{solarFestival} #{jieqi}</b>"  
                }  
                C.innerHTML = Y(c, a);  
                C.style.top = Z.offsetTop + Z.offsetHeight - 5 + "px";  
                C.style.left = Z.offsetLeft + Z.offsetWidth - 5 + "px";  
                C.style.display = "block"  
            }  
            function X() {  
                C.style.display = "none"  
            }  
            return {  
                show: function(Z) {  
                    G(Z)  
                },  
                hide: function() {  
                    X()  
                },  
                init: function(Z) {  
                    C = Z  
                }  
            }  
        })();  
        var A = new U(new Date());  
        if (S) {  
            window.attachEvent("onload",  
            function() {  
                W.reset(A)  
            })  
        }  
        W.init(A);  
        Q.init(A);  
        N.draw();  
    })();  
</script> 



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 右键菜单 时间轴 图片头像上传 文字提示框 日历选择器 文件上传 提示框/弹出层 时间日期插件 文本框 layer 下拉框 lightbox 复选 单选 Tooltip工具提示框 登录框 浮动提示框 注册框 html5弹窗动画 搜索框 验证码 二级联动 三级联动 城市选择 value赋值 筛选 按钮控制 购物车 颜色选择 表单提交 全选/反选 添加删除 添加标签 密码强度验证 表单验证 html5按钮动画 按钮样式 密码修改设置 弹出层拖动 窗口提示框 切换按钮 日历日期时间 form表单

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到