价格不是我们的优势,品质永远是我们的追求!
当前位置:四川快乐12一定牛行业快讯 > js实现发送短信验证码倒计时
js实现发送短信验证码倒计时
来源:四川快乐12一定牛  时间:2018-03-27 17:15

四川快乐12一定牛 www.njs5.cn     发送四川快乐12一定牛是网站或app常见的功能,为了避免用户频繁获取短信验证码,往往会设计一个倒计时功能,当间隔一定时间后才能再一次的获取,下面乐信小编就来为大家介绍下如何用js实现发送短信验证码倒计时。

    html部分:

<html xmlns="//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
  .wrapper{
     margin-top:20px;
     margin-left:20px; 
  }
  .sns-input{
     float:left;
     height:28px;
  }
  .sns-btn{
     float:left;
	 border-radius:5px;
	 margin-left:10px;
	 cursor:pointer;
	 width:80px;
	 height:30px;
	 line-height:30px;
	 background-color:#1f7e9a;
	 font-size:16px;
	 color:#ffffff;
	 text-align:center; 
  } 
  

</style>


</head>

<body>

<div class="wrapper">
   <input class="sns-input" id="snsCode">
   <div class="sns-btn" id="snsBtn">发送</div>
</div>

<script>
var btnDisable = false; //发送按钮是否禁用
var btn=document.getElementById("snsBtn");  //按钮dom对象
btn.onclick=function(){ //按钮点击事件
//防止等待期间执行发送
   if(btnDisable){
       return; 
   }
   //1、执行请求验证码逻辑
   //....
   //2、设置定时器进行等等
   timewait(60)
   //3、恢复按钮可用
   btnDisable = true;

}

   function(time){
       setTimeout(function(){
	       if(time>=0){
	          btn.innerHTML = time + "s后重试";
	          time--;
	          timeWait(time);
	       }else{
	          btn.innerHTML = "发送";
	          btnDisable = false;
	   
	      }
	   },1000);  //设置定时器
   }
</script>
</body>
</html>

    页面效果:

4.png

    js部分:

<script>
var btnDisable = false; //发送按钮是否禁用
var btn=document.getElementById("snsBtn");  //按钮dom对象
btn.onclick=function(){ //按钮点击事件
//防止等待期间执行发送
   if(btnDisable){
       return; 
   }
   //1、执行请求验证码逻辑
   //....
   //2、设置定时器进行等等
   timewait(60)
   //3、恢复按钮可用
   btnDisable = true;

}

   function(time){
       setTimeout(function(){
	       if(time>=0){
	          btn.innerHTML = time + "s后重试";
	          time--;
	          timeWait(time);
	       }else{
	          btn.innerHTML = "发送";
	          btnDisable = false;
	   
	      }
	   },1000);  //设置定时器
   }
</script>

    最终实现效果                推荐阅读:app短信注册接口被刷

 

3.png

  • 中国的宗教信仰自由:深刻真诚一贯牢固 2019-06-24
  • 习近平接受《华尔街日报》采访 2019-06-24
  • 雷健坤当选阳泉市人民政府市长 2019-06-21
  • 国务院办公厅印发《意见》 推进奶业振兴保障乳品质量安全 2019-06-21
  • 寻找安徒生:想象的翅膀从家乡延展 2019-06-20
  • 乡镇纪委做指导 村务监督更有力 2019-06-20
  • 国资动态--安徽频道--人民网 2019-06-11
  • 广东金林村:农民爱写诗 2019-06-03
  • 公务加油卡私车加油、违规饮酒 池州两干部被处分 2019-05-18
  • 498米!最长地铁站将建成 2019-05-08
  • 是谁让文艺界大腕儿吃盒饭也来开会 2019-05-08
  • 毛泽东说帝国主义都是纸老虎。是有社会基础的 2019-05-07
  • 【学习时刻】国家行政学院经济学部副主任董小君:明方向、抓“龙头”、变思路,推动东北经济企稳向好 2019-04-24
  • 精彩画面—国际摩托车滚雷巡游节 2019-04-24
  • 留得青山在,何愁春不来? 2019-04-22
  • 河南快赢481开奖号码 秒速时时彩计划群 最准7尾中特公式规律 新疆十一选五开奖结果走势图乐彩 pk10赛车人工计划软件 体彩20选5最新开奖结果查询 黑龙江11选5开奖结果zhw 广西快乐十分官网app 体彩手机投注是真的吗 欢乐斗地主金宝箱 2019送彩金娱乐场 云南11选5中奖奖金领取 123期码报开奖结果 20选五中奖奖金 nba比分最低