使用CSS3 + Vue3 + js-tool-big-box工具，实现炫酷五一倒计时动效 ...

   时间过得真是飞速，很快又要到一年一度的五一劳动节啦，今年五天假，做好准备了吗？本日我们用CSS3 + Vue3 + 一个前端工具库 js-tool-big-box来实现一个炫酷的五一倒计时动效吧。
  目次
1  先制作一个CSS3样式
2 Vue3功能提前准备 
3 使用js-tool-big-box工具完成倒计时
3.1 安装工具
3.2 页面引入
3.3 补充倒计期间码 
4 最后

---

1  先制作一个CSS3样式

页面元素比较简单，外面放一个DIV元素，里面两个P元素即可。第一个P元素我们书写“距离五一劳动节还有”这几个字。第二行的P元素用来存放倒计时表现的内容。
最外部的DIV，我们采用flex结构，这样中间的倒计时样式可以程度并且垂直居中。并且给背景设置一个线性的渐变，采用的是 radial-gradient 属性。中间字体的样式重点看一下 font-family  background-image线性渐变以及webkit-text-fill-color 透明的的配合设置。代码如下：

1. // Vue3 DOM片段
2. <template>
3.   <div class="home">
4.     <p>距离五一劳动节还有</p>
5.     <p>{{ timeShow }}</p>
6.   </div>
7. </template>
9. // css3设置
10. <style lang="scss" scoped>
11.   .home {
12.     display: flex;
13.     flex-direction: column;
14.     align-items: center;
15.     justify-content: center;
16.     height: 100vh;
17.     background: radial-gradient(#272727, #b052b0);
18.     p {
19.       line-height: 100px;
20.       letter-spacing: 2px;
21.       position: relative;
22.       font-size: 60px;
23.       font-family: Verdana, Geneva, STCaiyun, sans-serif;
24.       background-image: -webkit-linear-gradient(#d5cabd 0%, #717597 100%);
25.       -webkit-background-clip: text;
26.       -webkit-text-fill-color: transparent;
27.       margin: 0;
28.       // -webkit-filter: drop-shadow(2px 2px 15px #b052b0);
29.     }
30.   }
31. </style>

复制代码

2 Vue3功能提前准备 

与Vue2不同的是，Vue3中，我们用 ref 来存放一些data数据依赖，这就需要从vue中引入ref这个函数对象，同时设定一个 timeShow 变量，用来存放我们即将要表现的倒计时内容，倒计时肯定要涉及到setInterval定时函数，初步代码如下：

1. <script setup>
2.   import { ref } from "vue";
3.   let timeShow = ref(null);
4.   let timerId = null;
5.   
6.   const doInterval = () => {
7.     // 这里初始化显示倒计时
8.     timeShow.value = '';
9.     timerId = setInterval(() => {
10.       // 这里每隔一秒显示新的倒计时时间
11.       timeShow.value = '';
12.     }, 990)
13.   }
15.   doInterval();
16. </script>

复制代码

3 使用js-tool-big-box工具完成倒计时

3.1 安装工具

起首第一步，要使用js-tool-big-box这个工具，就需要下载安装，执行以下命令
   npm i js-tool-big-box
  3.2 页面引入

安装成功后，package.json中会有新的安装表现

这个时间，我们就要在页面中引入工具，工具对外暴露了 timeBox 的对象，我们可以使用这个对象里面的方法举行倒计时盘算，代码如下：

1. import { timeBox } from "js-tool-big-box";

复制代码

3.3 补充倒计期间码 

引入成功后，我们就可以使用 timeBox 里面的 getDistanceNow 方法来盘算倒计时了，这个方法接收2个入参，第一个是目标时间，我们设定为“2024-05-01 00:00:00”，第二个参数黑白必填的，但他会有一些默认单位返回，也可以按照自己的需求举行个性化修改，补充代码如下：

1. <script setup>
2.   import { ref } from "vue";
3.   import { timeBox } from "js-tool-big-box";
4.   let timeShow = ref(null);
5.   let timerId = null;
6.   
7.   const doInterval = () => {
8.     let timeData = timeBox.getDistanceNow('2024-05-01 00:00:00', {afterUnit:''});
9.     timeShow.value = timeData.fullDateTime;
10.     timerId = setInterval(() => {
11.       timeData = timeBox.getDistanceNow('2024-05-01 00:00:00', {afterUnit:''});
12.       timeShow.value = timeData.fullDateTime;
13.     }, 990)
14.   }
16.   doInterval();
17. </script>

复制代码

 展示效果如下图：

4 最后

这就是Vue3 + CSS3 + js-tool-big-box 的结合使用，js-tool-big-box这个工具很强盛，我正在总结使用方法：js-tool-big-box使用方法，他不但可以对日期时间做转换，还可以获取某一年的属相，某一年的法定节假日，对cookie localstorage做存取，等等，许多各人项目中需要单独书写的公共方法，他都有，不需要各人再逐一去安装学习了，很便捷，很强盛。
最后，祝各人过一个美好的五一假期。
------------------------------------------
这是git仓库地址：js-tool-big-box仓库地址 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。