首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

javascript实现日历效果

Posted in Javascript onJune 17, 2019

本文实例为大家分享了js实现日历效果的具体代码，供大家参考，具体内容如下

javascript实现日历效果

<!doctype html>
<html>
<head>
  <meta charset="gb2312">
  <title>万年历</title>
  <script type="text/javascript">
    var lunarInfo = new Array(
      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, 0x0a5d0, 0x14573, 0x052d0, 0x0a9a8, 0x0e950, 0x06aa0,
      0x0aea6, 0x0ab50, 0x04b60, 0x0aae4, 0x0a570, 0x05260, 0x0f263, 0x0d950, 0x05b57, 0x056a0,
      0x096d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x0d4d4, 0x0d250, 0x0d558, 0x0b540, 0x0b5a0, 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)
 
    var solarMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
    var Animals = new Array("鼠", "牛", "虎", "兔", "龙", "蛇", "马", "羊", "猴", "鸡", "狗", "猪");
    var solarTerm = new Array("小寒", "大寒", "立春", "雨水", "惊蛰", "春分", "清明", "谷雨", "立夏", "小满", "芒种", "夏至", "小暑", "大暑", "立秋", "处暑", "白露", "秋分", "寒露", "霜降", "立冬", "小雪", "大雪", "冬至");
    var sTermInfo = new Array(0, 21208, 42467, 63836, 85337, 107014, 128867, 150921, 173149, 195551, 218072, 240693, 263343, 285989, 308563, 331033, 353350, 375494, 397447, 419210, 440795, 462224, 483532, 504758);
    var nStr1 = new Array('日', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十');
    var nStr2 = new Array('初', '十', '廿', '卅');
    //公历节日
    var sFtv = new Array(
      "0101 元旦",
      "0214 情人节",
      "0308 妇女节",
      "0312 植树节",
      "0315 消费者权益日",
      "0401 愚人节",
      "0501 劳动节",
      "0504 青年节",
      "0512 护士节",
      "0601 儿童节",
      "0701 建党节",
      "0801 建军节",
      "0910 教师节",
      "0928 孔子诞辰",
      "1001 国庆节",
      "1006 老人节",
      "1024 联合国日",
      "1224 平安夜",
      "1225 圣诞节")
    //农历节日
    var lFtv = new Array(
      "0101 春节",
      "0115 元宵节",
      "0505 端午节",
      "0707 七夕情人节",
      "0715 中元节",
      "0815 中秋节",
      "0909 重阳节",
      "1208 腊八节",
      "1224 小年")
    //返回农历y年的总天数
    function lYearDays(y) {
      var i, sum = 348;
      for (i = 0x8000; i > 0x8; i >>= 1) sum += (lunarInfo[y - 1900] & i) ? 1 : 0;
      return (sum + leapDays(y));
    }
    //返回农历y年闰月的天数
    function leapDays(y) {
      if (leapMonth(y)) return ((lunarInfo[y - 1900] & 0x10000) ? 30 : 29);
      else return (0);
    }
    //判断y年的农历中那个月是闰月,不是闰月返回0
    function leapMonth(y) {
      return (lunarInfo[y - 1900] & 0xf);
    }
    //返回农历y年m月的总天数
    function monthDays(y, m) {
      return ((lunarInfo[y - 1900] & (0x10000 >> m)) ? 30 : 29);
    }
    //算出当前月第一天的农历日期和当前农历日期下一个月农历的第一天日期
    function Dianaday(objDate) {
      var i, leap = 0, temp = 0;
      var baseDate = new Date(1900, 0, 31);
      var offset = (objDate - baseDate) / 86400000;
      this.dayCyl = offset + 40;
      this.monCyl = 14;
      for (i = 1900; i < 2050 && offset > 0; i++) {
        temp = lYearDays(i)
        offset -= temp;
        this.monCyl += 12;
      }
      if (offset < 0) {
        offset += temp;
        i--;
        this.monCyl -= 12;
      }
      this.year = i;
      this.yearCyl = i - 1864;
      leap = leapMonth(i); //闰哪个月
      this.isLeap = false;
      for (i = 1; i < 13 && offset > 0; i++) {
        if (leap > 0 && i == (leap + 1) && this.isLeap == false) { //闰月
          --i; this.isLeap = true; temp = leapDays(this.year);
        }
        else {
          temp = monthDays(this.year, i);
        }
        if (this.isLeap == true && i == (leap + 1)) this.isLeap = false; //解除闰月
        offset -= temp;
        if (this.isLeap == false) this.monCyl++;
      }
      if (offset == 0 && leap > 0 && i == leap + 1)
        if (this.isLeap) { this.isLeap = false; }
        else { this.isLeap = true; --i; --this.monCyl; }
      if (offset < 0) { offset += temp; --i; --this.monCyl; }
      this.month = i;
      this.day = offset + 1;
    }
    //返回公历y年m+1月的天数
    function solarDays(y, m) {
      if (m == 1)
        return (((y % 4 == 0) && (y % 100 != 0) || (y % 400 == 0)) ? 29 : 28);
      else
        return (solarMonth[m]);
    }
    //记录公历和农历某天的日期
    function calElement(sYear, sMonth, sDay, week, lYear, lMonth, lDay, isLeap) {
      this.isToday = false;
      //公历
      this.sYear = sYear;
      this.sMonth = sMonth;
      this.sDay = sDay;
      this.week = week;
      //农历
      this.lYear = lYear;
      this.lMonth = lMonth;
      this.lDay = lDay;
      this.isLeap = isLeap;
      //节日记录
      this.lunarFestival = ''; //农历节日
      this.solarFestival = ''; //公历节日
      this.solarTerms = ''; //节气
    }
    //返回某年的第n个节气为几日(从0小寒起算)
    function sTerm(y, n) {
      var offDate = new Date((31556925974.7 * (y - 1900) + sTermInfo[n] * 60000) + Date.UTC(1900, 0, 6, 2, 5));
      return (offDate.getUTCDate())
    }
    //保存y年m+1月的相关信息
    var fat = mat = 9;
    var eve = 0;
    function calendar(y, m) {
      fat = mat = 0;
      var sDObj, lDObj, lY, lM, lD = 1, lL, lX = 0, tmp1, tmp2;
      var lDPOS = new Array(3);
      var n = 0;
      var firstLM = 0;
      sDObj = new Date(y, m, 1); //当月第一天的日期
      this.length = solarDays(y, m);  //公历当月天数
      this.firstWeek = sDObj.getDay();  //公历当月1日星期几
      if ((m + 1) == 5) { fat = sDObj.getDay() }
      if ((m + 1) == 6) { mat = sDObj.getDay() }
      for (var i = 0; i < this.length; i++) {
        if (lD > lX) {
          sDObj = new Date(y, m, i + 1);  //当月第一天的日期
          lDObj = new Dianaday(sDObj);   //农历
          lY = lDObj.year;      //农历年
          lM = lDObj.month;     //农历月
          lD = lDObj.day;      //农历日
          lL = lDObj.isLeap;     //农历是否闰月
          lX = lL ? leapDays(lY) : monthDays(lY, lM); //农历当月最後一天
          if (lM == 12) { eve = lX }
          if (n == 0) firstLM = lM;
          lDPOS[n++] = i - lD + 1;
        }
        this[i] = new calElement(y, m + 1, i + 1, nStr1[(i + this.firstWeek) % 7], lY, lM, lD++, lL);
        if ((i + this.firstWeek) % 7 == 0) {
          this[i].color = 'red'; //周日颜色
        }
      }
      //节气
      tmp1 = sTerm(y, m * 2) - 1;
      tmp2 = sTerm(y, m * 2 + 1) - 1;
      this[tmp1].solarTerms = solarTerm[m * 2];
      this[tmp2].solarTerms = solarTerm[m * 2 + 1];
      if ((this.firstWeek + 12) % 7 == 5) //黑色星期五
        this[12].solarFestival += '黑色星期五';
      if (y == tY && m == tM) this[tD - 1].isToday = true; //今日
    }
    //用中文显示农历的日期
    function cDay(d) {
      var s;
      switch (d) {
        case 10:
          s = '初十'; break;
        case 20:
          s = '二十'; break;
          break;
        case 30:
          s = '三十'; break;
          break;
        default:
          s = nStr2[Math.floor(d / 10)];
          s += nStr1[d % 10];
      }
      return (s);
    }
    //在表格中显示公历和农历的日期,以及相关节日
    var cld;
    function drawCld(SY, SM) {
      var TF = true;
      var p1 = p2 = "";
      var i, sD, s, size;
      cld = new calendar(SY, SM);
      GZ.innerHTML = '                       【' + Animals[(SY - 4) % 12] + '】'; //生肖
      for (i = 0; i < 42; i++) {
        sObj = eval('SD' + i);
        lObj = eval('LD' + i);
        sObj.className = '';
        sD = i - cld.firstWeek;
        if (sD > -1 && sD < cld.length) { //日期内
          sObj.innerHTML = sD + 1;
          if (cld[sD].isToday) { sObj.style.color = '#9900FF'; } //今日颜色
          else { sObj.style.color = ''; }
          if (cld[sD].lDay == 1) { //显示农历月
            lObj.innerHTML = '<b>' + (cld[sD].isLeap ? '闰' : '') + cld[sD].lMonth + '月' + (monthDays(cld[sD].lYear, cld[sD].lMonth) == 29 ? '小' : '大') + '</b>';
          }
          else { lObj.innerHTML = cDay(cld[sD].lDay); } //显示农历日
          var Slfw = Ssfw = null;
          s = cld[sD].solarFestival;
          for (var ipp = 0; ipp < lFtv.length; ipp++) { //农历节日
            if (parseInt(lFtv[ipp].substr(0, 2)) == (cld[sD].lMonth)) {
              if (parseInt(lFtv[ipp].substr(2, 4)) == (cld[sD].lDay)) {
                lObj.innerHTML = lFtv[ipp].substr(5);
                Slfw = lFtv[ipp].substr(5);
              }
            }
            if (12 == (cld[sD].lMonth)) { //判断是否为除夕
              if (eve == (cld[sD].lDay)) { lObj.innerHTML = "除夕"; Slfw = "除夕"; }
            }
          }
          for (var ipp = 0; ipp < sFtv.length; ipp++) { //公历节日
            if (parseInt(sFtv[ipp].substr(0, 2)) == (SM + 1)) {
              if (parseInt(sFtv[ipp].substr(2, 4)) == (sD + 1)) {
                lObj.innerHTML = sFtv[ipp].substr(5);
                Ssfw = sFtv[ipp].substr(5);
              }
            }
          }
          if ((SM + 1) == 5) { //母亲节
            if (fat == 0) {
              if ((sD + 1) == 7) { Ssfw = "母亲节"; lObj.innerHTML = "母亲节" }
            }
            else if (fat < 9) {
              if ((sD + 1) == ((7 - fat) + 8)) { Ssfw = "母亲节"; lObj.innerHTML = "母亲节" }
            }
          }
          if ((SM + 1) == 6) { //父亲节
            if (mat == 0) {
              if ((sD + 1) == 14) { Ssfw = "父亲节"; lObj.innerHTML = "父亲节" }
            }
            else if (mat < 9) {
              if ((sD + 1) == ((7 - mat) + 15)) { Ssfw = "父亲节"; lObj.innerHTML = "父亲节" }
            }
          }
          if (s.length <= 0) { //设置节气的颜色
            s = cld[sD].solarTerms;
            if (s.length > 0) s = s.fontcolor('limegreen');
          }
          if (s.length > 0) { lObj.innerHTML = s; Slfw = s; } //节气
          if ((Slfw != null) && (Ssfw != null)) {
            lObj.innerHTML = Slfw + "/" + Ssfw;
          }
        }
        else { //非日期
          sObj.innerHTML = '';
          lObj.innerHTML = '';
        }
      }
    }
    //在下拉列表中选择年月时,调用自定义函数drawCld(),显示公历和农历的相关信息
    function changeCld() {
      var y, m;
      y = CLD.SY.selectedIndex + 1900;
      m = CLD.SM.selectedIndex;
      drawCld(y, m);
    }
    //用自定义变量保存当前系统中的年月日
    var Today = new Date();
    var tY = Today.getFullYear();
    var tM = Today.getMonth();
    var tD = Today.getDate();
    //打开页时,在下拉列表中显示当前年月,并调用自定义函数drawCld(),显示公历和农历的相关信息
    function initial() {
      CLD.SY.selectedIndex = tY - 1900;
      CLD.SM.selectedIndex = tM;
      drawCld(tY, tM);
    }
    window.onload = function () {
      initial();
    }
  </script>
  <style type="text/css">
    table {
      font-size: 12px;
      table-layout: fixed;
      empty-cells: show;
      border-collapse: collapse;
      margin: 0 auto;
      border: 1px solid #cad9ea;
      color: #666;
    }
 
    td {
      height: 30px;
      font-family: Arial Black;
    }
 
    th {
      width: 54px;
      font-size: 14px;
      background-color: #e0e0e0;
    }
 
    td, th {
      border: 1px solid #cad9ea;
      padding: 6px;
    }
 
    tr {
      text-align: center;
    }
 
    .header {
      background-color: #006600;
      color: #fff;
      font-size: 14px;
      text-align: left;
    }
 
      .header #GZ {
        margin-left: 120px;
      }
  </style>
