获取验证码倒计时案例_html 手机验证码倒计时-优快云博客

本文链接：https://blog.youkuaiyun.com/jfgxcdfcld/article/details/121885148

这篇博客介绍了如何使用JavaScript在HTML登录页面中创建一个手机号获取验证码的功能，并实现点击后启动倒计时的效果。通过设置定时器和条件判断，使得按钮在倒计时期间显示剩余时间，并在倒计时结束后重置为原始状态。同时，提供了配套的HTML和CSS代码以展示完整的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在html登录页面会有一个手机号获取验证码的效果,初始的样子如图1

当点击以后会成成为倒计时的效果

这个效果使用js能实现

 $(document).ready(function () {
        // 一个定时函数 每隔1秒执行一次的那种
        var minth = 60; // 初始时间
        var mytime; // 定时函数
        var num3 = 0;
        // 封装一个倒计时方法
        function fn() {
            minth = --minth; // 进入即减去1
            if (minth > 0){
                // 还没有结束
                $(".table").html("("+minth+"秒)后重发");
            }else {
                // 倒计时结束
                clearInterval(mytime); // 等时间到了清空
                minth = 60; //  将时间重新返回60
                $(".table").html("发送验证码");
                num3 = 0;
            }
        }
        $(".table").click(function () {
            ++num3;
            if (num3 == 1){
                mytime = setInterval(fn,1000); // 每隔1000毫秒执行一次
            }
            if (num3 >= 10){
                // 如果一直点击 当点击的次数大于等于10就给关闭页面
                window.close();
            }

        })
    })

上面的是js 下面的是html代码

<body>
<a  class="table">发送验证码</a>
</body>

下面的是css样式

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .table{
            text-decoration: none; /*取消下划线*/
            display: inline-block;
            width: 120px;
            height: 50px;
            text-align: center;
            background-color: black;
            font-size: 12px;
            cursor: pointer;
            font-weight: bold;
            line-height: 50px;
            color: white;
            border-radius: 8px;
            margin-left: 25px;
            margin-top: 15px;
        }
    </style>

这样就能简单实现一个手机获取验证码的效果了