vue计时器

//将秒转化为时分秒
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.mfbz.cn/a/48753.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

PLC绝对值指令ABS()

在C语言里,ABS()指令属于基础指令,博途PLC系统也有绝对值指令。对于S7-200SMART PLC则需要自行构造,下面给出SMART PLC的绝对值指令ABS()。 1、S7-SMART PLC绝对值指令 2、STL代码 SUBROUTINE_BLOCK ABS:SBR3 TITLE=ABS()函数 VAR_INPUT x:REAL; END_VAR VAR_OUTPUT y:RE…

Redis学习1--Redis简介与基础数据类型操作

1、什么是Redis? Remote Dictionary Server&#xff0c;远程词典服务器&#xff0c;是一个基于内存的键值型NoSQL数据库 特点&#xff1a; 键值&#xff08;key-value&#xff09;型&#xff0c;value支持多种不同数据结构&#xff0c;功能丰富单线程&#xff0c;每个命令具…

【T1】存货成本异常、数量为零金额不为零的处理方法。

【问题描述】 使用T1飞跃专业版的过程中&#xff0c; 由于业务问题或者是操作问题&#xff0c; 经常会遇到某个商品成本异常不准确&#xff0c; 或者是遇到数量为0金额不为0的情况&#xff0c;需要将其成本调为0。 但是T1软件没有出入库调整单&#xff0c;并且结账无法针对数量…

QTday4(鼠标事件和键盘事件/QT实现连接TCP协议)

笔记 #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QDebug> #include <QTcpServer>//服务器类 #include <QTcpSocket>//客户端类 #include <QMessageBox> #include <QList>//链表容器QT_BEGIN_NAMESPACE namespace Ui …

ES6基础知识五:你是怎么理解ES6新增Set、Map两种数据结构的?

如果要用一句来描述&#xff0c;我们可以说 Set是一种叫做集合的数据结构&#xff0c;Map是一种叫做字典的数据结构 什么是集合&#xff1f;什么又是字典&#xff1f; 集合 是由一堆无序的、相关联的&#xff0c;且不重复的内存结构【数学中称为元素】组成的组合 字典 是…

【复盘与分享】第十一届泰迪杯B题:产品订单的数据分析与需求预测

文章目录 题目第一问第二问2.1 数据预处理2.2 数据集分析2.2.1 训练集2.2.2 预测集 2.3 特征工程2.4 模型建立2.4.1 模型框架和评价指标2.4.2 模型建立2.4.3 误差分析和特征筛选2.4.4 新品模型 2.5 模型融合2.6 预测方法2.7 总结 结尾 距离比赛结束已经过去两个多月了。 整个过…

【Python入门系列】第十九篇:Python基于协同过滤推荐系统的实现

文章目录 前言一、协同过滤算法简介二、计算相似度三、Python实现简单的协同过滤推荐系统总结 前言 推荐系统是现代互联网平台中的重要组成部分&#xff0c;它可以根据用户的兴趣和行为&#xff0c;向其推荐个性化的内容。协同过滤是推荐系统中常用的一种方法&#xff0c;它基…

Flutter:flutter_local_notifications——消息推送的学习

前言 注&#xff1a; 刚开始学习&#xff0c;如果某些案例使用时遇到问题&#xff0c;可以自行百度、查看官方案例、官方github。 简介 Flutter Local Notifications是一个用于在Flutter应用程序中显示本地通知的插件。它提供了一个简单而强大的方法来在设备上发送通知&#…

PostgreSQL 查询json/jsonb是否存在某个片段

文章目录 前言实现实现思路坑1坑2坑3 恍然大悟 前言 在PostgreSQL中&#xff0c;jsonb有额外的操作符&#xff0c;如 >、<、?、?|、?& 可以用来查询是否包含路径/值&#xff0c;以及顶层键值是否存在。 详细文章&#xff1a;PostgreSQL 操作json/jsonb 那么&am…

青大数据结构【2021】

一、单选&#xff08;17&#xff01;&#xff09; 根据中序遍历得到降序序列可以知道&#xff0c;每个结点的左子树的结点的值比该结点的值小&#xff0c;因为没有重复的关键字&#xff0c;所以拥有最大值的结点没有左子树。 二、简答 三、分析计算 四、算法分析 3.迪杰斯特拉…

