uniapp - 倒计时组件-优化循环时间倒计时

news2024/10/5 16:21:30

使用定时器的规避方法
为了避免定时器误差导致倒计时计算错误,可以采用一些规避方法,比如将倒计时被中断时的剩余时间记录下来,重新开启定时器时再将这个剩余时间加到新的计算中。同时,为了避免定时器延迟,可以在每次执行回调函数时,记录当前时间戳,再计算与上一次执行回调函数的时间差,来调整倒计时的时间。
在这里插入图片描述

1.子组件

<template>
	<view class="time">
	<view class="red-box" >{{days>=10?days:'0'+days}}</view>
		<view class="fz-12 color3" style="margin: 0 2px;"></view>
		<view class="red-box" >{{hours>=10?hours:'0'+hours}}</view>
		<view class="fz-12 color3" style="margin: 0 2px;"></view>
		<view class="red-box">{{minutes>=10?minutes:'0'+minutes}}</view>
		<view class="fz-12 color3" style="margin: 0 2px;"></view>
		<view class="red-box">{{seconds>=10?seconds:'0'+seconds}}</view>
		<view class="fz-12 color3" style="margin: 0 2px;"></view>
	</view>
</template>

<script>
	export default {
		props: {
			targetDate: {
				type: String,
				required: true
			}
		},
		data() {
			return {
				countdownInterval: null,
				days: 0,
				hours: 0,
				minutes: 0,
				seconds: 0
			};
		},
		mounted() {
			this.startCountdown();
		},
		beforeDestroy() {
			clearInterval(this.countdownInterval);
		},
		methods: {
			startCountdown() {
				this.updateCountdown(); // 先立即更新一次
				this.countdownInterval = setInterval(() => {
					this.updateCountdown();
				}, 1000);
			},
			updateCountdown() {
				const now = new Date();
				const target = new Date(this.targetDate);
				const duration = Math.max(0, target - now) / 1000;
				this.days = Math.floor(duration / 86400);
				this.hours = Math.floor((duration % 86400) / 3600);
				this.minutes = Math.floor((duration % 3600) / 60);
				this.seconds = Math.floor(duration % 60);
				if (duration <= 0) {
					clearInterval(this.countdownInterval);
					this.$emit('countdownFinished'); // 触发倒计时结束事件
				}
			}
		}
	};
</script>
<style lang="scss" scoped>
	.time {
		margin-top: 4rpx;
		display: flex;
		color: #ff0000;
		font-size: 22rpx;
		text-align: center;
		align-items: center;

		.red-box {
			font-size: 22rpx;
		}
	}
	.color3{
		color: #ff0000;
		font-size: 22rpx;
	}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/975122.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Golang 新手经常踩的坑

1、 Golang 新手经常踩的坑 1.1 前言 Go 是一门简单有趣的编程语言&#xff0c;与其他语言一样&#xff0c;在使用时不免会遇到很多坑&#xff0c;不过它们大多不是 Go 本身的设计缺陷。如果你刚从其他语言转到 Go&#xff0c;那这篇文章里的坑多半会踩到。 如果花时间学习官…

风向变了!智能汽车何以「降本」

随着软件定义汽车的概念逐步落地&#xff0c;以及底盘、动力、座舱、智驾、车身等不同域&#xff08;分布式或者混合式&#xff09;的功能更新迭代和融合&#xff0c;汽车行业正在意识到&#xff1a;底层硬件架构重构的迫切性。 事实上&#xff0c;早在2016年&#xff0c;作为传…

客户端发现pod并与之通信

客户端发现pod并与之通信 pod需要一种寻找其他pod的方法来使用其他pod提供的服务&#xff0c;不像在没有Kubernetes的世界&#xff0c;系统管理员要在用户端配置文件中明确指出服务的精确IP地址 或者主机名来配置每个客户端应用&#xff0c;但同样的方法在Kubernetes中不适用 …

富硒虫草肉丸系列新品上市—虫草可以“享”着吃

2023年9月4日&#xff0c;鸿祥食品(汕尾市)有限公司探索研发的富硒虫草肉丸全系列新品惊喜亮相&#xff0c;为消费者带来全新的滋补体验。五款以富硒虫草为主要原料&#xff0c;分别以猪肉、鲜虾、牛肉、墨鱼以及牛筋为新食品原料加工而成的虫草类健康新品--“享着丸”系列&…

yolov5运行过程遇到的小问题(随时更新)

1.关于git的问题 解决办法&#xff1a;插入下面代码 import os os.environ["GIT_PYTHON_REFRESH"] "quiet"2.页面太小无法完成操作 解决办法: 如果不好使再考虑降低Batch_Size大小或者调整虚拟内存可用硬盘空间大小&#xff01;&#xff08;调整虚拟内存…

公信力不是儿戏:政府与非营利组织如何利用爱校对提升信息质量

公信力是政府和非营利组织成功的基础&#xff0c;而这种公信力大多来源于对外发布的信息的准确性和可靠性。在这个方面&#xff0c;“爱校对”展现了它的强大能力和实用性。以下我们将具体探讨这两种组织如何通过使用爱校对来提升他们的信息质量。 政府&#xff1a;公开与透明&…

【strapi系列】strapi在登录时调用api/auth/local获取token接口一直报401、403、400错误的问题解决

文章目录 问题描述解决403 forbidden问题解决401 (Unauthorized) error问题调用认证接口需用注意的事项&#xff0c;解决400问题 问题描述 strapi在调用api/auth/local登录接口时&#xff0c;一直报403 forbidden 或 401 (Unauthorized) error问题。 这个接口的作用其实就是使…

