vue寫個計時器 暫停 開始 重置
阿新 • • 發佈：2019-01-30
<template> <div class="wrapper"> <h1 id=mytime>{{str}}</h1> <!-- <input id="mytime" type="text" name="" value="顯示時間"> --> <button id="stop" name="button" @click="stop">stop</button> <button id="start" name="button" @click="start">start</button> <button id="reset" name="button" @click="reset">reset</button> </div> </template> <script> export default { data(){ return { h:0,//定義時，分，秒，毫秒並初始化為0； m:0, ms:0, s:0, time:0, str:'', mytime:'' } }, methods:{ timer(){ //定義計時函式 this.ms=this.ms+50; //毫秒 if(this.ms>=1000){ this.ms=0; this.s=this.s+1; //秒 } if(this.s>=60){ this.s=0; this.m=this.m+1; //分鐘 } if(this.m>=60){ this.m=0; this.h=this.h+1; //小時 } this.str =this.toDub(this.h)+":"+this.toDub(this.m)+":"+this.toDub(this.s)+""/*+this.toDubms(this.ms)+"毫秒"*/; // document.getElementById('mytime').innerHTML=h+"時"+m+"分"+s+"秒"+ms+"毫秒"; }, reset(){ //重置 clearInterval(this.time); this.h=0; this.m=0; this.ms=0; this.s=0; this.str="00:00:00"; }, start(){ //開始 this.time=setInterval(this.timer,50); }, stop(){ //暫停 clearInterval(this.time); }, toDub(n){ //補0操作 if(n<10){ return "0"+n; } else { return ""+n; } }, toDubms(n){ //給毫秒補0操作 if(n<10){ return "00"+n; } else { return "0"+n; } } }, //例項建立完成後呼叫，此階段完成了資料的觀測等，但尚未掛載，$el 還不可用。需要初始化處理一些資料時會比較有用 created:function () { }, } </script> <style scoped> #mytime{ background: #bbb; color: #fff; display: block; } .wrapper{ text-align: center; width: 60%; margin: 250px auto; } </style>