</head>
 
<body>
  <form name=CLD>
    <table>
      <tr class="header">
        <td colSpan=7>
          公历
          <select name=SY onchange=changeCld()>
            <script type="text/javascript">
              for (i = 1900; i < 2050; i++) document.write('<option>' + i);
            </script>
          </select>
          年
          <select name=SM onchange=changeCld()>
            <script type="text/javascript">
              for (i = 1; i < 13; i++) document.write('<option>' + i);
            </script>
          </select>
          月 <font id=GZ></font>
        </td>
      </tr>
      <tr>
        <th>日</th>
        <th>一</th>
        <th>二</th>
        <th>三</th>
        <th>四</th>
        <th>五</th>
        <th>六</th>
      </tr>
      <script type="text/javascript">
        var gNum;
        for (i = 0; i < 6; i++) {
          document.write('<tr>');
          for (j = 0; j < 7; j++) {
            gNum = i * 7 + j;
            document.write('<td id="GD' + gNum + '"><font id="SD' + gNum + '" ');
            if (j == 0) document.write(' color=red');
            if (j == 6) document.write(' color=blue');
            document.write('></font><br><font id="LD' + gNum + '" "></font></td>');
          }
          document.write('</tr>');
        }
      </script>
    </table>
  </form>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

javascript实现日历效果

