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

最新推荐文章于 2024-11-28 14:53:26 发布

barnett_y

最新推荐文章于 2024-11-28 14:53:26 发布

阅读量1.7k

点赞数

分类专栏：【Vue2.0-3.0点滴知识】

【Vue2.0-3.0点滴知识】专栏收录该内容

571 篇文章

订阅专栏

本文介绍了一款用于平板支撑比赛的在线计时器的设计与实现。该计时器使用HTML、CSS和JavaScript构建，支持倒计时和实时计时功能，适用于运动赛事现场展示。

公司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);
                }
            }
        }
    }

日记本