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类似抖音视频滑动
uni-app
默魔9 小时前
uniapp 微信小程序点击开始倒计时
微信小程序·小程序·uni-app
shmily ....1 天前
医疗预约系统中的录音与图片上传功能实现:Vue3+Uniapp 实战
uni-app
小阿技术1 天前
uniapp制作一个个人页面
uni-app
小阿技术1 天前
uniapp制作一个视频播放页面
uni-app
小周同学:1 天前
uni-app获取手机当前连接的WIFI名称
智能手机·uni-app
书山有路勤为径~1 天前
【解决问题】HBuilderX窗口文字太小
uni-app
qq_424409192 天前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
2501_915918412 天前
Fiddler中文版全面评测:功能亮点、使用场景与中文网资源整合指南
android·ios·小程序·https·uni-app·iphone·webview
不知名It水手2 天前
uniapp运行项目到ios基座
ios·uni-app·cocoa