编程 Javascript

js实现带农历和八字等信息的日历特效

Posted in Javascript onMay 16, 2016

自己也尝试着做了一下，收获蛮大，掌握了js日历特效的实现原理后，再想增加更多的功能，完全就可以自由发挥了，先在这里分享一下吧，有兴趣的可以试试！

本文实例为大家分享了js实现带农历等信息的日历特效，代码量很大，供大家参考，具体内容如下

效果图：

js实现带农历和八字等信息的日历特效

实现代码：

<HTML>

  <HEAD>
    <TITLE>万年历</TITLE>
    <META content="农历; 阳历; 月历; 节日; 时区; 节气; 八字; 干支; 生肖; gregorian solar; chinese lunar; calendar;" name=keywords>
    <META content=All name=robots>
    <META content="gregorian solar calendar and chinese lunar calendar" name=description>
    <meta charset="UTF-8"/>
    <style type="text/css">
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>

  <body>
    <center><br>
      <table cellpadding="0" cellspacing="0" id="1">
        <tr>
          <td>
            <style>
              #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: 30px;
              }

              #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"><a target="_blank" onmousedown="return c({'fm':'alop','title':this.innerHTML,'url':this.href,'p1':al_c(this),'p2':1})" href="javascript:void(0)">历史上的今天</a></div>
            </div>
          </td>
        </tr>
      </table>
    </center>
  </body>
  <script language="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 = [0x04bd8, 0x04ae0, 0x0a570, 0x054d5, 0x0d260, 0x0d950, 0x16554, 0x056a0, 0x09ad0, 0x055d2, 0x04ae0, 0x0a5b6, 0x0a4d0, 0x0d250, 0x1d255, 0x0b540, 0x0d6a0, 0x0ada2, 0x095b0, 0x14977, 0x04970, 0x0a4b0, 0x0b4b5, 0x06a50, 0x06d40, 0x1ab54, 0x02b60, 0x09570, 0x052f2, 0x04970, 0x06566, 0x0d4a0, 0x0ea50, 0x06e95, 0x05ad0, 0x02b60, 0x186e3, 0x092e0, 0x1c8d7, 0x0c950, 0x0d4a0, 0x1d8a6, 0x0b550, 0x056a0, 0x1a5b4, 0x025d0, 0x092d0, 0x0d2b2, 0x0a950, 0x0b557, 0x06ca0, 0x0b550, 0x15355, 0x04da0, 0x0a5b0, 0x14573, 0x052b0, 0x0a9a8, 0x0e950, 0x06aa0, 0x0aea6, 0x0ab50, 0x04b60, 0x0aae4, 0x0a570, 0x05260, 0x0f263, 0x0d950, 0x05b57, 0x056a0, 0x096d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x0d4d4, 0x0d250, 0x0d558, 0x0b540, 0x0b6a0, 0x195a6, 0x095b0, 0x049b0, 0x0a974, 0x0a4b0, 0x0b27a, 0x06a50, 0x06d40, 0x0af46, 0x0ab60, 0x09570, 0x04af5, 0x04970, 0x064b0, 0x074a3, 0x0ea50, 0x06b58, 0x055c0, 0x0ab60, 0x096d5, 0x092e0, 0x0c960, 0x0d954, 0x0d4a0, 0x0da50, 0x07552, 0x056a0, 0x0abb7, 0x025d0, 0x092d0, 0x0cab5, 0x0a950, 0x0b4a0, 0x0baa4, 0x0ad50, 0x055d9, 0x04ba0, 0x0a5b0, 0x15176, 0x052b0, 0x0a930, 0x07954, 0x06aa0, 0x0ad50, 0x05b52, 0x04b60, 0x0a6e6, 0x0a4e0, 0x0d260, 0x0ea65, 0x0d530, 0x05aa0, 0x076a3, 0x096d0, 0x04bd7, 0x04ad0, 0x0a4d0, 0x1d0b6, 0x0d250, 0x0d520, 0x0dd45, 0x0b5a0, 0x056d0, 0x055b2, 0x049b0, 0x0a577, 0x0a4b0, 0x0aa50, 0x1b255, 0x06d20, 0x0ada0, 0x14b63];
  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";
        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()
        };
        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 I = (function() {
    var G = M("bm").getElementsByTagName("A")[0];

    function C(X) {
      G.href = "http://zh.wikipedia.org/zh-cn/" + X.solarMonth + "%E6%9C%88" + X.solarDate + "%E6%97%A5"
    }
    return {
      setLink: function(X) {
        C(X)
      }
    }
  })();
  var A = new U(new Date());
  if (S) {
    window.attachEvent("onload", function() {
      W.reset(A)
    })
  }
  W.init(A);
  Q.init(A);
  N.draw();
  I.setLink(A)
})();
//--></script>

</html>

以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。

js实现带农历和八字等信息的日历特效

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript编程起步（第三课）

Feb 27 Javascript

jQuery中与toggleClass等价的程序段以及未来学习的方向

Mar 18 Javascript

使用phantomjs进行网页抓取的实现代码

Sep 29 Javascript

Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结

Apr 15 Javascript

jQuery实现简单的列表式导航菜单效果代码

Aug 31 Javascript

如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)

Oct 29 Javascript

JavaScript调用传递变量参数的相关问题及解决办法

Nov 01 Javascript

jquery+json实现分页效果

Mar 07 Javascript

使用vue与jquery实时监听用户输入状态的操作代码

Sep 19 jQuery

H5实现仿flash效果的实现代码

Sep 29 Javascript

vue使用element-ui的el-input监听不了回车事件的解决方法

Jan 12 Javascript

vue backtop组件的实现完整代码

Apr 07 Vue.js

jQuery 常用代码集锦(必看篇)

May 16 #Javascript

阻止表单提交按钮多次提交的完美解决方法

May 16 #Javascript

js判断登陆用户名及密码是否为空的简单实例

May 16 #Javascript

javascript实现起伏的水波背景效果

May 16 #Javascript

JavaScript判断用户名和密码不能为空的实现代码

May 16 #Javascript

JS闭包、作用域链、垃圾回收、内存泄露相关知识小结

May 16 #Javascript

js流动式效果显示当前系统时间

May 16 #Javascript