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>

相关推荐
Oscar_02089 小时前
uniapp+ts 多环境编译
前端·vue.js·typescript·uni-app
cesske10 小时前
uniapp打包报错:重新在manifest.json中生成自己的APPID
uni-app·json
小马大咖11 小时前
在UniApp中开发微信小程序实现图片、音频和视频下载功能
微信小程序·小程序·uni-app
发现你走远了17 小时前
『uniapp』uni-share 分享功能 使用例子(保姆级图文)
uni-app·vue·分享·uni-share
_龙衣20 小时前
uni-app/vue2:微信小程序实现文件流的下载及预览
微信小程序·uni-app·notepad++
游王子1 天前
uni-app(3):互相引用
uni-app
游王子2 天前
uni-app(4):js语法、css语法
uni-app
晓晓莺歌2 天前
uniapp图片下载(微信H5可用、小程序应该也通用)
uni-app
Vue10242 天前
uniapp 嵌入鸿蒙原生组件 具体步骤
华为·uni-app·harmonyos
耶啵奶膘2 天前
uniapp+vue3 随机、换一批
uni-app