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

63748e72dc314943857316f3b1f6a386.gif#pic_center

时间过得真是飞速,很快又要到一年一度的五一劳动节啦,今年五天假,做好准备了吗?今天我们用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 透明的的配合设置。代码如下:

// Vue3 DOM片段
<template><div class="home"><p>距离五一劳动节还有</p><p>{{ timeShow }}</p></div>
</template>// css3设置
<style lang="scss" scoped>.home {display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100vh;background: radial-gradient(#272727, #b052b0);p {line-height: 100px;letter-spacing: 2px;position: relative;font-size: 60px;font-family: Verdana, Geneva, STCaiyun, sans-serif;background-image: -webkit-linear-gradient(#d5cabd 0%, #717597 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;margin: 0;// -webkit-filter: drop-shadow(2px 2px 15px #b052b0);}}
</style>

 

dc58e307597a4461ba73728e11b90cb5.png

2 Vue3功能提前准备 

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

<script setup>import { ref } from "vue";let timeShow = ref(null);let timerId = null;const doInterval = () => {// 这里初始化显示倒计时timeShow.value = '';timerId = setInterval(() => {// 这里每隔一秒显示新的倒计时时间timeShow.value = '';}, 990)}doInterval();
</script>

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

3.1 安装工具

首先第一步,要使用js-tool-big-box这个工具,就需要下载安装,执行以下命令

npm i js-tool-big-box

3.2 页面引入

安装成功后,package.json中会有新的安装显示

aa1d435f6eef4ab5a627f0a3cae3e37f.png

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

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

3.3 补充倒计时代码 

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

<script setup>import { ref } from "vue";import { timeBox } from "js-tool-big-box";let timeShow = ref(null);let timerId = null;const doInterval = () => {let timeData = timeBox.getDistanceNow('2024-05-01 00:00:00', {afterUnit:''});timeShow.value = timeData.fullDateTime;timerId = setInterval(() => {timeData = timeBox.getDistanceNow('2024-05-01 00:00:00', {afterUnit:''});timeShow.value = timeData.fullDateTime;}, 990)}doInterval();
</script>

 展示效果如下图:

7489615df2d1435eb7968bcca66cbaab.png

4 最后

这就是Vue3 + CSS3 + js-tool-big-box 的结合使用,js-tool-big-box这个工具很强大,我正在总结使用方法:js-tool-big-box使用方法,他不仅可以对日期时间做转换,还可以获取某一年的属相,某一年的法定节假日,对cookie localstorage做存取,等等,很多大家项目中需要单独书写的公共方法,他都有,不需要大家再逐一去安装学习了,很便捷,很强大。

最后,祝大家过一个美好的五一假期。

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/316092.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MySQL--mysql的安装(压缩包安装保姆级教程)

官网下载&#xff1a;www.mysql.com MySQL :: Download MySQL Community Server (Archived Versions) 1.MySQL下载流程&#xff1a; 第一步&#xff1a;点击download&#xff0c; 下滑找到MySQL community&#xff08;gpl&#xff09;Downloads>> 第二步&#xff1a;点…

《小倩》撤档五一,光线动画神话宇宙出师未捷

临近五一假期&#xff0c;光线动画的《小倩》突然宣布撤档&#xff0c;退出了五一档的争夺。 作为光线动画成立以来倾力打造的中国神话宇宙的第一部电影&#xff0c;《小倩》的市场关注度不言而喻&#xff0c;尤其是在今年五一档撞上两部大热日本动画电影&#xff0c;正面交锋…

VPN的基本概念

随着互联网的普及和应用的广泛&#xff0c;网络安全和隐私保护越来越受到人们的关注。在这个信息爆炸的时代&#xff0c;我们的个人信息、数据通信可能会受到各种威胁&#xff0c;如何保护自己的隐私和数据安全成为了一个迫切的问题。而VPN&#xff08;Virtual Private Network…

pytho爬取南京房源成交价信息并导入到excel

# encoding: utf-8 # File_name: import requests from bs4 import BeautifulSoup import xlrd #导入xlrd库 import pandas as pd import openpyxl# 定义函数来获取南京最新的二手房房子成交价 def get_nanjing_latest_second_hand_prices():cookies {select_city: 320100,li…

人脸识别系统架构

目录 1. 系统架构 1.1 采集子系统 1.2 解析子系统 1.3 存储子系统 1.4 比对子系统 1.5 决策子系统 1.6 管理子系统 1.7 应用开放接口 2. 业务流程 2.1 人脸注册 2.2 人脸验证 2.2.1 作用 2.2.2 特点 2.2.3 应用场景 2.3 人脸辨识 2.3.1 作用 2.3.2 特点 2.3.3…

大珩PPT助手一键颜色设置

大珩PPT助手最新推出的一键设置文字颜色和背景色功能&#xff0c;为用户在创建演示文稿时带来了更便捷、高效的体验。这一功能使用户能够轻松调整演示文稿中文字的颜色和幻灯片的背景色&#xff0c;以满足不同场合和主题的需要。 以下是该功能的几个关键特点和优势&#xff1a…

RAG-Driver: 多模态大语言模型中具有检索增强上下文学习的通用驱动解释

RAG-Driver: 多模态大语言模型中具有检索增强上下文学习的通用驱动解释 摘要Introduction RAG-Driver: Generalisable Driving Explanations with Retrieval-Augmented In-Context Learning in Multi-Modal Large Language Model. 摘要 由“黑箱”模型驱动的机器人需要提供人类…

JAVA实现easyExcel模版导出

easyExcel文档 模板注意&#xff1a; 用 {} 来表示你要用的变量 &#xff0c;如果本来就有"{“,”}" &#xff0c;特殊字符用"{“,”}"代替{} 代表普通变量{.}代表是list的变量 添加pom依赖 <dependency><groupId>com.alibaba</groupId&g…

Docker有哪些常见命令?什么是Docker数据卷?

喜欢就点击上方关注我们吧&#xff01; 哈喽&#xff0c;大家好呀&#xff01;这里是码农后端。上一篇我们介绍了Docker的安装以及腾讯云镜像加速源的配置。本篇将带你学习Docker的常见命令、数据卷及自定义镜像等相关知识。 1、什么是镜像与容器&#xff1f; 利用Docker安装应…

电容的理论基础

目录 1.电容的本质&#xff1a; 2.电容量的大小 2.1电容的单位 2.2电容的决定式 ​编辑3.电容的特点 5.电容器的类型 6.电容实际的电路模型 7.安装方法 ​编辑8.电容值 9.电容的耐压、封装 10.阻抗-频率特性 11.频率特性 12.等效串联电组ESR 13.电容器的温度特性…

MATLAB 数据类型

MATLAB 数据类型 MATLAB 不需要任何类型声明或维度语句。每当 MATLAB 遇到一个新的变量名&#xff0c;它就创建变量并分配适当的内存空间。 如果变量已经存在&#xff0c;那么MATLAB将用新内容替换原始内容&#xff0c;并在必要时分配新的存储空间。 例如&#xff0c; Tota…

命令执行。

命令执行 在该项目的readme中&#xff0c;描述了怎么去调用的flink 通过java原生的runtime来调用flink&#xff0c;下一步就是去看看具体的调用过程了&#xff0c;是否存在可控的参数 找到具体提交命令的类方法CommandRpcClinetAdapterImpl#submitJob() 这里要确定command&am…

TiDB 6.x 新特性解读 | Collation 规则

对数据库而言&#xff0c;合适的字符集和 collation 规则能够大大提升使用者运维和分析的效率。TiDB 从 v4.0 开始支持新 collation 规则&#xff0c;并于 TiDB 6.0 版本进行了更新。本文将深入解读 Collation 规则在 TiDB 6.0 中的变更和应用。 引 这里的“引”&#xff0c;…

用Redis实现获取验证码,外加安全策略

安全策略 一小时内只能获取三次&#xff0c;一天内只能获取五次 Redis存储结构 代码展示 import cn.hutool.core.util.RandomUtil; import org.apache.logging.log4j.LogManager; import org.apache.logging.log4j.Logger; import org.junit.jupiter.api.Test; import org.spri…

SD8942 600KHz、16V、2A同步降压转换器芯片IC

一般说明 该SD8942是一个完全集成&#xff0c;高效率2A同步整流降压转换器。SD8942在宽输出电 流负载范围内以高效率运行。该器件提供两种工作模式&#xff0c;PWM控制和PFM模式开关控制&#xff0c;它允许在更宽的负载范围内的高效率。 该SD8942需要一个现成的标…

Flink面试(1)

1.Flink 的并行度的怎么设置的&#xff1f; Flink设置并行度的几种方式 1.代码中设置setParallelism() 全局设置&#xff1a; 1 env.setParallelism(3);  算子设置&#xff08;部分设置&#xff09;&#xff1a; 1 sum(1).setParallelism(3) 2.客户端CLI设置&#xff0…

电脑开机后卡在开机LOGO画面如何排查处理

当电脑开机后长时间停滞在开机LOGO画面,无法继续进入操作系统,这一现象常令用户困扰不已。本文将深入探讨导致此类问题的多种可能原因,并提供相应的解决方法,帮助你有效地诊断和排除故障。 硬件故障或接触不良 1. 硬盘问题:硬盘是系统启动的关键组件,其故障或数据线接触…

大数据分析与应用实验(黑龙江大学)

实验一 Hadoop伪分布式实验环境搭建与WordCount程序 一、实验目的 1、学习搭建Hadoop伪分布式实验环境 2、在伪分布式实验环境下运行WordCount程序 二、实验内容 1、搭建Hadoop伪分布式实验环境&#xff0c;并安装Eclipse。 2、在Eclipse环境下&#xff0c;编写并执行Wor…

MongoDB的安装(Linux环境)

登录到Linux服务器执行 lsb_release -a &#xff0c;即可得知服务器的版本信息为&#xff1a;CentOS 7。 # CentOS安装lsb_release包 [rootlinux100 ~]# sudo yum install redhat-lsb# 查看Linux版本 [rootlinux100 ~]# lsb_release -a LSB Version: :core-4.1-amd64:core-…

网络服务SSH-远程访问及控制

一.SSH远程管理 1.SSH介绍 SSH&#xff08;Secure Shell&#xff09;是一种安全通道协议&#xff0c;最早是由芬兰的一家公司开发出来&#xff0c;并且在IETF &#xff08;Internet Engineering Task Force&#xff09;的网络草案基础上制定而成的标准协议。主要用来实现字符…