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

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

 <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>

  

显示效果:

posted @ 2019-08-23 23:23  fogwu  阅读(2626)  评论(0编辑  收藏  举报