当前位置：首页 > news >正文

uniapp 实现时分秒分别倒计时

news 来源：原创 2025/5/15 20:10:56

效果

<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>

相关文章：

uniapp 实现时分秒分别倒计时

效果 <view class"issue-price-countdown"> <CountDown :endTimestamp"1745996085000"></CountDown> </view> 引入组件 import CountDown from /components/CountDown.vue; <template> <view class&qu…...

编程日记 2025/5/15 20:10:56

ubuntu下一些环境配置

1、qhull sudo apt install qhull-bin libqhull-dev 2、cmake wget -O - https://apt.kitware.com/keys/kitware-archive-latest.asc 2>/dev/null | gpg --dearmor - | sudo tee /usr/share/keyrings/kitware-archive-keyring.gpg >/dev/null echo "deb [signed…...

编程日记 2025/5/10 13:12:18

el-check-box多选框和el-select下拉框组合

<template><div><el-selectv-model"selectedValues"multiplecollapse-tagsplaceholder"请选择电压等级"change"handleChange"><el-option key"all" value"all" class"select-all-option">…...

编程日记 2025/5/1 9:03:25

SPSS PCA+判别分析

1， 主成分分析PCA 我们只要对数化的变量数据： （1）对数据进行标准化处理： 选择【分析】—【描述统计】—【描述】添加要标准化的变量，勾选【将标准化值另存为变量(Z)】，再点确定 SPSS软件本身不…...

编程日记 2025/5/1 9:03:24

【阿里云大模型高级工程师ACP习题集】2.7 通过微调增强模型能力 (下篇)（⭐️⭐️⭐️ 重点章节！！！）

习题集：【单选题】在阿里云大模型微调中，以下关于预训练和微调的说法，错误的是？（） A. 预训练使用自监督/无监督学习方式 B. 微调通常在大规模通用数据集上进行 C. 预训练模型可以为下游任务提供初始模型 D. 微调能让模型适应具体的下游任务【多选题】LoRA微调中，低秩…...

编程日记 2025/5/1 9:03:23

ag-grid-react 列表导出csv列表getDataAsCsv （自定义导出列表配置）自定义新增，修改导出内容

