关于前端:vue项目点击按钮获取手机验证码开始倒计时并且页面刷新秒数不会被初始化

26次阅读

共计 1737 个字符，预计需要花费 5 分钟才能阅读完成。

vue 我的项目点击按钮获取手机验证码倒计时，并且页面刷新秒数不会被初始化。原理应用了 sessionStorage，上面是代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>vue 我的项目点击按钮获取手机验证码开始倒计时，并且页面刷新秒数不会被初始化 </title>
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .name-input {
            position: relative;
            display: inline-block;
        }

        .input {
            width: 400px;
            height: 50px;
        }

        .auth-code {
            cursor: pointer;
            position: absolute;
            right: 5px;
            top: 50%;
            transform: translateY(-50%);
        }

        .auth-code.active {
            color: #333;
            opacity: .7;
            cursor: not-allowed;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="item">
            <div class="label-class"> 短信验证码 </div>
            <div class="name-input">
                <input class="input" type="text" v-model="captcha">
                <div class="auth-code" :class="[{'active': btnDisabled}]" @click="getCodeFn">{{btnDisabled ? captchaTime
                    +
                    '秒后重试' : '获取验证码'}}</div>
            </div>

        </div>
        <script>
            new Vue({
                el: '#app',
                data() {
                    return {
                        // 验证码
                        captcha: '',
                        // 避免验证码按钮反复点击
                        btnDisabled: false,
                        // 验证码定时器
                        interval: null,
                        // 验证码倒计时
                        captchaTime: 60,
                        // 固定工夫
                        fixedSecond2: 60,
                    }
                },
                mounted() {
                    // 获取上一次点击验证码的工夫
                    let startTime = sessionStorage.getItem('startTime')
                    let num = (new Date().getTime() - startTime) / 1000;
                    let second = this.fixedSecond2 - parseInt(num);
                    console.log(second, "second----");
                    // 当重进登录页面或者登录页面被刷新后拿到上一次点击验证码的工夫。如果没过期，则接着走倒计时, 而不是从 60 秒从新开始倒计时
                    if (second > 0) {
                        this.btnDisabled = true;
                        this.captchaTime = second;
                        this.countdownFun60()}

                },
                methods: {

                    // 获取验证码
                    async getCodeFn() {
                        // 避免反复点击
                        if (this.btnDisabled) return;
                        this.btnDisabled = true;
                        this.countdownFun60();
                        // 验证码点击的工夫
                        sessionStorage.setItem('startTime', new Date().getTime());
                    },

                    // 手机验证码 60 秒倒计时
                    countdownFun60() {this.interval = setInterval(() => {
                            this.captchaTime = this.captchaTime - 1;
                            if (this.captchaTime === 0) {clearInterval(this.interval);
                                this.btnDisabled = false;
                                this.captchaTime = this.fixedSecond2;
                            }
                        }, 1000)
                    },

                }
            })
        </script>


</body>

</html>

如果页面被敞开也想让倒计时失效，应用 localStorage 就能够了。

正文完