使用vue写一个倒计时
<!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">
<input type="button" value=" 开始" @click="start" />
<input type="button" value=" 暂停" @click="stop" />
<h4>
{{hour>=10?hour:"0"+hour}}:{{ minute>=10?minute:"0"+minute}}:{{
second>=10?second:"0"+second}}
</h4>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
hour: 1,
minute: 10,
second: 10,
timer: null,
},
methods: {
start: function () {
if (!this.timer) {
this.timer = setInterval(() => {
this.second--;
if (this.second == 0) {
if (this.hour == 0 && this.minute == 0) {
//倒计时停止
this.stop();
} else {
this.second = 59;
if (this.minute >= 1) {
this.minute--;
} else if (this.hour >= 1) {
this.hour--;
this.minute = 59;
}
}
}
}, 100);
}
},
stop: function () {
clearInterval(this.timer);
this.timer = null;
},
},
});
</script>
</body>
</html>
效果
浙公网安备 33010602011771号