1.ag-grid-react getDataAsCsv 新增导出字段方法：临时添加列再导出你可以通过 columnApi.setColumnDefs() 临时添加需要导出的字段，然后再调用 getDataAsCsv，导出后再恢复原来的列。 import { useRef } from react; import { AgGridReac…...

编程日记 2025/5/1 9:03:19

深度解析：Vue.js 性能优化全景指南（从原理到实践）

前言随着 Vue.js 应用复杂度提升，性能问题逐渐成为制约用户体验的瓶颈。本文将系统性地剖析 Vue.js 性能优化的核心原理、关键技巧、工具链支持，并通过真实案例演示如何提升大型应用的运行时性能与加载效率。一、渲染层优化：减少不必要的…...

编程日记 2025/5/1 9:03:18

Linux -- 操作系统

一、冯•诺依曼体系结构 1、概念 # 在计算机发展历程中，核心作用就是解决人类问题。为了实现这一目标，计算机系统需具备特定结构和功能。首先，计算机要配备输入设备，如鼠标、键盘、摄像头、话筒、磁盘（文件读取&…...

编程日记 2025/5/1 9:02:16

（初探）强化学习路径规划的理论基础与代码实现

一、强化学习路径规划的核心理论 1.1 马尔可夫决策过程（MDP）框架理论基础： 路径规划问题可以建模为马尔可夫决策过程（Markov Decision Process, MDP），由五元组(S, A, P, R, γ)定义。其中，S&…...

编程日记 2025/5/1 9:02:12

分布式链路ID实现

实现原理 api入口或者网关处生成traceId，调用服务时优先检查是否头部带有traceId，有则复用，没有则生成实现方式处理api相关traceId 1.通过filter复用或者生成traceId，并且将traceId输入到响应头中 import java.io.IOExcept…...

编程日记 2025/5/1 9:01:10

Java @Transactional事物隔离级别和默认值详解

在 Java 开发中，Transactional 注解是 Spring 框架中用于管理事务的重要工具。它提供了多种配置选项，其中事务隔离级别是一个关键属性。本文将深入探讨 Transactional 注解的隔离级别默认值，并通过具体代码示例帮助你更好地理解和应用事务隔离…...

编程日记 2025/5/1 9:01:09

ComputeShader绘制全屏纯色纹理

参考 Getting Started With Compute Shaders In Unity 环境 Win10 Unity20194.40 全屏纯色纹理示例使用ComputerShader逐个像素设置颜色 ComputeShader脚本设置纹理颜色 #pragma kernel CSMainRWTexture2D<float4> Result;//纹理 half4 solidColor;//颜色[numth…...

编程日记 2025/5/1 9:01:08

关于 MCP 的理论知识学习

文章目录 1. 写在最前面2. 基本概念2.1 Why MCP2.1.1 大模型访问的局限2.1.2 过渡阶段—Function Call2.1.3 当前阶段— MCP 3. 碎碎念4. 参考资料 1. 写在最前面最近有一项任务是写旧版本迁移到新版本的支持文档，文档的编写是借助于 cursor 帮忙写的。但是实现的…...

编程日记 2025/5/1 9:01:07

关于vue+iview中tabs嵌套及实际应用

最近在用vueiview框架做项目，在实际做项目中根据需求用到iview中的tabs标签页嵌套以及标签页增加删除功能。想着记录下来，以后可能会再用到。下面是页面。由于是公司的项目具体有些地方我会打码，不影响阅读！ 1607751577(1).jpg ta…...

编程日记 2025/5/1 9:00:05

26考研——输入/输出系统_I/O 方式_DMA 方式（7）

408答疑文章目录三、I/O 方式DMA 方式DMA 方式的特点DMA 控制器的组成DMA 的传送方式停止 CPU 访存周期挪用DMA 与 CPU 交替访存示例分析DMA 的传送过程 DMA 方式和中断方式的区别四、参考资料鲍鱼科技课件26王道考研书三、I/O 方式 DMA 方式 DMA 方式是一种完全由硬件进…...

编程日记 2025/5/1 9:00:03

处理vue3热加载后axios的请求重复访问的问题

在请求拦截上加上判断，热加载时清空拦截器 if (import.meta.hot) { const interceptorsRe axios.interceptors.response.handlers; const interceptorsRq axios.interceptors.request.handlers; interceptorsRe .length 0; // 清空已有响应拦截器 interceptorsR…...

编程日记 2025/5/1 9:00:02

【教学类-102-21】蝴蝶三色图作品3——异型书蝴蝶“满格变形图”一页2图、一页4图

前期设计将蝴蝶撑满整个单元格，满格变形图。确保蝴蝶图案最大化【教学类-102-20】蝴蝶三色图作品2——卡纸蝴蝶“满格变形图”（滴颜料按压对称花纹、原图切边后变形放大到A4横版最大化）-CSDN博客文章浏览阅读572次，点赞7次，收藏3次。【教学类-102-20】蝴蝶三色图作品2…...

编程日记 2025/5/1 8:58:58

【昇腾】Benchmark

1. MindIE 服务化 1.1 环境准备镜像传送门参数说明： device用于挂载卡，下面的例子是挂载了8张卡倒数第二行的镜像名称记得修改 docker run -itd --privileged --namemindie --nethost \--shm-size 500g \--device/dev/davinci0 \--device/dev/da…...

编程日记 2025/5/1 8:58:58

【阿里云大模型高级工程师ACP学习笔记】2.7 通过微调增强模型能力 (下篇)（⭐️⭐️⭐️ 重点章节！！！）

学习目标特别说明：由于这一章节是2025年3月官方重点更新的部分，新增内容非常多，因此我不得不整理成上、下两篇，方便大家参考。备考阿里云大模型高级工程师ACP认证时，深入钻研《2.7通过微调增强模型能力(下篇)》，期望达成以下目标：掌握高效微调技术：深入理解预训练与…...

编程日记 2025/5/1 8:58:55

【RustDesk 】中继1：压力测试 Python 版 RustDesk 中继服务器

测试 Python 版 RustDesk 中继服务器测试我们实现的中继服务器有几种方法，从简单到复杂依次如下： 1. 基本连接测试客户端创建一个简单的测试客户端来验证中继服务器的基本功能： 2. 用两个测试客户端测试中继功能要测试完整的中继功能，你需要运行两个客户端实例来模拟…...

编程日记 2025/5/1 8:57:51

MCP 自定义python实现server服务，支持离线调用和远程接口访问形式

参考： https://blog.csdn.net/lingding_cn/article/details/147355620 其他百炼、mcp服务网址支持链接访问 server服务代码：出行酒店查询 mcp server代码编写参考：https://blog.csdn.net/weixin_42357472/article/details/146503660 api_mcp_server.py import pickle im…...

编程日记 2025/5/1 8:57:51

搭建PCDN大节点，服务器该怎么配

搭建P2P大节点时，服务器要怎么配呢？需要综合考虑硬件性能、网络带宽、存储能力、系统架构以及安全性等多个方面，以确保节点能够高效、稳定地运行。一、硬件配置 CPU：选择高性能的多核处理器，以满足高并发处理需求。核…...

编程日记 2025/5/1 8:57:50

JavaScript的3D库有哪些？

JavaScript的3D库有哪些？ 在3D开发领域，JavaScript提供了多种库和框架，使开发者能够在浏览器中创建丰富的3D体验。以下是一些流行的3D方面的JavaScript库： Three.js：这是最著名的用于创建3D图形的JavaScript库之一。它…...

编程日记 2025/5/1 8:57:49

如何解决matlab/octave画图legend图例颜色一样的问题？

预期目的： 本意想用legend在画图的时候把对应线段的颜色对应起来，实际按照如下代码运行得不到预期的结果。 x [1:10;11:20]y1 x.^2;y2 0.5.*x.^3plot(x,y1,r,x,y2,b);legend(y x^2,y x^3) 代码运行结果如下： 原因是matlab /octave默…...

编程日记 2025/5/1 8:56:45

[第十五章][15.3.2 shellcode注入攻击]ret2shellcode+[NewStarCTF 公开赛赛道]ret2shellcode

1、[NewStarCTF 公开赛赛道]ret2shellcode IDA 反编译看伪代码： buf mmap((void *)0x233000, 0x1000uLL, 7, 34, -1, 0LL); 这里直接给了 buf 7 的权限，即可读可写可执行，那么 shellcode 肯定写到 buf 里 buf 的映射地址：0x23…...

编程日记 2025/5/1 8:55:42

边缘计算：数字世界的”末梢神经系统”解析-优雅草卓伊凡

边缘计算：数字世界的”末梢神经系统”解析-优雅草卓伊凡一、边缘计算深度解析 1.1 边缘计算的定义与架构边缘计算（Edge Computing）是一种分布式计算范式，它将数据处理能力从传统的集中式云数据中心推向网络边缘，更…...

编程日记 2025/5/1 8:55:41

基于CATIA参数化球体建模的自动化插件开发实践——NX建模之球体命令的参考与移植

引言在CATIA二次开发领域，Python因其灵活性和丰富的库支持逐渐成为高效工具开发的首选语言。本文将以笔者开发的CATIA球体自动化建模工具为例，参考NX软件中高效球体创建命令，深度解析基于PySide6 GUI框架与pycatia接口库的集成…...

编程日记 2025/5/1 8:53:38

ActiveMQ 可靠性保障：消息确认与重发机制（一）

引言在当今分布式系统的架构中，消息中间件扮演着举足轻重的角色，而 ActiveMQ 作为一款广泛使用的开源消息中间件，凭借其对 JMS（Java Message Service）规范的支持、多种消息传输协议、丰富的消息模型（如点对…...

编程日记 2025/5/1 8:53:37

麒麟、UOS系统在线打开word文件并提取修订痕迹

麒麟、UOS系统在线打开word文件并提取修订痕迹查看本示例演示效果（Windows版） 查看本示例演示效果（国产版）本示例关键代码的编写位置，请参考“开始 - 快速上手”里您所使用的开发语言框架的最简集成代码注意本文中…...

编程日记 2025/5/1 8:52:35

Vue3笔记摘录

1.Vue3整体知识概览图 2.ref与reactive具体使用区别 2-1 基本类型处理 const count1 ref(0) 使用ref自动转化为数字类型const count2 reactive(0) 参数必须是对象类型 2-2 具体使用过程 // ref 处理对象（自动解包） const user ref({name: John,a…...

编程日记 2025/5/1 8:52:34

大力探索“AI·Life爱生活”项目峰会暨战略投资签约仪式成功举办

2025年4月26日，杭州西溪雷迪森大酒店内气氛热烈非凡，大力探索（杭州）科技有限公司主办的“大力探索项目峰会暨战略投资签约仪式”在此隆重开启。这场汇聚了数百位行业精英与企业代表的盛会，不仅是一场智慧的碰撞&#x…...

编程日记 2025/5/1 8:52:33

复刻低成本机械臂 SO-ARM100 材料齐活篇

视频讲解： 复刻低成本机械臂 SO-ARM100 材料齐活篇打印件基本ok，总共12个，尴尬的是github又更新了so-101，不过看了下还好只是优化了走线和几个结构键，影响不大，大不了后面再重新打印（有3d打印机…...

编程日记 2025/5/1 8:52:33

解读 AI绘画工作流ComfyUI Stable Diffusion

ComfyUI 是什么？图像工作流又是什么？认识ComfyUI 从名词术语来看： ComfyUI是一个基于节点流程的Stable Diffusion操作界面，通过自定义节点、拖拽连线实现精准的工作流定制，以完成更复杂的图像生成工作。 </...

编程日记 2025/5/1 8:51:29

北极星新美团核销接口对接

美团吃相难看，东哥就应该干掉他申请官方接口一般来说很难了现在无非就是几种第三方开放出来的接口按量收费，但是需要一次性充钱收首期的技术服务费 ，然后按年收费就是我们技术自己解决的方式，方便便宜 ,代码齐全&#xff0c…...

编程日记 2025/5/1 8:51:28

理解数据库存储以及查询（集合）

理解数据库存储以及查询（集合） 基本概念定义主键集合： 定义：主键集合是由数据库表中的主键组成的一个集合。主键是表中唯一标识每一行记录的属性（或属性组合）。特性：主键集合包含表的主键属性…...

编程日记 2025/5/1 8:51:28

（Go Gin）Gin学习笔记（四）Gin的数据渲染和中间件的使用：数据渲染、返回JSON、浅.JSON()源码、中间件、Next()方法

1. 数据渲染 1.1 各种数据格式的响应 json、结构体、XML、YAML类似于java的properties、ProtoBuf 1.1.1 返回JSON package mainimport ("github.com/gin-gonic/gin""net/http" )func main() {r : gin.Default()r.POST("/demo", func(res *gi…...

编程日记 2025/5/1 8:50:26

机器视觉橡胶制品检测的应用

橡胶制品在生产过程中易出现划痕、气泡、缺料、毛边、杂质嵌入等多种缺陷，这些缺陷往往微小且随机分布，人工检测不仅耗时，漏检率也居高不下。尤其在汽车密封件、医疗硅胶制品等高端领域，微米级的缺陷都可能导致产品失效&#xff0…...

编程日记 2025/5/1 8:50:25

JavaScript：从JS的执行机制到location对象

一、JS执行机制 （1）JS是单线程 JavaScript语言的一大特点就是单线程，也就是同一时间只能做一件事。因为JavaScript是为了处理页面中的用户交互，以及制作DOM二诞生的。比如我们对某个DOM元素进行添加和删除操作，这个不…...

编程日记 2025/5/1 8:50:24

Sigmoid函数简介及其Python实现

文章目录一、Sigmoid 函数简介1. 数学公式2. 关键特性3. 应用场景二、Python 实现1. 使用 math 库 (适用于单个数值)2. 使用 numpy 库 (适用于数值、列表、数组、矩阵)3. 使用 scipy.special.expit (数值稳定) 三、小结一、Sigmoid 函数简介 Sigmoid 函数（也称为…...

编程日记 2025/5/1 8:50:24

全局事件总线EventBus的用法

全局事件总线 EventBus 在前端开发中是一种用于实现组件间通信的机制，适用于兄弟组件或跨层级组件间的数据传递。 1. 创建全局 EventBus 实例在前端项目中，先创建一个全局的 EventBus 实例。在 Vue 中，可以通过创建一个新的 Vue 实例来实现…...

编程日记 2025/5/1 8:49:22

嵌入式Linux系统中的线程信号处理：策略与实践

在嵌入式Linux系统的开发中，多线程编程是提升系统性能和响应速度的重要手段。然而，多线程环境下的信号处理却是一个复杂且需要细致处理的问题。信号，作为进程间通信的一种机制，在嵌入式系统中常用于处理外部事件或中断。但在多线程…...

编程日记 2025/5/1 8:49:21

CCM/TCM在STM32中的含义和用途

CCM/TCM在STM32中的含义和用途 CCM（Core Coupled Memory）和TCM（Tightly Coupled Memory）是ARM架构中的特殊内存类型，它们都表示与CPU核心紧密耦合的内存区域。这些内存具有一些特殊特性，使其在某些应用场景…...

编程日记 2025/5/1 8:48:17

【网络原理】《TCP/IP 协议深度剖析：从网络基础到协议核心》

文章目录一、网络基础1. 认识IP地址概念作用格式组成子网掩码 2、认识Mac地址一跳一跳的网络数据传输 3. 网络设备及相关技术集线器：转发所有端口交换机：MAC地址转换表转发对应端口主机：网络分层从上到下封装主机&路由器：ARP…...

编程日记 2025/5/1 8:47:14

Windows系统编译支持GPU的llama.cpp

Windows系统编译支持GPU的llama.cpp git clone https://github.com/ggerganov/llama.cpp.git cd llama.cpp mkdir build cd buildcmake .. -G "Visual Studio 17 2022" -DGGML_CUDAON -DCMAKE_BUILD_TYPERelease -DCMAKE_CUDA_ARCHITECTURES"86"cmake --b…...

编程日记 2025/5/1 8:47:13

Unity编辑器扩展之导出项目中所有预制体中文本组件文字内容

一、最后导出的Excel文件效果如下图所示：二、在Unity的Editor目录下，新建一个名为FindChineseInPrefabs的C#脚本，Copy以下代码到你新建的名为FindChineseInPrefabs的C#脚本中去，最后一定要保存文件哈。 using UnityEditor; using UnityEngine; using UnityEngine.UI; usi…...

编程日记 2025/5/1 8:46:10

高效管理远程服务器Termius for Mac 保姆级教程

以下是 Termius for Mac 保姆级教程，涵盖安装配置、核心功能、实战案例及常见问题解决方案，助你高效管理远程服务器（如Vultr、AWS等）。一、Termius 基础介绍 1. Termius 是什么？ 跨平台SSH客户端：支持Ma…...

编程日记 2025/5/1 8:46:09

WPF框架中常用算法

WPF框架中常用算法与实现一、排序算法 1. 快速排序 (Quick Sort) 应用场景：大数据集合排序、性能敏感场景 public static void QuickSort(IList<int> list, int left, int right) {if (left < right){int pivotIndex Partition(list, left, r…...

编程日记 2025/5/1 8:45:06

【Java函数式编程-58】Java函数式编程深度解析

函数式编程(Functional Programming)作为一种编程范式，近年来在Java生态中获得了越来越多的关注和应用。自Java 8引入Lambda表达式和Stream API以来，函数式编程风格在Java开发中逐渐普及。本文将深入探讨Java中函数式编程的核心概念、实践技巧以及在实际…...

编程日记 2025/5/1 8:45:05

解决vscode cmake提示检测到 #include 错误

一、问题 cmake已经包含了动态库文件，依然提示“检测到 #include 错误。请更新 includePath。” 二、解决方案 Ctrl Shift P进入CPP编辑配置，然后在JSON中加入下面一行： "configurationProvider": "ms-vscode.cmake-tools&…...

编程日记 2025/5/1 8:45:04

Microsoft .NET Framework 4.8 离线安装包下载

简介Microsoft .NET Framework 4.8 是对 Microsoft .NET Framework 4、4.5、4.5.1、4.5.2、4.6、4.6.1、4.6.2、4.7、4.7.1 和 4.7.2 的高度兼容的就地更新。脱机程序包可用于因无法连接 Internet 而导致 Web 安装程序无法使用的情况。此包比 Web 安装程序大，并且…...

编程日记 2025/5/1 8:45:03