zoukankan      html  css  js  c++  java
  • 发送短信验证码后60秒倒计时

    jquery实现的发送短信验证码后60秒倒计时功能,完整实例可到http://smsow.zhenzikj.com/doc/sdk.html 下载"注册验证码"的demo。

    直接下载:
    java版: http://smsow.zhenzikj.com/demo/download.html?fileName=zhenzisms_java_demo

    php版: http://smsow.zhenzikj.com/demo/download.html?fileName=zhenzisms_php_demo

    效果图:

    javascript源码

    //短信验证码倒计时
    	var countdownHandler = function(){
    		var $button = $(".sendVerifyCode");
    		var number = 60;
    		var countdown = function(){
    			if (number == 0) {
    				$button.attr("disabled",false);
    				$button.html("发送验证码");
    	            number = 60;
    	            return;
    	        } else {
    	        	$button.attr("disabled",true);
    	        	$button.html(number + "秒 重新发送");
    	        	number--;
    	        }
    			setTimeout(countdown,1000);
    		}
    		setTimeout(countdown,1000);
    	}
    

      html源码

    <body>
       <form>
           <div class="row">
               <label>账号: </label><input name="userId">
           </div>
           <div class="row">
               <label>密码:</label><input name="password">
           </div>
           <div class="row">
               <label>手机号:</label><input name="mobile">
           </div>
           <div class="row">
               <label>验证码:</label>
               <input name="verifyCode">
               <button type="button" class="sendVerifyCode">获取短信验证码</button>
           </div>
           <div><button type="button" class="sub-btn">提交</button></div>
       </form>
    </body>
    

      

  • 相关阅读:
    Redis-其他命令
    Redis-发布与订阅
    C#使用命令编译代码
    Redis有序集合操作
    Redis散列操作
    设置ul水平居中
    Redis集合操作
    Redis列表操作
    java连SQLServer失败 java.lang.ClassNotFoundException:以及 javax.xml.bind.JAXBException
    SQLServer 用法简例
  • 原文地址:https://www.cnblogs.com/seeto/p/10092652.html
Copyright © 2011-2022 走看看