郎溪网站建设,住房及城乡建设部网站九大员,wordpress 标签分类,线上推广的公司思路解析#xff1a;假设展示2023年12月的日历
①通过new Date(new Date(2023,12).setDate(0)).getDate()获取2023.12月的天数lastDay
②通过new Date(2023,11,1).getDay()获取2023.12月第一天的起始位置startDay
③根据自己的需求在startDay和lastDay的前后补0#xff0c…思路解析假设展示2023年12月的日历
①通过new Date(new Date(2023,12).setDate(0)).getDate()获取2023.12月的天数lastDay
②通过new Date(2023,11,1).getDay()获取2023.12月第一天的起始位置startDay
③根据自己的需求在startDay和lastDay的前后补0当前值为0的不显示
具体实现
html部分
div classcalendarheaderspan日/spanspan一/spanspan二/spanspan三/spanspan四/spanspan五/spanspan六/span/headersectiondiv v-foritem in data.dateArr :keyitem.key :style{ height: ${100 / data.num}% }div v-ifitem.text ! 0{{ item.text }}/div/div/section
/div
js部分
let datareactive({dateArr:[],num:null
})onMounted((){getCanlendar()
})const getCanlendar(){const startDay new Date(2023,11,1).getDay()const lastDay new Date(new Date(2023,12).setDate(0)).getDate()const allDay Math.ceil((lastDay startDay) / 7) * 7data.dateArr []data.num Math.ceil((lastDay startDay) / 7)for (let i 1; i allDay; i) {data.dateArr.push({text: (i - startDay) 1 (i - startDay) lastDay ? i - startDay : 0,key: i})}
}
scss部分
.calendar{width:700px;height:500px;header{display:flex;width:100%;height:30px;span{width:14.2%;height:30px;line-height:30px;text-align:center;}}section{height:calc(100% - 30px);div{display:inline-black;width:14.2%;div{height:100%;text-align:center;}}}
}
【ps:以上代码未经过测试如有错误请自己改正。】
