Vue3毫秒倒计时(Countdown)
可自定义设置以下属性:
倒计时数值(countdown),必传,类型 number,单位ms,支持设置未来某时刻的时间戳 或 相对剩余时间,默认值 0
倒计时标题(title),类型 string | v-slot,默认 'Countdown'
格式化倒计时展示(format),类型 string,(Y:年,M:月,D:日,H:时,m:分钟,s:秒,S:毫秒),默认 'HH:mm:ss'
倒计时数值的前缀(prefix),类型 string | v-slot,默认 ''
倒计时数值的后缀(suffix),类型 string | v-slot,默认 ''
完成后的展示文本(finishedText),类型 string | v-slot,默认 'Finished'
效果如下图:在线预览
注:组件引用方法 import { requestAnimationFrame } from '../index' 请参考以下博客:
使用requestAnimationFrame模拟实现setTimeout和setInterval_theMuseCatcher的博客-CSDN博客使用requestAnimationFrame模拟实现setTimeout和setInterval!https://blog.csdn.net/Dandrose/article/details/130167061
①创建倒计时组件Countdown.vue:
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { requestAnimationFrame } from '../index'
interface Props {countdown?: number // 倒计时数值(countdown),必传,支持设置未来某时刻的时间戳(ms) 或 相对剩余时间(ms)title?: string // 倒计时标题 string | v-slotformat?: string // 格式化倒计时展示,(Y:年,M:月,D:日,H:时,m:分钟,s:秒,SSS:毫秒)prefix?: string // 倒计时数值的前缀 string | v-slotsuffix?: string // 倒计时数值的后缀 string | v-slotfinishedText?: string // 完成后的展示文本 string | v-slot
}
const props = withDefaults(defineProps<Props>(), { // 基于类型的声明countdown: 0,title: 'Countdown',format: 'HH:mm:ss',prefix: '',suffix: '',finishedText: 'Finished'
})
const futureTime = ref() // 未来截止时间戳
const restTime = ref() // 剩余时间戳
const showType = computed(() => {return {showMillisecond: props.format.includes('SSS'),showYear: props.format.includes('Y'),showMonth: props.format.includes('M'),showDay: props.format.includes('D'),showHour: props.format.includes('H'),showMinute: props.format.includes('m'),showSecond: props.format.includes('s')}
})
function fixedTwo (value: number): string {return value < 10 ? '0' + value : String(value)
}
function timeFormat (time: number): string {let showTime = props.formatif (showType.value.showMillisecond) {var S = time % 1000showTime = showTime.replace('SSS', '0'.repeat(3 - String(S).length) + S)}time = Math.floor(time / 1000) // 将时间转为s为单位if (showType.value.showYear) {var Y = Math.floor(time / (60 * 60 * 24 * 30 * 12))showTime = showTime.includes('YY') ? showTime.replace('YY', fixedTwo(Y)) : showTime.replace('Y', String(Y))} else {var Y = 0}if (showType.value.showMonth) {time = time - Y * 60 * 60 * 24 * 30 * 12var M = Math.floor(time / (60 * 60 * 24 * 30))showTime = showTime.includes('MM') ? showTime.replace('MM', fixedTwo(M)) : showTime.replace('M', String(M))} else {var M = 0}if (showType.value.showDay) {time = time - M * 60 * 60 * 24 * 30var D = Math.floor(time / (60 * 60 * 24))showTime = showTime.includes('DD') ? showTime.replace('DD', fixedTwo(D)) : showTime.replace('D', String(D))} else {var D = 0}if (showType.value.showHour) {time = time - D * 60 * 60 * 24var H = Math.floor(time / (60 * 60))showTime = showTime.includes('HH') ? showTime.replace('HH', fixedTwo(H)) : showTime.replace('H', String(H))} else {var H = 0}if (showType.value.showMinute) {time = time - H * 60 * 60var m = Math.floor(time / 60)showTime = showTime.includes('mm') ? showTime.replace('mm', fixedTwo(m)) : showTime.replace('m', String(m))} else {var m = 0}if (showType.value.showSecond) {var s = time - m * 60showTime = showTime.includes('ss') ? showTime.replace('ss', fixedTwo(s)) : showTime.replace('s', String(s))}return showTime
}
const emit = defineEmits(['finish'])
function CountDown () {if (futureTime.value > Date.now()) {restTime.value = futureTime.value - Date.now()requestAnimationFrame(CountDown)} else {restTime.value = 0emit('finish')}
}
onMounted(() => {if (props.countdown > Date.now()) { // 未来某时刻的时间戳,单位msfutureTime.value = props.countdown} else { // 相对剩余时间,单位msfutureTime.value = props.countdown + Date.now()}requestAnimationFrame(CountDown)
})
</script>
<template><div class="m-countdown"><div class="u-title"><slot name="title">{{ props.title }}</slot></div><div class="u-time"><slot name="prefix" v-if="restTime > 0">{{ prefix }}</slot><slot v-if="finishedText && restTime === 0" name="finish">{{ finishedText }}</slot><span v-else>{{ timeFormat(restTime) }}</span><slot name="suffix" v-if="restTime > 0">{{ suffix }}</slot></div></div>
</template>
<style lang="less" scoped>
* {box-sizing: border-box;margin: 0;padding: 0;
}
.m-countdown {display: inline-block;line-height: 1.571;.u-title {margin-bottom: 4px;color: #00000073;font-size: 14px;}.u-time {color: #000000d9;font-size: 24px;font-family: 'Helvetica Neue'; // 保证数字等宽显示}
}
</style>
②在要使用的页面引入:
<script setup lang="ts">
import Countdown from './Countdown.vue'
function onFinish () {console.log('countdown finished')
}
</script><template><div><h2 class="mb10">Countdown 倒计时基本使用(format: MM月 DD天 HH:mm:ss)</h2><Countdowntitle="Countdown 1年":countdown="12 * 30 * 24 * 60 * 60 * 1000"format="MM月 DD天 HH:mm:ss"finishedText="Finished"@finish="onFinish"><template #prefix>There's only </template><template #suffix> left for the end.</template></CountDown><h2 class="mt30 mb10">毫秒倒计时基本使用(format: Y 年 M 月 D 天 H 时 m 分 s 秒 SSS 毫秒)</h2><Countdowntitle="Countdown":countdown="1714528800000"format="Y 年 M 月 D 天 H 时 m 分 s 秒 SSS 毫秒"finishedText="Finished"@finish="onFinish"><template #title>2024年 五一 Countdown</template><template #prefix>There's only </template><template #suffix> left for the end.</template></CountDown><h2 class="mt30 mb10">倒计时已完成</h2><Countdowntitle="Finished"finishedText="Finished"@finish="onFinish"></CountDown></div>
</template><style lang="less" scoped>
</style>
Vue3毫秒倒计时(Countdown)相关推荐
- 商城倒计时(时分秒倒计时、分秒毫秒倒计时)
1.布局用法 引用项目coutdowntimelibrary的CountDownView 如下 <carraydraw.com.coutdowntimelibrary.countdown.Co ...
- html中倒计时精确到毫秒,倒计时功能 精确到毫秒
拷贝源码直接可以运行,如果不能运行,那就是没有Jquery.js文件,怎么改,你懂得了,哈哈 在线演示地址:http://www.ui3g.com/code/uicode-653.html 1.[代码 ...
- react 倒计时 countDown
因为项目需要做一个react倒计时组件,网络上也有,但是感觉不是很好,兼容性不高,于是自己写了一个: 1.包含 天,时,分,秒.可以根据特定的场景选择相应的展示方式; 2.提供回调函数. 1 impo ...
- vue3+elementplus倒计时效果按钮
效果 代码实现 <template><el-form label-width="80px" :model="user" :rules=&quo ...
- vue 倒计时 插件_vue中实现倒计时组件与毫秒效果
时分秒倒计时组件 template {{ getHours1 }} {{ getHours2 }} : {{ getMinutes1 }} {{ getMinutes2 }} : {{ getSeco ...
- 如何在前端编写一个精确到毫秒的倒计时
思路 我之前在掘金上看到,有小天才的想法直接在倒计时的后面加一个gif.反正都看不清楚,所以只需要有个gif在固定的位置不停的播放就可以达到毫秒倒计时的效果. 真是小天才,我也是第一次看到竟然有这种解 ...
- 微信小程序之15分钟倒计时(附带天数和时钟的实现方法在文章中)
这是制作的订单支付前倒计时,如果客户在规定时间内没能 支付,则系统自动删除,这样就以便有些商品冗余,当然了,这里只有分钟和秒钟,天数和时钟我写在了最底下,最后代码的显示第七行,可以看一下,然后带入到相 ...
- 【js】日时分秒倒计时
<div class="widgetDock" style="height: 5px;"><!-- 倒计时 --><div cla ...
- uniapp实现倒计时
首先我们需要对时间戳进行格式化处理,处理成距离现在时间还有多少时分秒,00.00.00,小时.分钟.秒的格式,可以对格式转换做一个简单的封装处理 // 将时间戳转化为时分秒的格式,一般用作倒计时 fu ...
最新文章
- 给力分享新的ORM = Dapper( 转)
- mangodb collection level operations
- python释放变量内存_Python尚学堂高淇|1113引用的本质栈内存,堆内存,内存的示意图,标识符,变量的声明初始化,垃圾回收机制...
- Python的map、filter、reduce函数
- vc++获取网页源码之使用import+接口方式
- freopen()函数在ACM中的使用
- node.js android 聊天,Node.js实现简单聊天服务器
- 互联网公司忽悠员工的黑话,套路太深了。
- 北航计算机专业怎么样,选计算机专业,北航、南大、中科大3校如何选择?选北航更有优势...
- 图片轮播的JS写法,通用涉及多个轮播
- Asp.net MVP模式介绍
- .Net Core中对FluentEmail.Smtp进行封装使用
- 易筋SpringBoot 2.1 | 第十篇:SpringBoot使用thymeleaf入门
- 音视频格式.mp4和编码格式MPEG4以及ffmpeg转码
- html tooltips效果,CSS3+jQuery轻松实现工具提示(Tooltips)
- 第二章——Swift语言
- 京东零售数据仓库演进之路
- SDK对于APP主流量变现意味着什么?
- org.hibernate.SessionException: Session was already closed
- 微信小程序部分手机预览pdf没反应
热门文章
- 开源OA:手把手教你搭建OA办公系统(4)搭建报销审批流程
- 清空回收站后数据如何恢复?
- 公司中午开了周年庆典
- Mac os区别_间隔5年的两台MacBook pro有什么区别?对比_搜狐汽车
- matlab 后台运行,MATLAB在后台运行的方法
- 金融科技创新监管试点与“监管沙箱”探索研讨会成功举办
- Python 绘图居然如此简单,真是大数据时代的神器
- php mysql 经纬度_mysql,php和js根据经纬度计算距离
- 基于Jetson Tx1搭建ROS小车的过程①(20221116)
- Linux搭建 我的世界(Minecraft) 基岩版(BE/PE)服务器