大概就这样把,
body 部分 样式就不贴出来咯
<div class="myorder-top"> <div class="top-time"> <i class="iconfont icon-left-s"></i> <p><span class="start-time">03-12</span>~<span class="end-time">03-18</span></p> <i class="iconfont icon-right-s"></i> </div> <span class="backtoweek">回到本周</span> </div> <div class="myorder-content"> <ul class="content-title"> </ul> </div>js 部分
//获取今天这个周的周一日期到周日的日期 var currentFirstDate; var formatDate = function(date){ let year = date.getFullYear() let month = (date.getMonth()+1)<10?"0"+(date.getMonth()+1):date.getMonth()+1 let day = date.getDate()<10?"0"+(date.getDate()):date.getDate() let week =['周日','周一','周二','周三','周四','周五','周六'][date.getDay()]; let time={ year:year,month:month,day:day,week:week } return time }; var addDate= function(date,n){ date.setDate(date.getDate()+n); return date; }; var setDate = function(date){ var week = date.getDay()-1; date = addDate(date,week*-1); currentFirstDate = new Date(date); var html=`` for(var i = 0;i<7;i++){ let time=formatDate(i==0 ? date : addDate(date,1)) if(i==0){ $(".start-time").html(time.month+"-"+time.day) } if(i==6){ $(".end-time").html(time.month+"-"+time.day) } html+=` <li> <p class="title1">${time.week}</p> <p class="title2">${time.month}-${time.day}</p> </li> ` } $(".content-title").html(html) }; $(document).on("click",".icon-left-s",function(){ setDate(addDate(currentFirstDate,-7)); }) $(document).on("click",".icon-right-s",function(){ setDate(addDate(currentFirstDate,7)); }) $(document).on("click",".backtoweek",function(){ setDate(new Date()); }) setDate(new Date());