码迷,mamicode.com
首页 > Web开发 > 详细

js实现60s倒计时效果用于获取短信验证码使用

时间:2019-08-24 00:34:07      阅读:188      评论:0      收藏:0      [点我收藏+]

标签:pre   按钮   用户   fun   jquer   验证码   com   inf   timer   

有时候我们需要通过点击按钮向用户发送短信,需要一个计时效果。

 <button id="msg" type="button" style="width:120px; height:30px" >获取短信验证</button>
       <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript">
	 var count=60,timer=null;
     $("#msg").click(function()
	 {    
          /*防止用户重复点击按钮*/
	   if(timer==null){
	   timer=setInterval(function(){count--;$("#msg").text(count+"秒后获取验证码");
if(count<=0){clearInterval(timer);$("#msg").text("点击获取验证码");timer=null;}},1000); } }); </script>

  

显示效果:

技术图片

js实现60s倒计时效果用于获取短信验证码使用

标签:pre   按钮   用户   fun   jquer   验证码   com   inf   timer   

原文地址:https://www.cnblogs.com/fogwang/p/11403154.html

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