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>