处理倒计时时间、时间格式化 - 掘金

一.倒计时时间

需求：活动有一个开始时间，一个结束时间；当活动开始时页面开始显示实现倒计时样式
 <div v-if="vshowStart">距离{{ end_time }}活动结束还有：{{ hh }}小时{{ mm }}分{{ ss }}秒</div>
export default (){
 data(){
   return{
     leave:false,  //页面是否销毁
     hh: '-',
     mm: '-',
     ss: '-',
     vshowStart：false, //是否显示倒计时样式
     start_time: '', //活动开始时间
     end_time: '', //活动结束时间
     vshowStart: false, //活动是否开始
   },
 },  
 //页面销毁
 beforeDestroy() {
   this.leave = true;
 },
methods:{
  //获取数据
  getData(){};
  //倒计时
  countdown(){
      // 活动开始时间 start_time
      var start_time = this.start_time.replace(/\-/g, '/');  //ios手机不兼容‘-’
      start_time = new Date(start_time).getTime();
      //当前时间 date1
      var date1 = new Date().getTime();
      // 判断活动是否开始
      if (date1 >= start_time) { 
        this.vshowStart = true;  //显示倒计时样式
      } else {
        //活动未开始
        this.vshowStart = false;  //不显示倒计时样式
        setTimeout(() => {  
          if (!this.leave) {
            this.countdown();
          }
        }, 60000);
        return;
      }
      // 活动结束时间 date2
      var date2 = this.end_time.replace(/\-/g, '/'); //结束时间（兼容苹果/)
      date2 = new Date(date2).getTime();
      // 结束活动倒计时时间 date3
      var date3 = date2 - date1;
      if (date3 > 0) {
        //计算出相差天数
        var days = Math.floor(date3 / (24 * 3600 * 1000));
        //计算出小时数
        var leave1 = date3 % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
        this.hh = Math.floor(leave1 / (3600 * 1000));
        if (days > 0) {
          this.hh = days * 24 + this.hh;
        }
        //计算相差分钟数
        var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
        this.mm = Math.floor(leave2 / (60 * 1000));
        //计算相差秒数
        var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
        this.ss = Math.round(leave3 / 1000);
      } else {
        //倒计时结束拿新的活动时间
        this.getData();
      }
      setTimeout(() => {
        if (!this.leave) {
          this.countdown();
        }
      }, 1000);
    },
  }  
复制代码

二.时间格式化

 formatTime(time, format = 'YYYY-MM-DD') {
    if (time == '--' || !time) {
      return '--';
    }
    const date = new Date(time);
    const year = date.getFullYear();

    let month = date.getMonth() + 1;
    let day = date.getDate();
    let hour = date.getHours();
    let minute = date.getMinutes();
    let second = date.getSeconds();

    month = month < 10 ? `0${month}` : month;
    day = day < 10 ? `0${day}` : day;
    hour = hour < 10 ? `0${hour}` : hour;
    minute = minute < 10 ? `0${minute}` : minute;
    second = second < 10 ? `0${second}` : second;

    const res = {
      YYYY: `${year}`,
      'YYYY-MM-DD': `${year}-${month}-${day}`,
      'YYYY-MM-DD HH:mm': `${year}-${month}-${day} ${hour}:${minute}`,
      'YYYY-MM-DD HH:mm:ss': `${year}-${month}-${day} ${hour}:${minute}:${second}`,

      'YYYY/MM/DD': `${year}/${month}/${day}`,
      'YYYY/MM/DD HH:mm': `${year}/${month}/${day} ${hour}:${minute}`,
      'YYYY/MM/DD HH:mm:ss': `${year}/${month}/${day} ${hour}:${minute}:${second}`
    };
    return res[format];
  },
复制代码

项目日期格式处理繁多，可以引用插件[momentjs](http://momentjs.cn/)，比如以下所示：

import moment from 'moment';

/**
 * 格式化日期
 * @param {*} fromFormat 已知的日期格式
 * @param {*} format 目标日期格式
 */
Vue.filter('moment', function (dataStr, fromFormat = undefined, format = 'YYYY-MM-DD HH:mm:ss') {
  if (!dataStr) {
    return '--';
  }
  return moment(dataStr, fromFormat).format(format);
});

<view>{{'20120118' | moment('YYYYMMDD','YYYY-MM-DD')}}</view>

import moment from 'moment';
moment(value,'YYYYMMDD').format('YYYY-MM-DD')
复制代码

原网址: 访问
创建于: 2023-06-21 12:08:39
目录: default
标签: 无

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论
  • 最新评论
  • 总共0条评论