公司3月底有一個(gè)運(yùn)動(dòng)會(huì)項(xiàng)目溪北，項(xiàng)目中有一項(xiàng)是平板支撐臼隔，參加比賽的人會(huì)通過掃二維的方式進(jìn)入到報(bào)名頁(yè)面，我們的頁(yè)面會(huì)投到比賽現(xiàn)場(chǎng)的大屏幕上市框，當(dāng)主持人說預(yù)備，我則在頁(yè)面上點(diǎn)擊開始按鈕糕韧，然后大屏幕上就會(huì)出現(xiàn)倒計(jì)時(shí)3 2~ 1~枫振，之后主持人說開始，大屏幕上就開始計(jì)時(shí)萤彩。當(dāng)最后一個(gè)堅(jiān)持的人倒下了粪滤，就是全場(chǎng)堅(jiān)持最久的人的秒數(shù)。
// 以下是html 代碼 ------------
<template>
<div class="container">
// 顯示倒計(jì)時(shí)數(shù)字的標(biāo)簽
<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>
// ?計(jì)時(shí)時(shí)間
<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: {
// 比賽開始雀扶，計(jì)時(shí)開始
startTimer(){
let self = this;
this.si = setInterval(function () {
self.timer++;
}, 1000);
},
// 比賽結(jié)束杖小，停止計(jì)時(shí)
stopTimer(){
let self = this;
clearInterval(self.si);
},
//顯示倒數(shù)秒數(shù)
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 = "";
// 計(jì)時(shí)器開始計(jì)時(shí)
self.startTimer();
} else {
countdown -= 1;
setTimeout(function () {
self.showTime(countdown);
}, 1000);
}
}
}
}
