前端vue实现获取七天时间和星期几功能

前端vue实现获取七天时间和星期几功能

• 功能展示

 

• 代码

  <div  v-for="(item,index) in same_week" :class="[same_day==item.date? 'activ' :'','dis']"   @click="select(item)" :key='index'><span>{{item.name}}</span><span>{{item.week}}</span>
  </div>
  

  

   data数据

•  week:[],same_week:[],//保存当前最新的时间same_day:'',//当天的时间
  

  

   

• 在vue周期执行

    created() {// 默认显示当天前一周的数据let data=[]this.start=this.getDay(+7);this.end=this.getDay();for(let i=6;i>=0;i--){data.push(this.getDay(+i))}var date=data.reverse()//得出一周的日期进行排序this.week=date;var date=this.week;var pkc=[];/* 用于存储展示的日期数据 */var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];date.forEach((item,index)=>{//循坏日期var f=new Date(item);var week=f.getDay()//计算出星期几var str1=item.split('/');var strs=str1[1]+'/'+str1[2];var weeks=weekday[week]/* 将计算出来的时间带入数字得出中文 */var time= Math.round(new Date(item) / 1000)//时间戳转换var s={}//用于存储每个日期对象s.date=item;s.name=strs;s.week=weeks;s.times=time;pkc.push(s)})this.same_week=pkc;//pkc存储着今天的年月日星期几，时间戳等this.same_day=pkc[0].date;//今天的数据},
  

  methods事件

  getDay(day){var today = new Date();var targetday_milliseconds=today.getTime() + 1000*60*60*24*day;today.setTime(targetday_milliseconds); //注意，这行是关键代码var tYear = today.getFullYear();var tMonth = today.getMonth();var tDate = today.getDate();tMonth = this.doHandleMonth(tMonth + 1);tDate =  this.doHandleMonth(tDate);return tYear+"/"+tMonth+"/"+tDate;},doHandleMonth(month){var m = month;if(month.toString().length == 1){m =month;}return m;},
  

  也参考大神们的方法进行改进更合适项目