02-Linux-IO多路复用之select、poll和epoll详解

前言&#xff1a; 在linux系统中&#xff0c;实际上所有的 I/O 设备都被抽象为了文件这个概念&#xff0c;一切皆文件&#xff0c;磁盘、网络数据、终端&#xff0c;甚至进程间通信工具管道 pipe 等都被当做文件对待。 在了解多路复用 select、poll、epoll 实现之前&#xff…

手写Mybatis:第19章-二级缓存

文章目录 一、目标&#xff1a;二级缓存二、设计&#xff1a;二级缓存三、实现&#xff1a;二级缓存3.1 工程结构3.2 二级缓存类图3.3 二级缓存队列3.3.1 FIFI缓存策略3.3.2 事务缓存3.3.3 事务管理3.3.4 修改一级缓存 3.4 缓存执行器3.4.1 执行器接口3.4.2 执行器抽象基类3.4.…

STM32CUBEMX_创建时间片轮询架构的软件框架

STM32CUBEMX_创建时间片轮询架构的软件框架 说明&#xff1a; 1、这种架构避免在更新STM32CUBEMX配置后把用户代码清除掉 2、利用这种时间片的架构可以使得代码架构清晰易于维护 创建步骤&#xff1a; 1、使用STM32CUBEMX创建基础工程 2、新建用户代码目录 3、构建基础的代码框…

uniapp制作——交友盲盒

在小程序端可以有很多好玩的小玩意&#xff0c;目前网上比较有趣的就是有一个交友盲盒&#xff0c;能抽出和找出对象的一个有趣的小程序&#xff0c;所以今天给大家带来用uniapp搭建的交友盲盒&#xff0c;大家再根据自己的情况去搭建自己的后端和数据库来完成自己的一个小项目…

实现Android APK瘦身99.99%

摘要&#xff1a; 如何瘦身是 APK 的重要优化技术。APK 在安装和更新时都需要经过网络下载到设备&#xff0c;APK 越小&#xff0c;用户体验越好。本文作者通过对 APK 内在机制的详细解析&#xff0c;给出了对 APK 各组成成分的优化方法及技术&#xff0c;并实现了一个基本 APK…

制药行业GMP是什么?

药品制造是一项极其关键的行业&#xff0c;它直接涉及到人民的健康和生命安全。因此&#xff0c;确保药品质量、安全性和有效性至关重要。为了实现这一目标&#xff0c;全球范围内都实施了药品生产质量管理规范&#xff0c;通常被简称为GMP&#xff08;Good Manufacturing Prac…

Java8新特性stream和parallelStream有什么区别

1 stream和parallelStream的区别 1.Stream 是在 Java8 新增的特性&#xff0c;普遍称其为流&#xff1b;它不是数据结构也不存放任何数据&#xff0c;其主要用于集合的逻辑处理。 2.Stream流是一个集合元素的函数模型&#xff0c;它并不是集合&#xff0c;也不是数据结构&…

是真卷?还是内耗?这次面试造的火箭着实有点离谱

大家好&#xff0c;我是冰河~~ 都说面试造火箭&#xff0c;工作拧螺丝&#xff0c;不过这次面试造的着实有点离谱&#xff01; 事情是这样的&#xff0c;昨天在冰河的知识星球微信群里&#xff0c;一名小伙伴发了一张面试常州一家公司的面试题的图片&#xff0c;瞬间吸引了我…

十个响应式页面项目

十个响应式页面项目 上接 53 个特效&#xff1a; 53 个 CSS 特效 153 个 CSS 特效 253 个 CSS 特效 3&#xff08;完&#xff09; 照例&#xff0c;预览地址在 http://www.goldenaarcher.com/html-css-js-proj/&#xff0c;git 地址&#xff1a; https://github.com/Goldena…

Seata处理分布式事务之1.7.0

https://blog.csdn.net/zhang33565417/article/details/122768300 1.5.0之后版本发生了很大改变 1.seata安装 1.1官网地址 http://seata.io/zh-cn/ 1.2下载地址 https://github.com/seata/seata/releases 下载的是seata-server-1.7.0.zip 1.3seata相关配置的修改 seata-…

Python学习 -- Math模块和Random模块

math 模块提供了许多数学函数&#xff0c;用于执行各种数学运算。以下是一些常用的 math 函数以及相应的示例代码&#xff1a; math.sqrt(x): 计算平方根。 import math x 25 square_root math.sqrt(x) print(f"√{x} {square_root}") math.pow(x, y): 计算 x …

好用的电容笔有哪些推荐?适合开学买电容笔推荐

尤其是在苹果品牌推出了专属Pencil系列之后&#xff0c;苹果原装的Pencil系列产品&#xff0c;更是将价格压到了所有人都无法企及的地步。市场上有不少可以替代苹果Pencil的平替电容笔&#xff0c;无论是做笔记还是专业的绘画&#xff0c;都完全足够了。在此&#xff0c;我将为…

电视盒子什么品牌好?数码博主盘点目前性能最好的电视盒子

电视盒子是非常重要的&#xff0c;老人小孩基本每天都会看电视&#xff0c;而电视盒子作为电视盒子的最佳拍档销量十分火爆&#xff0c;我自己每个月都会测评几次电视盒子&#xff0c;今天给大家详细解读一下电视盒子什么品牌好&#xff0c;看看目前性能最好的电视盒子是哪些&a…