LLaMA2可商用|GPT-4变笨|【2023-0723】【第七期】

一、大咖观点&#xff1a; 傅盛&#xff1a;ChatGPT时代如何创业 - BOTAI - 博客园Google 已经被OpenAI 超越了吗&#xff1f;| AlphaGo 之父深度访谈《人民日报》&#xff1a;大模型的竞争&#xff0c;是国家科技战略的竞争WAIC 2023 | 张俊林&#xff1a;大语言模型带来的交…

贝塞尔曲线与B样条曲线

B-spline and Bezier Curve 介绍一下robotics运动规划方向的B样条曲线与贝塞尔曲线相关知识。 0728&#xff1a;TODO&#xff0c;节点向量如何得到&#xff1f; 贝塞尔曲线&#xff0c;B-样条&#xff0c;非均匀有理B样条梳理曲线篇: 贝塞尔曲线Animated Bzier CurvesBzier …

gin框架内容(三)--中间件

gin框架内容&#xff08;三&#xff09;--中间件 Gin框架允许开发者在处理请求的过程中&#xff0c;加入用户自己的函数。这个函数就叫中间件&#xff0c;中间件适合处理一些公共的业务逻辑&#xff0c;比如登录认证、权限校验、数据分页、记录日志、耗时统计等 即比如&#x…

【牛客面试必刷TOP101】Day1.反转链表和合并两个排序的链表

作者简介&#xff1a;大家好&#xff0c;我是未央&#xff1b; 博客首页&#xff1a;未央.303 系列专栏&#xff1a;牛客面试必刷TOP101 每日一句&#xff1a;人的一生&#xff0c;可以有所作为的时机只有一次&#xff0c;那就是现在&#xff01;&#xff01;&#xff01;&…

【Ansible】Ansible自动化运维工具的应用与常用命令

ansible自动化运维工具 一、ansible 的概述1. ansible 的概念2. ansible 的特性 二、ansible 的部署与命令1. ansible 的部署1.1 服务器ip地址设置1.2 ansible 服务器部署 2. ansible 命令行模块2.1 command 模块2.2 shell 模块2.3 cron 模块2.4 user 模块2.5 group 模块2.6 co…

财报解读:新鲜感褪去后,微软直面AI的骨感现实?

微软交出了一份远观尚可&#xff0c;但近看承压的“答卷”。 北京时间2023年7月26日&#xff0c;微软披露了2023财年第四财季及全年财报。受生产力和业务流程部门和智能云部门等业务带动&#xff0c;微软第四财季营收561.89亿美元&#xff0c;同比增长8%&#xff1b;净利润200…

【iOS】—— 持久化

文章目录 数据持久化的目的iOS中数据持久化方案数据持久化方式分类内存缓存磁盘缓存 沙盒机制获取应用程序的沙盒路径沙盒目录的获取方式 持久化数据存储方式XML属性列表Preferences偏好设置&#xff08;UserDefaults&#xff09;数据库存储什么是序列化和反序列化&#xff0c;…

TypeError: Failed to fetch dynamically imported module

浏览器报了如下错误&#xff1a; vue文件如下&#xff1a; 错误出现的原因是因为导入的是路径&#xff0c;vue会在该路径下的文件夹搜索所有文件&#xff0c;但是没有找到对应的组件&#xff0c;但是浏览器并不会直接禁止访问&#xff0c;而是在控制台报错&#xff0c;解决办法…

【雕爷学编程】Arduino动手做(174)---Sensor Shield V5.0传感器扩展板

37款传感器与执行器的提法&#xff0c;在网络上广泛流传&#xff0c;其实Arduino能够兼容的传感器模块肯定是不止这37种的。鉴于本人手头积累了一些传感器和执行器模块&#xff0c;依照实践出真知&#xff08;一定要动手做&#xff09;的理念&#xff0c;以学习和交流为目的&am…

k8s证书过期

k8s证书过期 [rootk8s-master102 ~]# kubectl get pod -A Unable to connect to the server: x509: certificate has expired or is not yet valid: current time 2023-07-25T15:14:0008:00 is after 2023-07-24T16:25:58Z解决方案 备份 kubernetes配置 cp -r /etc/kubernet…
最新文章