正计时cpr

最新推荐文章于 2025-11-25 13:46:00 发布

原创最新推荐文章于 2025-11-25 13:46:00 发布 · 372 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#p2p #webview #elementui

这个博客展示了如何在Vue.js中创建一个倒计时组件。代码包括一个模板，其中包含用于显示小时、分钟和秒数的计时器卡片，以及在`created`钩子中启动的`testTimer`方法，该方法每秒更新时间并调整显示。`timeFunction`方法处理倒计时的计算，确保数值在00到59之间，并提供了清除定时器的条件，虽然在这个例子中未实际使用。

<template>
    <div id="app">

        <div class="timer-div dowebok">
            <div class="timer">
                <div class="time-card" data-type="hours" data-max="24">
                    <div class="time-card-count">{{myHours}}</div>
                </div>
                <span class="colon">:</span>
                <div class="time-card" data-type="minutes" data-max="60">
                    <div class="time-card-count">{{myMinutes}}</div>
                </div>
                <span class="colon">:</span>
                <div class="time-card" data-type="seconds" data-max="60">
                    <div class="time-card-count">{{mySeconds}}</div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    export default {
        name: 'App',
        data() {
            return {
                currentTime: 0,
                timeObj: null, // 时间对象,下方会用到
                myHours: '00', // 我定义来接收计算出来的 小时 的
                myMinutes: '00', // 我定义来接收计算出来的 分钟 的
                mySeconds: '00',// 我定义来接收计算出来的 秒钟 的
                testTimeClear:''
            }
        },
        created() {
            this.testTimer()
        },
        methods: {
            testTimer() {
                this.timeFunction();
                this.testTimeClear = setInterval(() => {
                    this.timeFunction();
                }, 1000)
            },
            timeFunction() {
                // 开始执行倒计时
                this.timeObj = { // 时间对象
                    seconds: Math.floor(this.currentTime % 60),
                    minutes: Math.floor(this.currentTime / 60) % 60,
                    hours: Math.floor(this.currentTime / 60 / 60) % 24
                }
                // 计算出时分秒
                this.myHours = this.timeObj.hours < 10 ? '0' + this.timeObj.hours : this.timeObj.hours;
                this.myMinutes = this.timeObj.minutes < 10 ? '0' + this.timeObj.minutes : this.timeObj.minutes;
                this.mySeconds = this.timeObj.seconds < 10 ? '0' + this.timeObj.seconds : this.timeObj.seconds;
                this.currentTime++;

                // if (this.myMinutes == '03' && this.mySeconds == '11') {
                //
                //     clearInterval(this.testTimeClear)
                //
                // }

            }
        }
    }
</script>


<style>
    .dowebok {
        margin-top: 200px;
        align-items: center;
    }

    .timer {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin: 0 0 4em;
        color: #151414;
    }

    .time-card {
        margin: 0 1em;
        text-align: center;
    }

    .time-card-count {
        font-weight: 600;
        font-size: 50px;
        width: 77px;
        height: 77px;
        line-height: 77px;
        overflow: hidden;
    }

    .colon {
        font-size: 2em;
    }
</style>