uniapp 实现时分秒 分别倒计时

效果

<view class="issue-price-countdown">

<CountDown :endTimestamp="1745996085000"></CountDown>

</view>

引入组件

import CountDown from '@/components/CountDown.vue';

<template>

<view class="countdown">

<view class="time-box hour">{{ currentHours }}</view>

<text class="colon">:</text>

<view class="time-box minute">{{ currentMinutes }}</view>

<text class="colon">:</text>

<view class="time-box second">{{ currentSeconds }}</view>

</view>

</template>

<script>

export default {

props: {

// 接收13位时间戳(结束时间)

endTimestamp: {

type: Number,

required: true

}

},

data() {

return {

remainingTime: 0, // 剩余总秒数

timer: null,

currentHours: 0,

currentMinutes: 0,

currentSeconds: 0

}

},

methods: {

// 初始化倒计时

initCountdown() {

this.clearTimer()

this.calculateRemaining()

if (this.remainingTime > 0) {

this.timer = setInterval(() => {

this.updateTime()

}, 1000)

}

},

// 计算剩余时间

calculateRemaining() {

const now = Date.now()

this.remainingTime = Math.max(0, Math.floor((this.endTimestamp - now) / 1000))

this.updateDisplayTime()

},

// 更新时间显示

updateDisplayTime() {

let seconds = this.remainingTime % 60

let minutes = Math.floor(this.remainingTime / 60) % 60

const hours = Math.floor(this.remainingTime / 3600)

// 实现级联更新效果

if (this.currentSeconds === 0 && seconds === 59) {

this.currentMinutes = minutes

}

if (this.currentMinutes === 0 && minutes === 59) {

this.currentHours = hours

}

this.currentSeconds = this.pad(seconds)

this.currentMinutes = this.pad(minutes)

this.currentHours = this.pad(hours)

},

// 每秒更新

updateTime() {

this.remainingTime = Math.max(0, this.remainingTime - 1)

this.updateDisplayTime()

if (this.remainingTime <= 0) {

this.clearTimer()

this.$emit('timeup')

}

},

// 补零函数

pad(n) {

return n < 10 ? '0' + n : n

},

// 清除定时器

clearTimer() {

if (this.timer) {

clearInterval(this.timer)

this.timer = null

}

}

},

watch: {

endTimestamp: {

immediate: true,

handler(newVal) {

this.initCountdown()

}

}

},

created() {

}

}

</script>

<style lang="scss" scoped>

.countdown {

display: flex;

align-items: center;

justify-content: space-between;

.time-box {

width: 52rpx;

height: 52rpx;

background: #313131;

line-height: 52rpx;

text-align: center;

border-radius: 10rpx 10rpx 10rpx 10rpx;

font-weight: bold;

}

.colon {

color: #313131;

margin: 0 12rpx;

}

}

</style>

相关推荐
敲敲了个代码1 天前
UniApp 多页面编译优化:编译时间从10分钟到1分钟
开发语言·前端·javascript·学习·uni-app
00后程序员张1 天前
iOS 26 App 运行状况全面解析 多工具协同监控与调试实战指南
android·ios·小程序·https·uni-app·iphone·webview
2501_916007471 天前
iOS 混淆实战,多工具组合完成 IPA 混淆、加固与发布治理(iOS混淆|IPA加固|无源码混淆|App 防反编译)
android·ios·小程序·https·uni-app·iphone·webview
2501_915918411 天前
怎么上架 App?iOS 应用上架完整流程详解与跨平台发布实战指南
android·ios·小程序·https·uni-app·iphone·webview
2501_916008891 天前
iOS 混淆工具链实战 多工具组合完成 IPA 混淆与加固(iOS混淆|IPA加固|无源码加固|App 防反编译)
android·ios·小程序·https·uni-app·iphone·webview
SY_FC1 天前
uniapp textarea标签 在ios真机上出现高度拉长问题
uni-app
游戏开发爱好者82 天前
HTTPS 内容抓取实战 能抓到什么、怎么抓、不可解密时如何定位(面向开发与 iOS 真机排查)
android·网络协议·ios·小程序·https·uni-app·iphone
shykevin2 天前
uni-app x导航区域跳转
windows·uni-app
2501_915106322 天前
iOS 混淆与 IPA 加固全流程,多工具组合实现无源码混淆、源码防护与可审计流水线(iOS 混淆|IPA 加固|无源码加固|App 防反编译)
android·ios·小程序·https·uni-app·iphone·webview
游戏开发爱好者82 天前
用多工具组合把 iOS 混淆做成可复用的工程能力(iOS混淆 IPA加固 无源码混淆 Ipa Guard)
android·ios·小程序·https·uni-app·iphone·webview