vue中我们会使用各种倒计时的方法这里就为大家提供一个计时器的方法，

话不多说代码走起：

点击

暂停

重置

继续

export default {

name:"homepages.vue",

data() {

return {

hour:0,//定义时，分，秒，毫秒并初始化为0；

minute:0,

ms:0,

second:0,//秒

time:'',

str:'',

data: {

name:10,

age:20,

}

methods: {

timeStart(){

this.time =setInterval(this.timer,50)

timer () {//定义计时函数

this.ms =this.ms +50 //毫秒

if (this.ms >=1000) {

this.ms =0

this.second =this.second +1 //秒

}

if (this.second >=60) {

this.second =0

this.minute =this.minute +1 //分钟

}

if (this.minute >=60) {

this.minute =0

this.hour =this.hour +1 //小时

}

this.str =this.toDub(this.hour) +':' +this.toDub(this.minute) +':' +this.toDub(this.second)/*+""+this.toDubms(this.ms)+"毫秒"*/

// document.getElementById('mytime').innerHTML=h+"时"+m+"分"+s+"秒"+ms+"毫秒";

toDub (n) {//补0操作

if (n <10) {

return '0' + n

}else {

return '' + n

}

stop () {

console.log('暂停')

clearInterval(this.time)

reset () {//重置

clearInterval(this.time)

this.hour =0

this.minute =0

this.ms =0

this.second =0

this.str ='00:00:00'

}

html使用vue实现秒表,vue中使用时间计时器相关推荐

Vue：利用Vue生成的网页，在浏览器中的标签页中的图标与标题怎么修改为自己的？
Vue:利用Vue生成的网页,在浏览器中的标签页中的图标与标题怎么修改为自己的? 在解决这个问题的时候,在网上搜到了许多答案,可以说是众说纷纭,作者结合了多个答案,最后解决了这个问题,下面把用到的资源 ...
vue生命周期图示中英文版Vue实例生命周期钩子
vue生命周期图示中英文版Vue实例生命周期钩子知乎上近日有人发起了一个 "react 是不是比 vue 牛皮,为什么?" 的问题,Vue.js 作者尤雨溪12月4日正面回应了该 ...
js 获取vue组件html_vue.js中怎么引入组件？
前端框架vue,在利用脚手架工具vue-cli创建前端项目时候,怎么引入组件呢?下面本篇文章给大家介绍一下引入子组件的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. vue.j ...
在vue单页应用中使用jquery
记录一个今天用到的vue-cli建立的应用中引入jquery的方式. 首选通过npm安装jquery npm install jquery --save 在build/webpack.base.con ...
vue项目，webpack中配置src路径别名及使用
默认会有'@'别名,指向src目录,还可以添加自定义别名等等. 使用方法使用别名一般就三种情况:在js中用,在css中用,在html文档内用 js中用,最简单: import {getName} f ...
[vue] 在子组件中怎么访问到父组件的实例？
[vue] 在子组件中怎么访问到父组件的实例? 通过this.$parent 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通关前 ...
[vue] 有在vue中使用过echarts吗？踩过哪些坑？如何解决的？
[vue] 有在vue中使用过echarts吗?踩过哪些坑?如何解决的? vue 没用过echarts react到是用过不过我想应该差不多 ,多注意dom的渲染时机和chart的实例化时机在相 ...
[vue] 怎么在vue中使用插件？
[vue] 怎么在vue中使用插件? npm 安装然后再main.js 引入最后 vue.use(插件名) 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家 ...
[vue] 你知道vue中key的原理吗？说说你对它的理解
[vue] 你知道vue中key的原理吗?说说你对它的理解 key的作用主要是为了高效的更新虚拟DOM; 如果没有唯一的key, 数据更新时, 相同节点更新前后无法准确一一对应起来,会导致更新效率降低 ...

html使用vue实现秒表,vue中使用时间计时器

{{str}}

html使用vue实现秒表,vue中使用时间计时器相关推荐

最新文章

热门文章