1.对时间的处理,有时需要对时间进行差值计算
// 计算倒计时
handle_calTime(endTime){
//计算两个时间的差值
var date1= endTime; //开始时间
var date2 = new Date(); //结束时间
var date3 = date2.getTime() - new Date(date1).getTime(); //时间差的毫秒数
date3 = Math.abs(date3)
//计算出相差天数
var days=Math.floor(date3/(24*3600*1000))
//计算出小时数
var leave1=date3%(24*3600*1000) //计算天数后剩余的毫秒数
var hours=Math.floor(leave1/(3600*1000))
//计算相差分钟数
var leave2=leave1%(3600*1000) //计算小时数后剩余的毫秒数
var minutes=Math.floor(leave2/(60*1000))
//计算相差秒数
var leave3=leave2%(60*1000) //计算分钟数后剩余的毫秒数
var seconds=Math.round(leave3/1000)
// console.log(days+'天'+hours+'时'+minutes+'分'+seconds+'秒')
// 时间换成成毫秒
let totalMilliseconds = (days * 24 * 60 * 60 + hours * 60 * 60 + minutes * 60 + seconds) * 1000
return totalMilliseconds
},
2.使用vant组件实现计时器引入:
import Vue from 'vue';
import {
CountDown } from 'vant';
Vue.use(CountDown);
3.使用
<p class="tip">优惠倒计时</p>
<van-count-down :time="time">
<template #default="timeData">
<span class="block">{
{
timeData.hours }}</span>
<span class="colon">:</span>
<span class="block">{
{
timeData.minutes }}</span>
<span class="colon">:</span>
<span class="block">{
{
timeData.seconds }}</span>
</template>
</van-count-down>
export default {
data() {
return {
time: 30 * 60 * 60 * 1000,
};
},
};