vue实现获取验证码60s倒计时

最新推荐文章于 2023-09-05 09:47:40 发布

倘若hfl

最新推荐文章于 2023-09-05 09:47:40 发布

阅读量681

点赞数 1

分类专栏： Vue.js JavaScript 文章标签： vue javascript

本文链接：https://blog.csdn.net/hu104160112/article/details/111221494

版权

JavaScript 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

Vue.js

18 篇文章 1 订阅

订阅专栏

主要是使用 setInterval(),clearInterval()
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>倒计时</title>
</head>
<style>
    .get_code {
        width: 80px;
        height: 36px;
        background: #000000;
        color: #ffffff;
        font-size: 14px;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 2px;
        padding: 4px 8px;
        cursor: pointer;
    }
</style>

<body>
    <div id='app'>
        <div class="get_code" @click="getCode">{{SendCode_text}}</div>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
<script>
    var Vue = new Vue({
        el: '#app',
        data: {
            SendCode_text: '获取验证码',
            time_count: 60,
            timer: null,
        },
        created() {

        },
        methods: {
            getCode() {
                let that = this
                if (!that.timer) {
                    that.timer = setInterval(() => {
                        if (that.time_count > 0) {
                            that.time_count--
                            that.SendCode_text = '重新发送' + that.time_count + 's'
                        } else {
                            that.SendCode_text = '获取验证码'
                            clearInterval(that.timer)
                            that.timer = null
                            that.time_count = 60
                        }
                    }, 1000)
                }
            },
        }
    })
</script>

</html>

倘若hfl

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
vue实现获取验证码60s倒计时

主要是使用 setInterval(),clearInterval()<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>倒计时</title></head&gt
复制链接

扫一扫