Vue3简单实现一个多功能倒计时功能

Vue3简单实现一个多功能倒计时功能

前言

一年一度的高考又快到来了，在这激动人心的时刻，为了让学生和家长们更加清晰地认识到高考的紧迫性，制定合理的备考计划和安排，作为过来人，应用我的专业知识，简单实现一个多功能倒计时，帮助考生们感受到时间的流逝和珍惜每一分每一秒的重要性😄

概述

基于不同的需求，提供了三种展示形式，分别是（年、月、日、时、分、秒）、（日、时、分、秒）、（时、分、秒），可以按照不同的需求按需使用。展示效果如下：

功能实现

直接使用Date对象计算各种时间差值比较复杂，所以我直接采用较为轻量的工具类dayjs，可以很方便地计算设定的时间距离现在的时间差值。

年、月、日、时、分、秒形式

通过dayjs(currentTime).diff(targetTime)可以计算出两者时间的时间差，那么如何计算差值之间有多少年、月、日呢，此时需要使用dayjs.duration()来获取两个间隔之间的年月日等信息，例：diff.years()来获取间隔的年份数，具体使用如下所示：

const showDateTime = () => {
    const diff = dayjs.duration(dayjs(targetTime.value).diff(dayjs()))
    const year = diff.years() || '';
    const month = diff.months() || '';
    const day = diff.days() || '';
    const hour = diff.hours() || '';
    const minute = diff.minutes() || '';
    const second = diff.seconds() || '';
    //毫秒
    // const mill = diff.milliseconds() || '';
    let tempArr = [];
    year && tempArr.push(year + '年');
    month && tempArr.push(month + '月');
    day && tempArr.push(day + '日');
    hour && tempArr.push(hour + '时');
    minute && tempArr.push(minute + '分');
    second && tempArr.push(second + '秒');
    //  mill && tempArr.push(mill);
    dateTime.value = tempArr.join('')
}

展示日、时、分、秒

与上面的原理类似，只不过不能再通过diff.days()来获取间隔的天数了，需要通过diff.asDays()来获取间隔的天数，使用代码如下：

//展示日、时、分、秒
const showDayTime = () => {
    const diff = dayjs.duration(dayjs(targetTime.value).diff(dayjs()))
    const day = diff.asDays().toString().split('.')[0];
    const hour = diff.hours() || '';
    const minute = diff.minutes() || '';
    const second = diff.seconds() || '';
    // const mill = diff.milliseconds() || '';
    let tempArr = [];
    day && tempArr.push(day + '日');
    hour && tempArr.push(hour + '时');
    minute && tempArr.push(minute + '分');
    second && tempArr.push(second + '秒');
    // mill && tempArr.push(mill);
    dayTime.value = tempArr.join('')
}

展示时、分、秒

与上述原理一样，使用diff.asHours()来获取所间隔的小时数，代码如下所示：

//展示时、分、秒
const showHourTime = () => {
    const diff = dayjs.duration(dayjs(targetTime.value).diff(dayjs()))
    const hour = diff.asHours().toString().split('.')[0];
    const minute = diff.minutes() || '';
    const second = diff.seconds() || '';
    // const mill = diff.milliseconds() || '';
    let tempArr = [];
    hour && tempArr.push(hour + '时');
    minute && tempArr.push(minute + '分');
    second && tempArr.push(second + '秒');
    // mill && tempArr.push(mill);
    hourTime.value = tempArr.join('')
}

vite打包本地运行

当使用yarn build打包生成的dist包无法直接直接本地打开index.html文件查看，可以看到控制台报错,这是使用file协议会跨域，按照常理来说，我们会使用nginx服务来部署使用，或者使用vscode的live server查看，但是如何在本地能直接打开使用呢？
1、首先修改vite.config.ts,将打包后html中引用的路径改为相对路径。

base:"./",

2、安装@vitejs/plugin-legacy插件
使用pnpm add @vitejs/plugin-legacy来安装插件，并修改vite.config.ts配置文件：

import legacy from '@vitejs/plugin-legacy';
export default defineConfig({
  base:"./",
  plugins: [
    legacy({
  targets: ['defaults', 'not IE 11']
}),
vue()],
})

这样配置完成后，重新打包，可以看到index.html中引用的文件发生了改变，如下所示：

直接本地打开html文件，发现页面运行正常了。

总结

通过上述简单的几行代码就能实现一个支持多种展示形式的倒计时组件。当然倒计时的样式可以更加多样，以满足不同的需求。同时通过安装vite插件，使打包生成的静态页面能直接本地运行，所有源码可自取：gitee.com/fcli/count-… 最后祝所有的高考学子们能如愿所偿。