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>

相关推荐
雪芽蓝域zzs3 小时前
uniapp 国密sm2加密
uni-app
打不着的大喇叭13 小时前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
zengzehui13 小时前
uniapp启动图被拉伸问题
uni-app
iOS阿玮15 小时前
AppStore教你一招免备案的骚操作!
uni-app·app·apple
ModyQyW1 天前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
耶啵奶膘2 天前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
耶啵奶膘3 天前
uniapp——地图路线绘制map
uni-app
shadouqi3 天前
uniapp实现图片预览,懒加载,下拉刷新等
uni-app
走,带你去玩3 天前
uniapp 微信小程序水印
微信小程序·小程序·uni-app
菌菇汤3 天前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app