JavaScript快速实现日历效果

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

效果图

代码

!DOCTYPE htML>
    html lang="en">
    head>
      meta charset="UTF-8">
      meta http-equiv="X-UA-Compatible" content="IE=Edge">
      meta name="viewport" content="width=device-width, inITial-scale=1.0">
      title>
    Document/title>
      style>
    * {
          margin: 0;
          padding: 0;
    }
    #calendar {
          background-color: #9900ff;
          color: #fff;
          border-radius: 5px;
          margin: 100px auto;
    }
    #title {
          font-Size: 1.4em;
          padding: 4px 0.55em;
    }
    #days th {
          font-weight: bold;
          text-align: center;
          padding: 4px 0.55em;
    }
    #calendar td {
          text-align: center;
          padding: 4px 20px;
    }
    #today {
          color: #f00;
          font-weight: bold;
    }
    .poin {
          cursor: pointer;
          cursor: hand;
    }
      /style>
      script>
    window.onload=function(){
          VAR form = document.getElementById('calendar');
          // 通过日历对象去调用自身的init方法      calendar.init(form);
    }
    var calendar = {
      year: null,      month: null,      //日的数组      dayTable: null,      //初始化函数      init(form) {
            // 1获取日数组        this.dayTable=form.getelementsbytagname('td');
            //2创建日历,传入当前时间        this.createCalendar(form,new Date());
            var nextMon=form.getElementsByTagName('th')[2];
            var PReMon=form.getElementsByTagName('th')[0];
        preMon.onclick=function(){
            calendar.clearCalendar(form)          var predate=new Date(calendar.year,calendar.month-1,1);
          calendar.createCalendar(form,preDate)        }
        nextMon.onclick=function(){
              calendar.clearCalendar(form)          var nextDate=new Date(calendar.year,calendar.month+1,1);
          calendar.createCalendar(form,nextDate)        }
      }
,      //清除日历数据      clearCalendar(form){
            var tds=form.getElementsByTagName('td');
            for (var i = 0;
     i  tds.length;
 i++) {
              tds[i].innerHTML='&
    nbsp';
              // 清除今天的样式          tds[i].id='';
        }
      }
,      // 3生成日历      // From table表格 date要创建的日期      createCalendar(form,date){
            //获取此时的年份         this.year=date.getFullYear();
              //获取此时的月份         this.month=date.getMonth();
             //年份月份写入日历         form.getElementsByTagName('th')[1].innerHTML = this.year+"年"+(this.month+1)+"月";
             //获取本月的天数         var dataNum=this.getDateLen(this.year,this.month);
             var fristDay = this.getFristDay(calendar.year,calendar.month);
            // 循环将每一天的天数写入到日历中        // 让i表示日期。        for (var i = 1;
     i = dataNum;
 i++) {
              this.dayTable[fristDay+i-1].innerHTML=i;
              var nowDate =new Date();
              if(i ==nowDate.getDate() &
    &
     calendar.month ==nowDate.getMonth()&
    &
calendar.year == nowDate.getFullYear()){
                //  将当期元素的id设置为today            calendar.dayTable[i+fristDay-1].id = "today";
          }
        }
      }
,       // 获取本月份的天数       getDateLen(year,month){
            //获取下个月的第一天        var nextMonth=new Date(year,month+1,1);
            // 设置下月第一天的小时-1，也就是上个月最后一天的小时数，随便减去一个值不要超过24小时        nextMonth.setHours(nextMonth.getHours()-1);
            //获取此时下个月的日期,就是上个月最后一天.        return nextMonth.getDate();
       }
,       // 获取本月第一天为星期几。      getFristDay:function(year,month){
            var fristDay=new Date(year,month,1);
            return fristDay.getDay();
      }
    }
       /script>
    /head>
    body>
      table id="calendar">
        tr>
          !-- 向左箭头 -->
          th class="poin">
    &
    lt;
    &
    lt;
    /th>
          !-- 年月 -->
          th id="title" colspan="5">
    /th>
          !-- 向右箭头 -->
          th class="poin">
    &
    gt;
    &
    gt;
    /th>
        /tr>
        tr id="days">
          th>
    日/th>
          th>
    一/th>
          th>
    二/th>
          th>
    三/th>
          th>
    四/th>
          th>
    五/th>
          th>
    六/th>
        /tr>
        tr>
          td>
    &
    nbsp;
    /td>
          td>
    &
    nbsp;
    /td>
          td>
    &
    nbsp;
    /td>
          td>
    &
    nbsp;
    /td>
          td>
    &
    nbsp;
    /td>
          td>
    &
    nbsp;
    /td>
          td>
    &
    nbsp;
    /td>
        /tr>
        tr>
          td>
    &
    nbsp;
    /td>
          td>
    &
    nbsp;
    /td>
          td>
    &
    nbsp;
    /td>
          td>
    &
    nbsp;
    /td>
          td>
    &
    nbsp;
    /td>
          td>
    &
    nbsp;
    /td>
          td>
    &
    nbsp;
    /td>
        /tr>
        tr>
          td>
    &
    nbsp;
    /td>
          td>
    &
    nbsp;
    /td>
          td>
    &
    nbsp;
    /td>
          td>
    &
    nbsp;
    /td>
          td>
    &
    nbsp;
    /td>
          td>
    &
    nbsp;
    /td>
          td>
    &
    nbsp;
    /td>
        /tr>
        tr>
          td>
    &
    nbsp;
    /td>
          td>
    &
    nbsp;
    /td>
          td>
    &
    nbsp;
    /td>
          td>
    &
    nbsp;
    /td>
          td>
    &
    nbsp;
    /td>
          td>
    &
    nbsp;
    /td>
          td>
    &
    nbsp;
    /td>
        /tr>
        tr>
          td>
    &
    nbsp;
    /td>
          td>
    &
    nbsp;
    /td>
          td>
    &
    nbsp;
    /td>
          td>
    &
    nbsp;
    /td>
          td>
    &
    nbsp;
    /td>
          td>
    &
    nbsp;
    /td>
          td>
    &
    nbsp;
    /td>
        /tr>
        tr>
          td>
    &
    nbsp;
    /td>
          td>
    &
    nbsp;
    /td>
          td>
    &
    nbsp;
    /td>
          td>
    &
    nbsp;
    /td>
          td>
    &
    nbsp;
    /td>
          td>
    &
    nbsp;
    /td>
          td>
    &
    nbsp;
    /td>
        /tr>
      /table>
    /body>
    /html>
    

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

• js css+html实现简单的日历
• 轻量级的原生js日历插件calendar.js使用指南
• JS学习之一个简易的日历控件
• JS日历 推荐
• Vue.js创建Calendar日历效果
• 纯js简单日历实现代码
• js编写当天简单日历效果【实现代码】
• js日历控件（可精确到分钟）
• php+javascript的日历控件
• 简约JS日历控件 实例代码

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！