发送短信验证码后60秒倒计时

最新推荐文章于 2021-08-23 17:35:18 发布

weixin_34380781

最新推荐文章于 2021-08-23 17:35:18 发布

106

文章标签： php java javascript ViewUI

原文链接：https://juejin.im/post/5c0cfd5bf265da6134383a97

版权

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>
复制代码

阅读终点，创作起航，您可以撰写心得或摘录文章要点写篇博文。去创作

weixin_34380781

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
发送短信验证码后60秒倒计时

jquery实现的发送短信验证码后60秒倒计时功能，完整实例可到http://smsow.zhenzikj.com/doc/sdk.html 下载"注册验证码"的demo。直接下载:java版: http://smsow.zhenzikj.com/demo/download.html?fileName=zhenzisms_java_demophp版: http://smsow.zhenz...
复制链接

扫一扫