- Author -

MK_旁观者

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

Javascript 相关文章推荐
jquery加载页面的方法(页面加载完成就执行)
Jun 21 Javascript
jquery $.each()使用探讨
Sep 23 Javascript
jQuery功能函数详解
Feb 01 Javascript
avalonjs实现仿微博的图片拖动特效
May 06 Javascript
JS实现自动变换的菜单效果代码
Sep 09 Javascript
修改jquery中dialog的title属性方法(推荐)
Aug 26 Javascript
详谈Angular 2+ 的表单（一）之模板驱动型表单
Apr 25 Javascript
JavaScript禁止微信浏览器下拉回弹效果
May 16 Javascript
深入解析Vue 组件命名那些事
Jul 18 Javascript
JS异步函数队列功能实例分析
Nov 28 Javascript
解决Angular2 router.navigate刷新页面的问题
Aug 31 Javascript
微信小程序自定义toast的实现代码
Nov 16 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
Jun 17 #Javascript
javascript使用substring实现的展开与收缩文字功能示例
Jun 17 #Javascript
vue+element加入签名效果（移动端可用）
Jun 17 #Javascript
详解Vue.js中引入图片路径的几种方式
Jun 17 #Javascript
最简单的vue消息提示全局组件的方法
Jun 16 #Javascript
如何进行微信公众号开发的本地调试的方法
Jun 16 #Javascript
详解vue微信网页授权最终解决方案
Jun 16 #Javascript
plus.io(1) Get(1) html5+(1) Post(1) 条码(1) 虚拟机(3) Vmware(3) 目录管理(1) 日志(1) 磁盘管理(1)
You might like
php实现图片添加水印功能
2014/02/13 PHP
php把大写命名转换成下划线分割命名
2015/04/27 PHP
CodeIgniter实现从网站抓取图片并自动下载到文件夹里的方法
2015/06/17 PHP
php+mysql实现的无限分类方法类定义与使用示例
2020/05/27 PHP
JTrackBar水平拖动效果
2007/07/15 Javascript
javascript 日期时间函数(经典＋完善＋实用)
2009/05/27 Javascript
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
2009/12/02 Javascript
js跨浏览器实现将字符串转化为xml对象的方法
2013/09/25 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
2013/11/19 Javascript
在页面加载完成后通过jquery给多个span赋值
2014/05/21 Javascript
javascript检测是否联网的实现代码
2014/09/28 Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
2016/06/12 Javascript
JS取模、取商及取整运算方法示例
2016/10/13 Javascript
从0开始学Vue
2016/10/27 Javascript
Javascript中字符串replace方法的第二个参数探究
2016/12/05 Javascript
详解springmvc 接收json对象的两种方式
2016/12/06 Javascript
在create-react-app中使用css modules的示例代码
2018/07/31 Javascript
Nodejs使用Mongodb存储与提供后端CRD服务详解
2018/09/04 NodeJs
JS实现图片轮播效果实例详解【可自动和手动】
2019/04/04 Javascript
浅谈vue限制文本框输入数字的正确姿势
2019/09/02 Javascript
Python with用法实例
2015/04/14 Python
pandas 如何分割字符的实现方法
2019/07/29 Python
Python基于pip实现离线打包过程详解
2020/05/15 Python
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
2012/12/28 HTML / CSS
详解Html5原生拖拽操作
2018/01/12 HTML / CSS
美国药妆网站：EDCskincare.com（防晒、痤疮、抗衰老等）
2017/04/28 全球购物
荷兰网上药店：Drogisterij.net
2019/09/03 全球购物
助人为乐道德模范事迹材料
2014/08/16 职场文书
水利专业大学生职业生涯规划书范文
2014/09/17 职场文书
股东授权委托书
2014/10/15 职场文书
个人年度总结报告
2015/03/09 职场文书
2015年全国保险公众宣传日活动方案
2015/05/06 职场文书
2019年共青团工作条例最新版
2019/11/12 职场文书
Java中的随机数Random
2022/03/17 Java/Android
vue整合百度地图显示指定地点信息
2022/04/06 Vue.js
详解MongoDB排序时内存大小限制与创建索引的注意事项
2022/05/06 MongoDB