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

摘要:
DOCTYPEhtml˃varcountdown=60;functionsettime{if{obj.removeAttribute;obj.value=”免费获取验证码“;countdown=50;return;}否则{obj.setAttribute;obj.value=“重新发送”;倒计时--;}SetTimeout}˂inputtype=“button”id=“btn”value=“免费获取验证码”onclick=“settime”!如果你有任何问题,你可以提出,一起讨论,一起进步。

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

        </h1>
        <div class="clear"></div>
        <div class="postBody">
  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>

    复制代码
这是我自己学习,工作做的笔记和总结,只是做个记录,没事的时候翻翻!有问题大家可以提出来,一起探讨,共同进步。如有转载,请注明出处。
  • 相关阅读:
    团队第三次作业-王者终篇
    第二次团队任务之个人
    团队作业总和
    本次分工
    【软件工程】第一次作业
    面向对象第三次作业(向计算器进发)
    面向对象程序设计第二次作业(1)
    面向对象程序设计第二次作业(2)
    我的大一上(福州)
    第一周例行报告
  • 原文地址:https://www.cnblogs.com/whkzm/p/12219407.html
  • 免责声明:文章转载自《前端常用库-发送短信验证码倒计时60秒》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

    上篇webpack 多环境打包MongoDB学习笔记-2(使用java连接Mongo)下篇

    宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

    随便看看

    office 2016 专业版 删除部分组件

    删除Office2016 Professional Edition####1中的一些组件。打开控制面板。2.单击此选项。3.找到Office2016并右键单击以选择更改。4.选择并确认。5.选择要删除的组件(以Access为例)。6.单击此处。7.单击“继续”。8.等等。9.完成此方法并不是真正删除模块。这意味着模块已禁用。如果您想在将来重新启用它,请重复前...

    CSS-顶部滚动进度条

    Documentbody{background-image:linear-gradient(torighttop,#f0050%,#ece50%);background-repeat:no-repeat;height:300vh;position:relative;background-size:100%calc(100%-100vh+5px);}body:...

    Jboss

    同时,为了扩大JBoss的企业市场,JBoss已经签署了许多渠道合作伙伴。2004年6月,JBoss宣布JBoss应用服务器已通过Sun公司的J2EE认证。这是JBoss应用服务器历史上最重要的里程碑。JBossAOP 1.0于2004年10月发布。这也证实了JBoss是一家创新型公司。JBoss应用服务器5.0于2008年12月6日正式发布。新版本的应用服...

    Flutter——数组以符号隔开转字符串

    ///数组转换为字符串StringgetTaskScreen(Listlist){ListtempList=List();Stringstr='';List.forEach((f){tempList.add(f.title);});临时列表。forEach((f){if(str==“”){str=“$f”;}否则{str=“$str”,“$f”;}});re...

    SAP OBA1 外币评估是基于财务目的,为了不影响报表而做的估算值,在月末进行评估,在下月初进行冲回。

    评估报告按行项目显示结果。4.评估策略外币的未清项评估有三种策略:1)期末评估,下期初冲回。因此目前每年底改变外币汇率时进行外币余额和未清项的评估,不冲回。②资产负债表指定日,一般是一年的最后一天。③资产负债表准备评估。如果选择该项,则视为年结评估,不能产生冲销凭证。外币未清项评估是按借贷分别统计后做的调整凭证。...

    kafka命令

    启动kafka:./kafka-server-start.sh../config/server.properties&查看topic./kafka-topics.sh--zookeeper192.168.8.56:2181,192.168.8.70:2181,192.168.8.147:2181--describe--topicliuhangjun....