【转】用JS完成手机短信验证按键点击事件

原地址：https://gitee.com/RainVanilla/codes/i7jske4wdogvnb0apmfx571

试了一下，效果还可以，留着备用！

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>手机接收验证码按钮</title>
    <script type="text/javascript" src="static/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
        $(function(){
            //替换btn的值
            $("#btn").click(function(){
                this.value="60秒后重新发送";
                //开启定时器
                id = setInterval(showTime,1000);
                flag = false;
            });
        })

        var time = 60;
        var flag = true;
        var id;
        function showTime(){
            if(time > 0 ){
                time--;
                $("#btn").val(time+"秒后重新发送");
            }else {
                $("#btn").val("重新获取验证码");
                flag = true;
                time=60;
                clearInterval(id);
            }
        }
    </script>

</head>
<body>
<div>
    <input type="text"  />
    <input id="btn" type="button" value="点击发送验证码" />
</div>
</body>
</html>

上面是原代码，但是如果亲自试一下就会发现有些小问题，就是重复点击按钮的时候会出现bug，在此基础上应该加一个判断，也就是只有跑完60s之后再允许点击事件生效，60s之内不允许调用显示时间的函数，修改代码部分如下：

$(function(){
            //替换btn的值
            $("#btn").click(function(){
                if(time==60){
                    this.value="60秒后重新发送";
                    //开启定时器
                    id = setInterval(showTime,1000);
                    flag = false;
                }

            });
        })

就是加了一个简单的条件判断，加上之后问题就解决了。

 

如有不妥请联系我删掉，谢谢。

posted @ 2017-09-26 08:48  vetter  阅读(805)  评论(0)  编辑  收藏  举报