简单实用---时间倒计时

#这里我是封装了一个公共的使用方法便于全局引用

1、首先我们在公共文件里新建一个countDwon.js文件代码如下：

// 时间补0
const fillZero = n => n < 10 ? '0' + n : '' + n;

// 倒计时 time参数是日期 比如：2020-09-22 或者 2020.09.22 
// type 是你想要的倒计时格式 DD:HH:MM:SS / xx天：xx时：xx分：xx秒
const countDown = (time, type) => {
  if (!isNaN(+time)) time = +time;
  //转换时间格式
  if (typeof time === 'string') {
    time = time.split('-').join('/');
    time = time.split('.').join('/');
  }
// 统一转换成时间戳 计算时间差
  let delta = new Date(time).getTime() - Date.now();
  if(delta <= 0) delta = 0;

  // 常量表示几个常数
  const DAY_MS = 24 * 60 * 60 * 1000;
  const HOUR_MS = 60 * 60 * 1000;
  const MINUTE_MS = 60 * 1000;
  const SECOND_MS = 1000;

  let days, hours, mins, secs;
  switch (type) {
    case 'DD:HH:MM:SS':
      // 计算天数
      days = Math.floor(delta / DAY_MS);
      // 计算小时数
      hours = Math.floor((delta - (days * DAY_MS)) / HOUR_MS);
      // 计算分钟数
      mins = Math.floor((delta - (days * DAY_MS) - (hours * HOUR_MS)) / MINUTE_MS);
      // 计算秒数
      secs = Math.floor((delta - (days * DAY_MS) - (hours * HOUR_MS) - (mins * MINUTE_MS)) / SECOND_MS);
      break;
    case 'HH:MM:SS':
      // 计算小时数
      hours = Math.floor(delta / HOUR_MS);
      // 计算分钟数
      mins = Math.floor((delta - (hours * HOUR_MS)) / MINUTE_MS);
      // 计算秒数
      secs = Math.floor((delta - (hours * HOUR_MS) - (mins * MINUTE_MS)) / SECOND_MS);
      break;
    case 'MM:SS':
      // 计算分钟数
      mins = Math.floor(delta / MINUTE_MS);
      // 计算秒数
      secs = Math.floor((delta - (mins * MINUTE_MS)) / SECOND_MS);
      break;
    case 'SS':
      // 计算秒数
      secs = Math.floor(delta / SECOND_MS);
      break;
    default:
      // 计算小时数
      hours = Math.floor(delta / HOUR_MS);
      // 计算分钟数
      mins = Math.floor((delta - (hours * HOUR_MS)) / MINUTE_MS);
      // 计算秒数
      secs = Math.floor((delta - (hours * HOUR_MS) - (mins * MINUTE_MS)) / SECOND_MS);
      break;
  }

  // 拼接要显示的字符串
  return {
    days: fillZero(days), hours: fillZero(hours), mins: fillZero(mins), secs: fillZero(secs)
  };
};

export {
  countDown
};

2、然后在单文件组件里引入使用代码如下：

<script>
import {countDown} from '@/utils/countDown.js'
export default {
  name: '',
  data(){
	return{
		days: '',
		hours: '',
		mins: '',
		secs: '',
	  }
	},
	created(){
	  setInterval(() => {
		this.days = countDown('2020-09-02','DD:HH:MM:SS').days ? countDown('2020-09-02','DD:HH:MM:SS').days + '天 :' : ''
		this.hours = countDown('2020-09-02','DD:HH:MM:SS').hours ? countDown('2020-09-02','DD:HH:MM:SS').hours + '时 :' : ''
		this.mins = countDown('2020-09-02','DD:HH:MM:SS').mins ? this.mins = countDown('2020-09-02','DD:HH:MM:SS').mins + '分 :' : ''
		this.secs = countDown('2020-09-02','DD:HH:MM:SS').secs + '秒'
	  }, 1000);
	},
}
</script>

3、视图中
在html显示倒计时

<p>{{days}} {{hours}} {{mins}} {{secs}}</p>

最后呈现的效果如下：