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>

相关推荐
Q_Q5110082858 小时前
python+uniapp基于微信小程序团购系统
spring boot·python·微信小程序·django·uni-app·node.js·php
炒毛豆8 小时前
uniapp微信小程序+vue3基础内容介绍~(含标签、组件生命周期、页面生命周期、条件编译(一码多用)、分包))
vue.js·微信小程序·uni-app
盛夏绽放13 小时前
关于 uni-app 与原生微信小程序中的生命周期 —— 一次“生命旅程”的解读
微信小程序·小程序·uni-app
知识分享小能手14 小时前
uni-app 入门学习教程,从入门到精通,uni-app 基础知识详解 (2)
前端·javascript·windows·学习·微信小程序·小程序·uni-app
2501_9160088915 小时前
iOS 发布全流程详解,从开发到上架的流程与跨平台使用 开心上架 发布实战
android·macos·ios·小程序·uni-app·cocoa·iphone
风清云淡_A17 小时前
【uniapp】uni.uploadFile上传数据多出一个304的get请求处理方法
uni-app
shykevin17 小时前
uni-app x商城,商品列表组件封装以及使用
windows·uni-app
cesske18 小时前
uniapp 编译支付宝小程序canvas 合成图片实例,支付宝小程序 canvas 渲染图片 可以换成自己的图片即可
小程序·uni-app·apache
Q_Q5110082851 天前
python+uniapp基于微信小程序的旅游信息系统
spring boot·python·微信小程序·django·flask·uni-app·node.js
2501_916007471 天前
iOS 混淆工具链实战,多工具组合完成 IPA 混淆与加固(iOS混淆|IPA加固|无源码混淆|App 防反编译)
android·ios·小程序·https·uni-app·iphone·webview