JavaScript quickly implements calendar effects

This article example shares the specific code of JavaScript to quickly achieve the calendar effect for your reference. The specific content is as follows

Rendering

Code

<!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');
      //Call the calendar object's own init method calendar.init(form);
    }
    var calendar = {
      year: null,
      month: null,
      //Day array dayTable: null,
      // Initialization function init(form) {
        // 1 Get the day array this.dayTable=form.getElementsByTagName('td');
        //2 Create a calendar and pass in the current time 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)
        }
      },
      // Clear calendar data clearCalendar(form) {
        var tds = form.getElementsByTagName('td');
        for (var i = 0; i < tds.length; i++) {
          tds[i].innerHTML='&nbsp';
          // Clear today's style tds[i].id='';
        }
      },
      // 3 Generate calendar // from table date the date to be created createCalendar(form,date){
        //Get the current year this.year=date.getFullYear(); 
         //Get the current month this.month=date.getMonth();

         //Write the year and month into the calendar form.getElementsByTagName('th')[1].innerHTML = this.year+"年"+(this.month+1)+"月";
         //Get the number of days in this month var dataNum=this.getDateLen(this.year,this.month);
         var firstDay = this.getFristDay(calendar.year,calendar.month);
        // Loop and write the number of each day into the calendar // Let i represent the date.
        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()){
            // Set the id of the current element to today
            calendar.dayTable[i+fristDay-1].id = "today";
          }
        }
      },
       // Get the number of days in this month getDateLen(year,month){
        //Get the first day of the next month var nextMonth=new Date(year,month+1,1);
        // Set the hour of the first day of next month - 1, which is the hour of the last day of last month. Subtract a value that does not exceed 24 hours nextMonth.setHours(nextMonth.getHours()-1);
        //Get the date of the next month, which is the last day of the previous month.
        return nextMonth.getDate();
       },
       // Get the first day of the month.
      getFristDay:function(year,month){
        var firstDay=new Date(year,month,1);
        return firstDay.getDay();
      }
    } 
  </script>
</head>

<body>
  <table id="calendar">
    <tr>
      <!-- Left Arrow -->
      <th class="poin">&lt;&lt;</th>
      <!-- Year Month -->
      <th id="title" colspan="5"></th>
      <!-- Right Arrow -->
      <th class="poin">&gt;&gt;</th>
    </tr>
    <tr id="days">
      <th>Day</th>
      <th>一</th>

      <th>Two</th>
      <th>three</th>
      <th>Four</th>
      <th>Five</th>
      <th>six</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>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: