前端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;
       　　
       },
  

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