定时器之计时（时间的转换）

###示例：
1.需求描述：
当点击开始按钮时开始计时，点击结束时停止计时。并将最后的时间转化为相应的00:00:00的格式
方案1：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./vue.js"></script>
</head>
<body><div id="app"><span>{{callTime}}</span><button @click="handle">开始</button><button @click="ending">结束</button></div>
</body>
<script>var app=new Vue({el:"#app",data(){return {callTime:"00:00:00",timer:null,//定时器currentTime:0,//初始时间0}},methods:{secondToTimeStr (t) {t = Number(t)var a, i, e, time;if (!t) returnif (t < 60) return '00:00:' + ((i = t) < 10 ? '0' + i : i)if (t < 3600) return '00:' + ((a = parseInt(t / 60)) < 10 ? '0' + a : a) + ':' + ((i = t % 60) < 10 ? '0' + i : i)if (t >= 3600) {// var a, i, e = parseInt(t / 3600)return ((e = parseInt(t / 3600)) < 10 ? '0' + e : e) + ':' + ((a = parseInt(t % 3600 / 60)) < 10 ? '0' + a : a) + ':' + ((i = t % 60) < 10 ? '0' + i : i)}},handle(){if (!this.timer) {this.timer = setInterval(()=>{this.callTime = this.secondToTimeStr(++this.currentTime)}, 1000)}},ending(){this.timer && clearInterval(this.timer)}}})
</script>
</html>

在这里插入代码片

定时器之计时（时间的转换）相关推荐

大彩串口屏如何实现定时和计时的操作功能
一.概述本文主要阐述的是广州大彩串口屏如何使用lua脚本实现定时和计时的操作功能,目前这两个应用在工业上或者生活中都有广泛应用.大彩屏定时功能是设置一个具体的时间,然后时间到了用户设定的时间之后,对 ...
php $delaytime /= $delaytime,定时器之延时触发鼠标悬浮事件
定时器之延时触发鼠标悬浮事件 }.hoverDiv{width:100px;height:100px;margin:50px;background:#ECAD9E;border:3px solid # ...
语言全排列函数_Power Query 中日期时间格式转换需要了解的区域语言对照表
不同的国家有不同的日期时间书写格式,比如: 多数亚洲国家:yyyy-MM-dd hh:mm 有些欧洲国家:dd.MM.yyyy HH:mm 极少数的国家:MM/dd/yyyy h:mm tt 还有各种 ...
彻底解决Spring mvc中时间的转换和序列化等问题
彻底解决Spring mvc中时间的转换和序列化等问题参考文章: (1)彻底解决Spring mvc中时间的转换和序列化等问题 (2)https://www.cnblogs.com/childkin ...
scala 时间格式转换（String、Long、Date）
1)scala 时间格式转换(String.Long.Date) 1.时间字符类型转Date类型 [java] view plain copy import java.text.SimpleDateF ...
SQL时间格式转换CONVERT_GETDATE()
SQL时间格式转换CONVERT_GETDATE() SQL时间格式转换: View Code 年月日 SELECT CONVERT(varchar, GETDATE(), 102) AS DateT ...
java定义时间格式大全_Java时间格式转换大全
package com.date; import java.text.DateFormat; import java.text.ParseException; import java.text.Par ...
java格式_java时间格式转换大全
Java时间格式转换大全 import java.text.*; import java.util.Calendar; public class VeDate { /** * 获取现在时间 * * @ ...
html页面获取服务器时间,[html]定时获取服务器时间和本地时间
[html]定时获取服务器时间和本地时间 2018-11-1 萧写技术 .time_div{width:100%; padding:10px; text-align:center; margin:5 ...

定时器之计时（时间的转换）

定时器之计时（时间的转换）相关推荐

最新文章

热门文章