欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JavaScript快速实现日历效果

程序员文章站 2022-06-24 22:25:18
本文实例为大家分享了javascript快速实现日历效果的具体代码,供大家参考,具体内容如下效果图代码

本文实例为大家分享了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 日历