前台-倒计时hooks

本文介绍了如何在Vue.js应用中使用自定义Hook来实现前端倒计时功能。详细探讨了Hook的创建过程,包括时间更新逻辑、组件集成以及如何确保倒计时在页面刷新后仍然准确。
摘要由CSDN通过智能技术生成

 

import { useIntervalFn } from '@vueuse/core'
import { ref, onUnmounted } from 'vue'

// 全部显示 天、时、分、秒
const setAllCountdownStr = (value: number) => {
	let second = parseInt(value.toString())
	const day = second / (3600 * 24) //3600秒等于60分钟等于1小时
	second = second % (3600 * 24) //求天数整除外剩余的秒数
	const hour = second / 3600 //1小时==60分钟==3600秒,所以剩余的秒数÷3600= 得到几个小时数
	const minute = (second % 3600) / 60 //求小时数整除外剩余的秒数, 秒数÷60秒 = 得到几分钟
	const sec = second % 60 //求分钟数整除外剩余的秒数
	return (
		`<span style="color:${numColor.valu
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值