js手寫日歷插件

行者花雕 2020-07-24

展開全文

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>日歷</title>
  <style>
    table {
      width: 320px;
      background: #333;
      color: #fff
    }

    td,
    th {
      text-align: center;
      height: 30px;
    }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th colspan="2">
          <span class="left"><<</span>
        </th>
        <th colspan="3">
          <span class="time"></span>
        </th>
        <th colspan="2">
          <span class="right">>></span>
        </th>
      </tr>
      <tr>
        <th>日</th>
        <th>一</th>
        <th>二</th>
        <th>三</th>
        <th>四</th>
        <th>五</th>
        <th>六</th>
      </tr>
    </thead>
    <tbody class="main"></tbody>
  </table>

  <script>
    // 獲取元素
    let oTime = $('.time')
    let oMain = $('.main')
    let leftBtn = $('.left')
    let rightBtn = $('.right')
    let time = new Date()
    
    createCells() // 1. 創(chuàng)建表格
    getPrevDays(time) // 2.獲取上一個月占的格子
    getCurrentDays(time); // 3.獲取當(dāng)前月所占的格子數(shù)
    minHead(time) // 4.設(shè)置頭部顯示的內(nèi)容
    mainList(time, getPrevDays(time), getCurrentDays(time)) // 5. 月份顯示的詳情
    leftBtn.onclick = function() { // 6.綁定兩邊的按鈕 實現(xiàn)上一月下一月
      time.setMonth(time.getMonth() - 1)
      getPrevDays(time)
      getCurrentDays(time)
      minHead(time)
      mainList(time, getPrevDays(time), getCurrentDays(time))
    }
    rightBtn.onclick = function() {
      time.setMonth(time.getMonth() + 1)
      getPrevDays(time)
      getCurrentDays(time)
      minHead(time)
      mainList(time, getPrevDays(time), getCurrentDays(time))
    }
    /*
     * 
     * 獲取元素 
     * 
    */
    function $(container) {
      return document.querySelector(container)
    }

    /*
    *
     * 創(chuàng)建表格
     * 
    */
    function createCells() {
      for (var i=0; i<6; i++) {
        var tr = document.createElement('tr')
        for(var k=0; k<7; k++) {
          var td = document.createElement('td')
          tr.appendChild(td)
        }
        oMain.appendChild(tr)
      }
    }

    /*
    *
    * getPrevDays 獲取上一個月 占的格子
    *  
    */
    function getPrevDays(time) {
      var time = new Date(time) // 拷貝一份時間 防止修改時間引發(fā)沖突
      var list = [] // 上一個月所占的天數(shù)
      time.setDate(1) // 設(shè)置為當(dāng)月第一天方便查看是星期幾
      var day = time.getDay() == 0 ? 7 : time.getDay() // 如果是0 說明需要空出來一行 顯示上個月的時間
      // 獲取上一個月的天數(shù)
      time.setDate(0)
      var maxDay = time.getDate()
      for(var i=maxDay; i> (maxDay-day); i--) {
        list.push(i)
      }
      list.reverse()
      return list
    }

    /*
    * 獲取當(dāng)月所占的格子
    */
    function getCurrentDays(time) {
      // debugger
      var time = new Date(time) // 拷貝一份時間 防止修改時間造成全局時間沖突
      time.setDate(1) // 確保不會出現(xiàn)跨越現(xiàn)象 比如1.31跑到三月份去了
      var list = []
      // 下面的代碼是為了獲取當(dāng)前月的信息
      time.setMonth(time.getMonth() + 1)
      console.log(time.getMonth())
      time.setDate(0) // 修改日期0
      var maxDay = time.getDate() // 獲取當(dāng)月的天數(shù)
      for(var i=1; i<=maxDay; i++) {
        list.push(i)
      }
      return list
    }

    /*
    * minHead 設(shè)置頭部的顯示
    */
    function minHead(time) {
      // oTime.innerHTML = time.getFullYear() + '年' + time.getMonth() + 1
      oTime.innerHTML = `${time.getFullYear()}年${time.getMonth() + 1}月`
    }

    function getYMD(time) {
      time = time || new Date()
      return `${time.getFullYear()}-${time.getMonth() + 1}-${time.getDate()}`
    }

    /*
    * 月份顯示的詳情 上個月最后 + 本月 + 下個月開始的
    */
    function mainList(time, prevDays, currentDays) {
      var beforeCount = prevDays.length + currentDays.length
      var cellList = document.querySelectorAll('td')
      // 1. 展示上個月的
      for(var i=0; i<prevDays.length; i++) {
        cellList[i].innerHTML = `<font color='red'>${prevDays[i]}</font>`
      }
      // 2. 展示本月的
      for(var i=0; i<currentDays.length; i++) {
        if (getYMD() === getYMD(time) && currentDays[i] == time.getDate()) { // 如果是今天 展示另外一種顏色
          cellList[i + prevDays.length].innerHTML = `<font color='yellow'>${currentDays[i]}</font>`
        } else {
          cellList[i + prevDays.length].innerHTML = `<font color='white'>${currentDays[i]}</font>`
        }
        
      }
      // 3. 展示下個月的
      for(var i=1; i< (42-beforeCount); i++) {
        cellList[i + beforeCount - 1].innerHTML = `<font color='red'>${i}</font>`
      }
    }
  </script>
</body>
</html>