vue计时器

news2024/11/17 1:55:21
//将秒转化为时分秒
const resultTime = ref('');

const formateSeconds = function (endTime) {
  let secondTime = parseInt(endTime); //将传入的秒的值转化为Number
  let min = 0; // 初始化分
  let h = 0; // 初始化小时
  // let result = "";
  if (secondTime > 60) {
    //如果秒数大于60,将秒数转换成整数
    min = parseInt(secondTime / 60); //获取分钟,除以60取整数,得到整数分钟
    secondTime = parseInt(secondTime % 60); //获取秒数,秒数取佘,得到整数秒数
    if (min > 60) {
      //如果分钟大于60,将分钟转换成小时
      h = parseInt(min / 60); //获取小时,获取分钟除以60,得到整数小时
      min = parseInt(min % 60); //获取小时后取佘的分,获取分钟除以60取佘的分
    }
  }
  resultTime.value = `${h.toString().padStart(2, '0')}:${min
    .toString()
    .padStart(2, '0')}:${secondTime.toString().padStart(2, '0')}`;
};

const numberTime = ref(0);   //表示从0开始计时
const timerNum = ref(null);  //计时器

  if (numberTime.value === 0) {
    timerNum.value = setInterval(async () => {
      numberTime.value++;
      await formateSeconds(numberTime.value);
    }, 1000);
  }
//页面展示

    <div class="timeShow">

            {{ resultTime }}

    </div>

 例如:

formateSeconds(0) ---即表示从00.00.00开始计时~页面展示样例如下:

 

 

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

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

相关文章

Qtday4作业

思维导图 2.手动完成服务器的实现 头文件 #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include<QTcpServer> // 服务器类 #include<QTcpSocket> // 客户端类 #include<QDebug> // 信息调试类 #include<QMessageBox> …

Chapter 8: Files | Python for Everybody 讲义笔记_En

文章目录 Python for Everybody课程简介FilesPersistenceOpening filesText files and linesReading filesSearching through a fileLetting the user choose the file nameUsing try, except, and openWriting filesDebuggingGlossary Python for Everybody Exploring Data Us…

利用vscode--sftp,将本地项目/文件上传到远程服务器中详细教程

1、首先在 vscode 中下载 sftp&#xff1a; 2、然后在 vscode 中打开本地将要上传的项目或文件&#xff1a; 3、安装完后&#xff0c;使用快捷键 ctrlshiftP 打开指令窗口&#xff0c;输入 sftp:config &#xff0c;回车&#xff0c;在当前目录中会自动生成 .vscode 文件夹及 s…

如何拥有一个自己的小程序商城?

在今天的移动互联网时代&#xff0c;拥有一个自己的小程序商城已经成为了很多企业和个人的追求。它不仅可以帮助企业提升品牌形象和销售额&#xff0c;还能够提供更好的用户体验和更高的用户粘性。那么&#xff0c;如何拥有自己的小程序商城呢&#xff1f; 第一步&#xff1a;选…

三. 多传感器标定方案(空间同步)--1

前面的内容&#xff1a; 一. 器件选型心得&#xff08;系统设计&#xff09;--1_goldqiu的博客-CSDN博客 一. 器件选型心得&#xff08;系统设计&#xff09;--2_goldqiu的博客-CSDN博客二. 多传感器时间同步方案&#xff08;时序闭环&#xff09;--1 三. 多传感器标定方案&…

Bugs记录

一、/usr/bin/ld: cannot find -l**** 参考&#xff1a;https://www.cnblogs.com/sakuraie/p/13341508.html 在ubuntu上安装软件时&#xff0c;经常出现这样的问题&#xff1a; /usr/bin/ld: cannot find -l**** 例如&#xff1a; /usr/bin/ld: cannot find -lcaffe 安装 需…

netfilter调试记录

今天调试netfilter&#xff0c; 钩子是ip层的post routing出下的钩子 勾出的报文没有二层报文&#xff0c;刚开始搞不清原因&#xff0c;后来才搞明白&#xff0c;原来就是没有二层&#xff0c;只有在桥上勾到的才是有二层报文&#xff0c; skb里有个字段protocol可以表示这个…

Leetcode题目【回文子串+回文子序列】

目录 647. 回文子串5. 最长回文子串516. 最长回文子序列 647. 回文子串 作为一个回文子串&#xff0c;主打的就是连续子串、两边对称。所以递推公式怎么想呢&#xff1f;子问题dp是一个成型的回文子串&#xff0c;当我左右两边加上相同的字符&#xff0c;才会再次构成当前的回…

