js仿寫日曆

項目需求，頁面展示當前月的日曆，每天的框裏面放上用電量，可以按月查詢，日曆展示如下：

showCode:

// html
<div class="myClander" ref="customeCalender">

</div>


// js
var weekday = new Array("星期天","星期一","星期二","星期三","星期四","星期五","星期六");   //  星期
var monthname = new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");   // 月
var monthdays = new Array(31,28,31,30,31,30,31,31,30,31,30,31);   // 每月天數
// 假的電量：後臺返回數據
var currentMouth = []
for (var p = 1; p <= 31 ;p ++) {
  currentMouth.push(p)
}

var mydate = new Date(); //var mydate = new Date(2019,10);  查詢時候 傳入指定日期
var myyear = mydate.getFullYear();
var mymouth = mydate.getMonth();
var myday  = mydate.getDate();  //獲取當前日期
var myweek = mydate.getDay();   //獲取當前星期幾
if(myyear%4 == 0 && myyear%100 == 0 || myyear%400 == 0){  //判斷閏年
  mouthdays[1]=29;
}
mydate.setDate(1);     // 設置當月爲1號
var m = mydate.getDay();//獲取當前月1號星期幾
var personalCalder = document.getElementsByClassName("myClander")[0]
var html = ''
html += "<table width='600' style='color:#fff;font-size:12px' border='1'>"
//  當前日期title
html += "<tr align='center'><td colspan='7' >"+myyear+"年"+(++mymouth)+"月"+myday+"日"+"<span style='padding-left:20px;'>"+ monthname[mymouth-1] +"月</span></td></tr>"
var n = 1;
mymouth --;
// 渲染 第一行 星期幾  表頭
html += '<tr>'
for(var i = 0;i < 7; i++) {		
  html += '<td>'+ weekday[i] +'</td>'
}
//  日期
html += '</tr>'
for(var i = 0;i < 5; i++) {	
  if(m > 0){     //  如果本月1號不是星期日，
    html += '<tr>'
    for(var j = 0;j < m; j++) {	    // 則在這行第一個單元格爲空
      html += '<td>&nbsp;</td>'
    }
    for(var k = m;k < 7; k++) {
      if(n == myday) {     // 本月當天日期渲染紅色
        html += '<td>'+ 
                    '<div style="color:red;font-size:12px">'+ n +'</div>' +
                    '<div>電量:'+ currentMouth[n-1] +'</div>'
                +'</td>'
      } else {        // 本月不是當天日期渲染綠色
        html += '<td>'+ 
                    '<div style="color:green;font-size:12px">'+ n +'</div>' +
                    '<div style="color:#ccc">電量:'+ currentMouth[n-1] +'</div>'
                +'</td>'
      }
      n++	
    }
    html += '</tr>'
    m = 0;      //  第一行（除表頭外）渲染完後，將星期歸爲星期天，從0開始
  }
  if(m == 0){
    html += '<tr>'
    for(var k = 0; k < 7; k++) {
      if(n > monthdays[mymouth]){      //  如果渲染大於本月天數，則這個單元格爲空
        html += '<td>&nbsp;</td>'
      } else {
        if(n == myday) {       // 本月當天日期渲染紅色
          html += '<td>'+ 
                    '<div style="color:red;font-size:12px">'+ n +'</div>' +
                    '<div>電量:'+ currentMouth[n-1] +'</div>'
                +'</td>'
        } else {    
          html += '<td>'+ 
                    '<div style="color:green;font-size:12px">'+ n +'</div>' +
                    '<div style="color:#ccc">電量:'+ currentMouth[n-1] +'</div>'
                +'</td>'
        }
        n++;
      }		
    }
    html += '</tr>'            
  }
}
// 計算總的用電數
var sum = currentMouth.reduce((prev,cur,index,array) =>{
    return prev + cur
})
html += '<tr>'+ 
          '<td colspan="7" align="center">月累計用電：'+ sum +'</td>'
      +'</tr>'
personalCalder.innerHTML = html