php tp5 短信验证，邮箱验证倒计时功能

原创已于 2022-02-16 13:12:10 修改 · 565 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#php #javascript

于 2020-04-02 15:06:57 首次发布

ThinkPHP5 同时被 2 个专栏收录

20 篇文章

订阅专栏

php

19 篇文章

订阅专栏

本文介绍了一种前端实现的验证码倒计时功能，通过JavaScript控制按钮状态，防止用户在60秒内重复请求验证码，确保了用户体验的同时，也提高了系统的安全性。

验证码发送倒计时

验证码验证倒计时一般是前端验证，原理是不到60秒不触发请求方法

代码如下：

<input onclick="sendmessage(this,60);" type="button" value="获取验证码" class=""/></p>

function countDown(obj,second){
    // 如果秒数还是大于0，则表示倒计时还没结束
    if(second>=0){
          // 获取默认按钮上的文字
        if(typeof buttonDefaultValue === 'undefined' ){
            buttonDefaultValue =  obj.defaultValue;
        }
        // 按钮置为不可点击状态
        obj.disabled = true;
        // 按钮里的内容呈现倒计时状态
        obj.value = buttonDefaultValue+'('+second+')';
        // 时间减一
        second--;
        // 一秒后重复执行
        setTimeout(function(){countDown(obj,second);},1000);
    // 否则，按钮重置为初始状态
    }else{
        // 按钮置未可点击状态
        obj.disabled = false;
        // 按钮里的内容恢复初始状态
        obj.value = buttonDefaultValue;
    }
}