使用JavaScript怎么實現(xiàn)一個日歷效果-創(chuàng)新互聯(lián)

這篇文章給大家介紹使用JavaScript怎么實現(xiàn)一個日歷效果，內(nèi)容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

創(chuàng)新互聯(lián)公司堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的會澤網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

Java是什么

Java是一門面向?qū)ο缶幊陶Z言，可以編寫桌面應(yīng)用程序、Web應(yīng)用程序、分布式系統(tǒng)和嵌入式系統(tǒng)應(yīng)用程序。

代碼


<!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');
      // 通過日歷對象去調(diào)用自身的init方法
      calendar.init(form);
    }
    var calendar = {
      year: null,
      month: null,
      //日的數(shù)組
      dayTable: null,
      //初始化函數(shù)
      init(form) {
        // 1獲取日數(shù)組
        this.dayTable=form.getElementsByTagName('td');
        //2創(chuàng)建日歷,傳入當前時間
        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)
        }
      },
      //清除日歷數(shù)據(jù)
      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要創(chuàng)建的日期
      createCalendar(form,date){
        //獲取此時的年份
         this.year=date.getFullYear(); 
         //獲取此時的月份
         this.month=date.getMonth();

         //年份月份寫入日歷
         form.getElementsByTagName('th')[1].innerHTML = this.year+"年"+(this.month+1)+"月";
         //獲取本月的天數(shù)
         var dataNum=this.getDateLen(this.year,this.month);
         var fristDay = this.getFristDay(calendar.year,calendar.month);
        // 循環(huán)將每一天的天數(shù)寫入到日歷中
        // 讓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設(shè)置為today
            calendar.dayTable[i+fristDay-1].id = "today";
          }
        }
      },
       // 獲取本月份的天數(shù)
       getDateLen(year,month){
        //獲取下個月的第一天
        var nextMonth=new Date(year,month+1,1);
        // 設(shè)置下月第一天的小時-1，也就是上個月最后一天的小時數(shù)，隨便減去一個值不要超過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>

關(guān)于使用JavaScript怎么實現(xiàn)一個日歷效果就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

分享題目：使用JavaScript怎么實現(xiàn)一個日歷效果-創(chuàng)新互聯(lián)
文章路徑：http://muchs.cn/article10/csjsgo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、標簽優(yōu)化、全網(wǎng)營銷推廣、微信公眾號、商城網(wǎng)站、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站托管運營