实现上一周、下一周日历功能

image.png

html

<div class="time">
              <button id="last-week"> <img class="left_icon" src="/static/images/down.png" alt=""> 上一周</button>
              <span class="time-span" id="time"></span>
              <button id="next-week">下一周 <img class="right_icon" src="/static/images/down.png" alt=""></button>
              <table id="monitor">
                  <tr>
                      <td @click="getRecipe(1)" :class="color==1?'color':''"></td>
                      <td @click="getRecipe(2)" :class="color==2?'color':''"></td>
                      <td @click="getRecipe(3)" :class="color==3?'color':''"></td>
                      <td @click="getRecipe(4)" :class="color==4?'color':''"></td>
                      <td @click="getRecipe(5)" :class="color==5?'color':''"></td>
                      <td @click="getRecipe(6)" :class="color==6?'color':''"></td>
                      <td @click="getRecipe(7)" :class="color==7?'color':''"></td>
                  </tr>
              </table>
         </div>

css 使用了less

#monitor{
  padding: 10px 20px;
  width: 100%;
  box-sizing: border-box;
  border-bottom:10px solid #EDEDED;
  tr{
  display: flex;
  justify-content: space-between;
  width:100%;
  .color{
      background: #F5F7FD;
      color:#5765F7;
  }
  td{
      padding: 5px 10px;
  }
}
}
.time{
  text-align: center;
  margin:20px auto 0 auto;
  .time-span{
      background: #F5F7FD;
      margin:0 10px;
      padding: 5px 10px;
      display: inline-block;
      border-radius: 4px;
  }
  button{
      background: #fff;
      outline: none;
      border:none;
      img{
          opacity: .5;
          width: 10px;
          margin-top: -3px;
          vertical-align: middle;
      }
      .left_icon{
          transform: rotate(90deg);
      }
      .right_icon{
          transform: rotate(-90deg);
      }
  }
}

window.onload = function(){     
    var cells = document.getElementById('monitor').getElementsByTagName('td');
    var clen = cells.length;
    var currentFirstDate;
    var formatDate = function(date){       
      var year = date.getFullYear();
      var month = (date.getMonth()+1);
      var day = date.getDate();
      // var week = '('+['日','一','二','三','四','五','六'][date.getDay()]+')'; 
      var week = ['日','一','二','三','四','五','六'][date.getDay()]; 

      // return week+' '+year+month+day;
      return week+'<br><br> '+day;
    };

    var addDate= function(date,n){    
      date.setDate(date.getDate()+n);    
      return date;
      console.log(date)
    };
    var setDate = function(date){       
      var week = date.getDay()-1;
      date = addDate(date,week*-1);
      currentFirstDate = new Date(date);
       var year1 = date.getFullYear();
        var month1 = (date.getMonth()+1);
        if(month1<10){
            month1='0'+month1
        }else{
            month1=month1
        }
        document.getElementById('time').innerHTML = year1+'.'+month1;
      console.log(year1,month1)

      for(var i = 0;i<clen;i++){      
           
        cells[i].innerHTML = formatDate(i==0 ? date : addDate(date,1));    //星期一开始
      //   cells[i].innerHTML = formatDate(i==0 ? addDate(date,-1) : addDate(date,1));//星期日开始
      }        
    };


    document.getElementById('last-week').onclick = function(){
      setDate(addDate(currentFirstDate,-7));     
    };       
    document.getElementById('next-week').onclick = function(){         
      setDate(addDate(currentFirstDate,7));
    };   
    setDate(new Date());

  }