在vue2.0项目中一个简单的倒计时功能

公司3月底有一个运动会项目，项目中有一项是平板支撑，参加比赛的人会通过扫二维的方式进入到报名页面，我们的页面会投到比赛现场的大屏幕上，当主持人说预备~，我则在页面上点击开始按钮，然后大屏幕上就会出现倒计时3~ 2~ 1~，之后主持人说开始，大屏幕上就开始计时。当最后一个坚持的人倒下了，就是全场坚持最久的人的秒数。http://www.jianshu.com/p/ee7ff3d1d93d

// 以下是html 代码 ------------
<template>
<div class="container">
// 显示倒计时数字的标签
<div class="share-dialog" v-show="isShareCount">
<div id="showtimes"></div>
</div>
// 开始按钮
<a class="btn" href="javascript:void (0);" v-on:click="showTime(3)" v-show="isShowBtn">开始</a>
// 停止按钮
<a class="btn stop" href="javascript:void (0);" v-on:click="stopTimer">停</a>
// 计时时间
<div class="timer" v-show="isShowTimer"><strong>{{ timer }}</strong><span class="second">秒</span><span
class="line"></span></div>
</div>
</template>

// 以下是 css 代码 ------------
<style lang="scss" rel="stylesheet/scss" scoped>
.share-dialog {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: rgba(0, 0, 0, .5);
z-index: 999;
#showtimes {
position: absolute;
left: 50%;
top: 50%;
width: 500/75+rem;
height: 500/75+rem;
margin-left: -250/75+rem;
margin-top: -250/75+rem;
line-height: 500/75+rem;
text-align: center;
color: #fff;
font-weight: bold;
font-size: 460/75+rem;
z-index: 1000;
}
}

.timer {
position: relative;
margin: 30/75+rem auto 30/75+rem;
width: 25%;
height: 160/75+rem;
line-height: 150/75+rem;
text-align: center;
background: #151414;
border-radius: 20/75+rem;
}

strong {
font-size: 120/75+rem;
color: #fff;
letter-spacing: 6px;
}

.line {
position: absolute;
top: 80/75+rem;
left: 0;
display: block;
width: 100%;
height: 2px;
content: '';
background: #fff;
border-bottom: 1px solid #000;
}

.second {
display: block;
position: absolute;
right: 15/75+rem;
bottom: -40/75+rem;
color: #fff;
font-size: 24/75+rem;
}

.btn {
margin: 30/75+rem auto 30/75+rem;
display: block;
width: 15%;
height: 160/75+rem;
line-height: 150/75+rem;
text-align: center;
font-size: 100/75+rem;
color: #fff;
font-weight: bolder;
background: #e72b0e;
border-radius: 20/75+rem;
box-shadow: 0 10px 0 1px #ffad5a;
}
</style>

// 以下是js代码 ------------
export default{
data(){
return {
timer: 0,
si: '',
isShareCount: false,
isShowTimer: false,
isShowBtn: true,
}
},
methods: {
// 比赛开始，计时开始
startTimer(){
let self = this;
this.si = setInterval(function () {
self.timer++;
}, 1000);
},
// 比赛结束，停止计时
stopTimer(){
let self = this;
clearInterval(self.si);
},
//显示倒数秒数
showTime(countdown){
let self = this;
self.isShareCount = true;
self.isShowBtn = false;
self.isShowFalseBtn = true;
document.getElementById('showtimes').innerHTML = countdown;
if (countdown == 0) {
self.isShareCount = false;
self.isShowTimer = true;
self.isShowFalseBtn = false;
document.getElementById('showtimes').innerHTML = "";
// 计时器开始计时
self.startTimer();
} else {
countdown -= 1;
setTimeout(function () {
self.showTime(countdown);
}, 1000);
}
}
}
}

日记本