<span v-if="index == 2">开始</span>
</button>
<button class="btn btn-reset" @click="resetTimer" v-if="index == 1 || index == 2">
<span>重置</span>
</button>
</div>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
index: 0, // 0表示时钟页面，1表示计时器计时状态，2表示计时器暂停状态
hour: '00', // 页面显示的数值
min: '00',
sec: '00',
msec: '00',
h: 0, // 临时保存的数值
m: 0,
s: 0,
ms: 0,
timer: null,
date: null
},
// 监视器
watch: {
index(newValue, oldValue) {
clearInterval(this.timer);
this.timer = null;
this.date = null;
// 从时钟页面click过来 或 从计时器页面click过来
if (oldValue == 0 || newValue == 0) { // index等于2时数据保留
this.hour = '00';
this.min = '00';
this.sec = '00';
this.msec = '00';
this.h = 0;
this.m = 0;
this.s = 0;
this.ms = 0;
}
this.autoMove();
}
},
methods: {
// 自动计时
autoMove() {
if (this.index == 0) {
this.timer = setInterval(res => {
this.date = new Date();
this.h = this.date.getHours();
this.m = this.date.getMinutes();
this.s = this.date.getSeconds();
this.hour = this.h > 9 ? this.h : '0' + this.h;
this.min = this.m > 9 ? this.m : '0' + this.m;
this.sec = this.s > 9 ? this.s : '0' + this.s;
}, 1000);
} else if (this.index == 1){
this.timer = setInterval(res => {
this.ms ++;
if (this.ms == 100) {
this.s ++;
this.ms = 0;
}
if (this.s == 60) {
this.m ++;
this.s = 0;
}
this.msec = this.ms > 9 ? this.ms : '0' + this.ms;
this.min = this.m > 9 ? this.m : '0' + this.m;
this.sec = this.s > 9 ? this.s : '0' + this.s;
}, 10);
}
},
// 选择时钟
selectClock() {
this.index = 0;
},
// 选择计时器
selectTimer() {
this.index = 1;
},
// 开始、暂停计时器
suspendTimer() {
