码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-01-20 23:04:31      阅读:128      评论:0      收藏:0      [点我收藏+]

标签:json   move   bar   gpo   script   row   turn   tin   输入验证   

  1. 带ajax验证
    原文链接:http://www.cnblogs.com/steed-zgf/archive/2012/02/03/2336984.html
    技术图片
    <!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>
    技术图片



  2. 不带ajax
    技术图片
    <!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秒

标签:json   move   bar   gpo   script   row   turn   tin   输入验证   

原文地址:https://www.cnblogs.com/whkzm/p/12219407.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!