Vue3实现24小时倒计时

news2024/11/17 6:46:47
  1. 方法一:时间戳(24小时以内,毫秒为单位)转成时间,并且倒计时
    效果预览:
<script>
// 剩余时间的时间戳,24小时的时间戳是86400000
const exTime = ref('86400000')
// 支付时间期限
const payTime = ref('')
const maxtime = ref(0)
//倒计时(时间戳,毫秒单位)转换成秒
maxtime.value = parseInt(exTime.value) / 1000
// // 时、分、秒
// const hour = ref(0)
// const minutes = ref(0)
// const seconds = ref(0)
// if (hour.value != 0) {
     
//   maxtime.value = hour.value * 60
// }
// if (minutes.value != 0) {
     
//   maxtime.value += minutes.value * 60
// }
// if (seconds.value != 0) {
     
//   maxtime.value += seconds.value
// }
const checkTime = (i: any) => {
     
  if (i < 10) {
     
    i = "0" + i;
  }
  return i;
}
// 定时器
const timer = setInterval(() => {
     
  countDown()
}, 1000)
/**
 * 24小时倒计时
 * @param 
 * @returns {string}
 */
const countDown = () => {
     

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

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

相关文章

java 工程管理系统源码+项目说明+功能描述+前后端分离 + 二次开发

​ ​工程项目管理系统是指从事工程项目管理的企业&#xff08;以下简称工程项目管理企业&#xff09;受业主委托&#xff0c;按照合同约定&#xff0c;代表业主对工程项目的组织实施进行全过程或若干阶段的管理和服务。 如今建筑行业竞争激烈&#xff0c;内卷严重&#xff0c…

OPENCV实现ORB特征检测

# -*- coding:utf-8 -*- """ 作者:794919561 日期:2023/8/31 """ import cv2 import numpy as np# 读图像 img = cv2.imread(F:\\learnOpenCV\\openCVLearning\\pictures\\chess.jpg)

应急日光灯 补光灯 太阳能路灯 升压LED电源驱动恒流IC

产品说明 AP9196 是一系列外围电路简洁的宽调光比升压调光 恒流驱动器&#xff0c;适用于 3-40V 输入电压范围的 LED 照明领域。 AP9196 采用我司专利算法&#xff0c;可以实现高精度的恒流 效果&#xff0c;输出电流恒流精度≤3&#xff05;&#xff0c;电压工作范围为 5-40V&…

重庆市人才系统注册流程

1、IE浏览器打开重庆市科技局官网首页(http://kjj.cq.gov.cn/) 2、选择“重庆市科技管理信息系统”—选择“科技资源共享”—板块—注册—选择“个人注册”—填写注册信息—注册 3、注册—选择“个人注册”—填写注册信息—注册—登录 4、选择“科技管理系统“ 5、选择“科技人…

Linux进程概念及其状态

文章目录 &#x1f347;1. 什么是进程&#x1f348;1.1 概念&#x1f348;1.2 理解进程 &#x1f34b;2. Linux的PCB&#x1f34e;3. 查看进程 & 杀死进程&#x1f352;4. 系统调用获取进程标识符&#x1f353;4.1 进程PID&#x1f353;4.2 父进程PPID &#x1f346;5. 系统…

MetInfo5.0文件包含漏洞

MetInfo历史版本与文件 环境在这里下载&#xff0c;使用phpstudy搭建 我们来看到这个index.php&#xff0c;如下图所示&#xff0c;其中定义了fmodule变量与module变量&#xff0c;其中require_once语句表示将某个文件引入当前文件&#xff0c;在这个代码中&#xff0c;通过r…

【JasperReports笔记06】JasperReport报表开发之常见的组件元素(Table、Subreport、Barcode等)

这篇文章&#xff0c;主要介绍JasperReport报表开发之常见的组件元素&#xff08;Table、Subreport、Barcode等&#xff09;。 目录 一、基础组件元素 1.1、StaticText 1.2、TextField 1.3、Image 1.4、Break分页 1.5、Rectangle矩形区域 1.6、Ellipse椭圆区域 1.7、Li…

基于MQTT协议的物联网关

随着工业领域的不断发展&#xff0c;数字化转型已经成为企业迈向未来的必由之路。在这个数字化浪潮中&#xff0c;HiWoo Box以其强大的功能和创新的设计&#xff0c;在工业物联网领域被越来越多的人所熟知。特别是其基于MQTT协议的物联网关能力&#xff0c;也为企业实现智能化数…

喷泉码浅谈

01、喷泉码简介 喷泉码&#xff08;Fountain Code&#xff09;是一种在无线通信、数据传输和网络编码领域中使用的错误纠正技术。它与传统的纠错码和编码方法有所不同&#xff0c;喷泉码被设计用于在不确定信道条件下的高效数据传输。传统的纠错码&#xff08;如海明码、RS码等…

无涯教程-Android - RadioButton函数

RadioButton有两种状态:选中或未选中,这允许用户从一组中选择一个选项。 Radio Button 示例 本示例将带您完成一些简单的步骤,以展示如何使用Linear Layout和RadioButton创建自己的Android应用程序。 以下是修改后的主要Activity文件 src/MainActivity.java 的内容。 packa…

【算法】函数渐近的界基础知识及定理

创作不易&#xff0c;本篇文章如果帮助到了你&#xff0c;还请点赞 关注支持一下♡>&#x16966;<)!! 主页专栏有更多知识&#xff0c;如有疑问欢迎大家指正讨论&#xff0c;共同进步&#xff01; &#x1f525;c系列专栏&#xff1a;C/C零基础到精通 &#x1f525; 给大…

Spring依赖注入(DI)

目录 构造器注入 set注入 拓展注入 bean的作用域 Singleton Prototype Dependency Injection 依赖 : 指Bean对象的创建依赖于容器 . Bean对象的依赖资源 . 注入 : 指Bean对象所依赖的资源 , 由容器来设置和装配 . 构造器注入 具体实现&#xff1a;SpringIOC创建对象的…

电力行业浪涌保护器应用方案

电力行业是一个涉及到高压、大电流、复杂环境的领域&#xff0c;对于电气设备的安全和可靠性有着极高的要求。在电力行业中&#xff0c;浪涌是一种常见的电力质量问题&#xff0c;它指的是在电气系统中出现的瞬时过电压或过电流&#xff0c;可能由雷击、开关操作、短路故障等因…

算法通关村——解析堆的应用

在数组中找第K大的元素 LeetCode21 Medium 我们要找第 K 大的元素&#xff0c;如果我们找使用大堆的话那么就会造成这个堆到底需要多大的&#xff0c;而且哪一个是第 K 的的元素我们不知道是哪一个索引&#xff0c;我们更想要的结果就是根节点就是我们要找的值&#xff0c;所以…

java之SpringBoot基础、前后端项目、MyBatisPlus、MySQL、vue、elementUi

文章目录 前言JC-1.快速上手SpringBootJC-1-1.SpringBoot入门程序制作&#xff08;一&#xff09;JC-1-2.SpringBoot入门程序制作&#xff08;二&#xff09;JC-1-3.SpringBoot入门程序制作&#xff08;三&#xff09;JC-1-4.SpringBoot入门程序制作&#xff08;四&#xff09;…

cocosCreator 之 微信小游戏打包

版本&#xff1a; v3.8.0 环境&#xff1a; Mac 介绍 cocosCreator 支持将游戏发布到多个小游戏平台&#xff0c;并提供了打包等流程处理。 本篇文章主要讲述下微信小游戏的发布流程相关。更多内容参考官方文档&#xff1a; 发布到小游戏平台 微信小游戏的发布相关&#xff…

2023-8-31 Floyd求最短路

题目链接&#xff1a;Floyd求最短路 #include <iostream> #include <algorithm> #include <cstring>using namespace std;const int N 210, INF 1e9;int n, m, Q;int d[N][N];void floyd() {for(int k 1; k < n; k)for(int i 1; i < n; i)for(int …

并发编程的故事——并发之共享模型

并发之共享模型 文章目录 并发之共享模型一、多线程带来的共享问题二、解决方案三、方法中的synchronize四、变量的线程安全分析五、习题六、Monitor七、synchronize优化八、wait和notify九、sleep和wait十、park和unpark十一、重新理解线程状态十二、多把锁十三、ReentrantLoc…

瓜分双十一10亿红包设计:在线分享教程?

在如今激烈的市场竞争中&#xff0c;瓜分红包营销活动成为了各大企业争相使用的一种营销手段。这种活动不仅能够吸引用户的关注和参与&#xff0c;还能够提高用户的粘性和忠诚度。那么&#xff0c;如何自建瓜分红包营销活动呢&#xff1f;下面将为大家详细解析。 首先&#xff…

振动智能监测与设备可靠性:无线技术的契机

在现代工业领域&#xff0c;设备的可靠性和稳定运行对于生产效率和安全性至关重要。然而&#xff0c;由于设备的频繁使用和各种环境影响&#xff0c;设备故障和突发停机仍然是不可避免的挑战。为了有效地应对这些挑战&#xff0c;振动智能监测技术结合无线传感器的应用正在成为…