大家好，我写此文章，只是为了记录一下，发的代码肯定是不丝滑，不完美的，毕竟是个新手，望体谅~
html：
我这边实现的时候引入了jquery.js，为了方便。
<div>
<input type="text" id="input">
<button id="btn">生成日历</button>
<div id="cploDdom"></div>
</div>
<script src="./jquery.js"></script>
js:
<script>
// 1、计算本月有多少天
// 2、本月的第一天是星期几
// 3、用本月第一天的星期数W+总共天数T 最后得到一个总数WT
// 用这个数来做循环控制量，let(let i=0;i<WT,i++)如果在i<W-1，往数组push[0],如果i>W,则计算号数 n=i-W+1；数组添加push[n]
// 4、把这个数组按7，分成二维数组就可以了，这个二维数组就是每个月对应的日历
// 5、最后如果这个二维数组的最后一个元素不满7,则补0
$("#btn").click(function(){
var value = $("#input").val();
var dateArr = value.split('-');
getMonthLength(value);
var currDays = getMonthLength(value);
var currWeek = getCurrWeek(value);
var currMonthArr = [];
for(let i=0;i<Number(currDays)+Number(currWeek);i++){
if(i<Number(currWeek)-1){
currMonthArr.push('');
}else if(i>Number(currWeek)-1){
currMonthArr.push(i-Number(currWeek)+1);
}
}
var newDateArr = arrTrans(7,currMonthArr);
$.each(newDateArr,function(idx,val){
if(idx == newDateArr.length-1){
if(val.length < 7){
var num = 7-val.length;
for(let i=0;i<num;i++){
val.push('');
}
}
}
})
var str = '';
$.each(newDateArr,function(idx,val){
var item_str = '';
$.each(val,function(i,v){
item_str += '<td>'+v+'</td>';
});
item_str = '<tr>'+item_str+'</tr>';
str += item_str;
});
str = '<table border="1"><tr><td colspan="7">'+dateArr[0]+'年'+dateArr[1]+'月'+'</td></tr><tr><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td><td>日</td></tr>'+str+'</table>';
$("#cploDdom").append(str);
})
//计算本月为多少天
function getMonthLength(date) {
var arr = date.split('-');
return new Date(arr[0], arr[1], 0).getDate();
}
//本月的第一天是星期几
function getCurrWeek(date){
var arr = date.split('-');
var week = new Date(Date.UTC(arr[0], arr[1]-1, 1)).getDay();
return week;
}
// 一维数组转换为二维数组
function arrTrans(num, arr) {
const iconsArr = []; // 声明数组
arr.forEach((item, index) => {
const page = Math.floor(index / num); // 计算该元素为第几个素组内
if (!iconsArr[page]) { // 判断是否存在
iconsArr[page] = [];
}
iconsArr[page].push(item);
});
return iconsArr;
}
</script>
实现的效果：
