前端常用库-发送短信验证码倒计时60秒

前端常用库-发送短信验证码倒计时60秒

  1. 带ajax验证
    原文链接:http://www.cnblogs.com/steed-zgf/archive/2012/02/03/2336984.html
    前端常用库-发送短信验证码倒计时60秒
    <!doctype html>
    <head>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
    
    var InterValObj; //timer变量,控制时间
    var count = 60; //间隔函数,1秒执行
    var curCount;//当前剩余秒数
    
    function sendMessage() {
       curCount = count;
      //设置button效果,开始计时
         $("#btnSendCode").attr("disabled", "true");
         $("#btnSendCode").val("请在" + curCount + "秒内输入验证码");
         InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器,1秒执行一次
        //向后台发送处理数据
         $.ajax({
           type: "POST", //用POST方式传输
           dataType: "text", //数据格式:JSON
           url: 'Login.ashx', //目标地址
           data: "dealType=" + dealType +"&uid=" + uid + "&code=" + code,
           error: function (XMLHttpRequest, textStatus, errorThrown) { },
           success: function (msg){ }
         });
    }
    
    //timer处理函数
    function SetRemainTime() {
                if (curCount == 0) {                
                    window.clearInterval(InterValObj);//停止计时器
                    $("#btnSendCode").removeAttr("disabled");//启用按钮
                    $("#btnSendCode").val("重新发送验证码");
                }
                else {
                    curCount--;
                    $("#btnSendCode").val("请在" + curCount + "秒内输入验证码");
                }
            }
    </script>
    </head>
    <body>
            <input id="btnSendCode" type="button" value="发送验证码" onclick="sendMessage()" /></p>
    </body>
    </html>
    前端常用库-发送短信验证码倒计时60秒



  2. 不带ajax
    前端常用库-发送短信验证码倒计时60秒
    <!DOCTYPE html>
    <html>
    <head>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript"> 
    var countdown=60; 
    function settime(obj) { 
        if (countdown == 0) { 
            obj.removeAttribute("disabled");    
            obj.value="免费获取验证码"; 
            countdown = 60; 
            return;
        } else { 
            obj.setAttribute("disabled", true); 
            obj.value="重新发送(" + countdown + ")"; 
            countdown--; 
        } 
    setTimeout(function() { 
        settime(obj) }
        ,1000) 
    }
      
    </script>
    <body> 
    <input type="button" id="btn" value="免费获取验证码" onclick="settime(this)" /> 
      
    </body>
    </html>
    前端常用库-发送短信验证码倒计时60秒

     

这是我自己学习,工作做的笔记和总结,只是做个记录,没事的时候翻翻!有问题大家可以提出来,一起探讨,共同进步。如有转载,请注明出处。 分类: 前端开发常用库 好文要顶 关注我 收藏该文 前端常用库-发送短信验证码倒计时60秒 前端常用库-发送短信验证码倒计时60秒 前端常用库-发送短信验证码倒计时60秒 Gabriel_wei
关注 - 10
粉丝 - 26 +加关注 0 0 « 上一篇: React学习笔记-7-销毁阶段
» 下一篇: React学习笔记-8-属性和状态详解 posted @ 2016-12-01 22:29  Gabriel_wei  阅读(3346)  评论(0)  编辑  收藏
上一篇:leetcode(3):再多个字符串里取出公共的字符串


下一篇:力扣初级算法——最长公共前缀