60s倒计时（原生js+vue）

废话不多说，直接上源码！！！

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            
            .chaxun-yanzhengma-btn{
                border-radius: 4px;
                background-color: #FF4179;
                border: 2px solid #c81352;
                
                color: #FFFFFF;
            }
            
        </style>
    </head>
    <body>
        <input class="chaxun-yanzhengma-btn" type="button" value="获取验证码" />
        <script>
            var btn = document.querySelector('.chaxun-yanzhengma-btn');
            var timer;
            
            btn.onclick=function(){
                clearInterval(timer);
                var tip = 6;
                btn.disabled = 'disabled';
                btn.value = tip + 's后重新发送';
                btn.style.background = '#eee';
                btn.style.color = '#666';
                btn.style.borderColor = '#aaa';
                
                timer = setInterval(function(){
                    tip--
                    if( tip == 0 ){
                        btn.disabled = false;
                        btn.value = '获取验证码';
                        btn.style.background = '#FF4179';
                        btn.style.color = '#fff';
                        btn.style.borderColor = '#c81352';
                        clearInterval(timer);
                        return false;
                    }
                    btn.value = tip + 's后重新发送'
                },1000);
            }
        </script>
    </body>
</html>

<template>
    <div slot="center" class="register-page">
        <div class="login-content w1224">
            <div class="login-box">
                <div class="login-top">
                    <ul>
                        <li v-for="(item,index) in switchNav" :key="index" @click="switchModule(item)" :class="{'active': curSelect == item.id}">
                            <span>{{item.title}}</span>
                        </li>
                    </ul>
                </div>
                <div>
                    <!-- 微信注册 -->
                    <div class="login-bottom" v-if="curSelect === 1">
                        <h1>暂未开放</h1>
                    </div>
                    <!-- 手机号注册 -->
                    <div class="login-bottom" v-if="curSelect === 2">
                        <a-select :size="size" defaultValue="选择身份" style="width: 120px" @change="handleChange">
                            <a-select-option value="用户">用户</a-select-option>
                            <a-select-option value="商户">商户</a-select-option>
                        </a-select>
                        <a-input placeholder="请输入手机号" />
                        <div class="testing">
                            <a-input placeholder="请输入验证码" />
                            <a-button type="primary" size="large" @click="getCode()">{{texts}}</a-button>
                        </div>
                        <a-input placeholder="请输入密码" />
                        <a-input placeholder="请输入用户名" />
                        <div class="texts"><img src="@/assets/image/dui.jpg">我已阅读并接受《云工长用户服务协议》、《隐私政策》</div>
                        <div class="btn">
                            <a-button type="primary" size="large">立即注册</a-button>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>
<script>
    /**
     * @ description 注册模块
     * @ author CuiYanKang
     * @ date 2020-1-7 
     * @ lastModifiedBy CuiYanKang
     * @ lastModifiedTime 2020-1-8 15:30
     */
    export default {
        data() {
            return {
                switchNav: [{
                        id: 1,
                        title: "微信注册"
                    },
                    {
                        id: 2,
                        title: "账号注册"
                    }
                ],
                curSelect: 2,
                size: 'large',
                texts: '获取验证码',
                count: '',
                timer: null,
            };
        },
        components: {},
        methods: {
            switchModule(obj) {
                this.curSelect = obj.id;
            },
            onChange() {
                console.log("====", this.checked);
            },
            jumpUrl(path) {
                this.$router.push({
                    path
                })
            },
            handleChange(value) {
                console.log(`selected ${value}`);
            },
            getCode() {
                const TIME_COUNT = 60;
                if (!this.timer) {
                    this.count = TIME_COUNT;
                    this.texts = this.count+'S';
                    this.timer = setInterval(() => {
                        if (this.count > 0 && this.count <= TIME_COUNT) {
                            this.count--;
                            this.texts = this.count+'S';
                        } else {
                            clearInterval(this.timer);
                            this.timer = null;
                            this.texts = '重新获取';
                        }
                    }, 1000)
                }
            },
        }
    };
</script>
<style lang="less" scoped>
    @import "./index.less";
</style>

60s倒计时 （原生js+vue）

猜你喜欢

60s倒计时（原生js+vue）