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>
    

      

  • 相关阅读:
    MySQL 82 张图带你飞
    Docker一个优秀的应用容器
    大数据架构基础知识
    浏览器复杂吗
    5 分钟学懂 SSH 隧道技术
    图解数据分析如何驱动决策
    3D可视化管理推进能源革命
    一文全面解读B端产品和C端产品的差异
    智慧农业解决方案
    Win10删除右键多余选项菜单
  • 原文地址:https://www.cnblogs.com/seeto/p/10092652.html
Copyright © 2011-2022 走看看