Higress非K8S安装

Higress非K8S安装 文章目录 Higress非K8S安装环境安装安装higress进入到higress 的目录下修改下nacos的地址启动Higress登录higress管理页面 Higress 是基于阿里内部构建的下一代云原生网关&#xff0c;官网介绍&#xff1a;https://higress.io/zh-cn/docs/overview/what-is-hi…

lombok插件

懒人必备插件 1.安装&#xff1a; 2.在项目中导入lombok的jar包 <dependencies><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><version>1.18.28</version></dependency></depe…

flask的配置项

flask的配置项 为了使 Flask 应用程序正常运行&#xff0c;有多种配置选项需要考虑。下面是一些基本的 Flask 配置选项&#xff1a; DEBUG: 这个配置项决定 Flask 是否应该在调试模式下运行。如果这个值被设为 True&#xff0c;Flask 将会提供更详细的错误信息&#xff0c;并…

redis哨兵配置

首先哨兵需要三台服务器因为要选主服务器,一个主服务器两个备服务器.比主从复制要好一点就是不用手工切换主服务器 配置主从服务器需要主从复制为底层 vim /opt/redis-5.0.7/sentinel.conf 编辑哨兵配置文件 主和从的配置都是一样的 先启master&#xff0c;再启slave cd /op…

什么是ROC曲线

ROC曲线&#xff08;Receiver Operating Characteristic Curve&#xff09;&#xff0c;也称为“接受者操作特性曲线”。它最早应用于雷达信号检测的分析&#xff0c;后来广泛应用于心理学和医学领域。 ROC分析是进行临床诊断试验评价最常用的方法。诊断试验是指评价某种疾病诊…

树莓派微型 web 服务器——正式设计报告

树莓派微型web服务器 摘要 这篇博客介绍了一个基于树莓派的轻量级服务器项目。树莓派是一款低成本、小型化的单板计算机&#xff0c;具有较低的功耗和良好的可扩展性。该项目利用树莓派搭建了一个功能简洁但性能稳定的服务器环境&#xff0c;适用于小型应用或个人使用。该轻量…

flask 实现简单的登录系统demo

你提供的代码是一个基本的Flask应用程序&#xff0c;实现了一个简单的登录系统。以下是代码的详细解释&#xff1a; 1. 导入必要的模块&#xff1a;os 用于生成密钥&#xff0c;Flask 用于创建Web应用程序。 2. 创建Flask应用程序的实例&#xff0c;并为会话管理设置一个密钥。…

web-暴力破解密码

Burte Force&#xff08;暴力破解&#xff09;概述 暴力破解”是一攻击具手段&#xff0c;在web攻击中&#xff0c;一般会使用这种手段对应用系统的认证信息进行获取。 其过程就是使用大量的认证信息在认证接口进行尝试登录&#xff0c;直到得到正确的结果。 为了提高效率&…

都说软件测试没前途了?为何每年还会增加40万测试员

最近和一些刚进入软件测试行业的朋友交流&#xff0c;发现了一个有趣的现象&#xff0c;那就是对这个行业很多问题的认识是一致的、片面的&#xff0c;也可以理解为误解。利用你的时间列出他们对这个行业的所有误解&#xff0c;然后结合你多年的工作经验和你交流。毕竟你是从这…

WPS本地镜像化在线文档操作以及样例

一个客户项目有引进在线文档操作需求&#xff0c;让我这边做一个demo调研下&#xff0c;给我的对接文档里有相关方法的说明&#xff0c;照着对接即可。但在真正对接过程中还是踩过不少坑&#xff0c;这儿对之前的对接工作做个记录。 按照习惯先来一个效果&#xff1a; Demo下载…

应届生如何快速找Java开发工程师,先学会这17个基础问题

一、Java 基础 JDK 和 JRE 有什么区别&#xff1f; JDK&#xff1a;Java Development Kit 的简称&#xff0c;java 开发工具包&#xff0c;提供了 java 的开发环境和运行环境。 JRE&#xff1a;Java Runtime Environment 的简称&#xff0c;java 运行环境&#xff0c;为 java 的…

机器学习李宏毅学习笔记39

文章目录 前言一、大模型的发展趋势二、KNN LM总结 前言 大模型大资料 大模型的顿悟时刻 一、大模型的发展趋势 随数据量增加&#xff0c;模型可以从量变达到质变&#xff0c;从某一刻开始突然学会东西。 当成为大模型时&#xff0c;分数会从0,0突然变成100&#xff0c;完成“…