zoukankan      html  css  js  c++  java
  • 【转】用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;
                    }
    
                });
            })

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

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

  • 相关阅读:
    Objective-C中的Block回调模式
    [LINUX-02]linux内存管理
    Linux设备模型(8)_platform设备
    Face Alignment
    dlib 人脸识别论文 One Millisecond Face Alignment with an Ensemble of Regression Trees
    linux内核函数kmap_atomic用法
    [LINUX-01]对比LINUX和CORTEX-M启动流程
    -02-建立PetaLinux工程
    linux内核启动流程(文章最后流程图)
    uboot笔记:uboot命令分析+实现
  • 原文地址:https://www.cnblogs.com/blog4wei/p/7594860.html
Copyright © 2011-2022 走看看