js code to achieve a 60-second countdown when the button is clicked

For example, the mobile phone SMS authentication function on some websites has a similar effect that after clicking the button, it counts down to 60 seconds before clicking the send again.

This example uses Javascript to realize the function of sending the verification code after a countdown of 60 seconds after clicking the button.

Example 1: Javascript realizes the effect of 60 seconds countdown to click the button before you can click to send again

<input type="button" id="btn" value="免费获取验证码" />
<script type="text/javascript">
var wait=60;
function time(o) {
 if (wait == 0) {
  o.removeAttribute("disabled");  
  o.value="免费获取验证码";
  wait = 60;
 } else { 

  o.setAttribute("disabled", true);
  o.value="重新发送(" + wait + ")";
  wait--;
  setTimeout(function() {
  time(o)
  },
  1000)
 }
 }
document.getElementById("btn").onclick=function(){time(this);}
</script>

Example 2: Click the button to display a 60 second countdown js code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
<script type="text/javascript" src="js/jquery.js"></script> 
</head> 

<body> 
<input type="button" id="btn" value="免费获取验证码" onclick="settime(this)" /> 
<script type="text/javascript"> 
var countdown=60; 
function settime(val) { 
if (countdown == 0) { 
val.removeAttribute("disabled"); 
val.value="免费获取验证码"; 
countdown = 60; 
} else { 
val.setAttribute("disabled", true); 
val.value="重新发送(" + countdown + ")"; 
countdown--; 
} 
setTimeout(function() { 
settime(val) 
},1000) 
} 
</script> 
</body> 
</html>

Example 3: After clicking the button, it can continue to be clicked after 60 seconds countdown, and the countdown can be displayed on the button

Expected renderings:

This is the code on the WeChat public platform

function E() {
var e = $("#mobile"), t = (new Date).getTime(), n = Math.floor((t - b) / 1e3);
g && clearTimeout(g), n >= 60 ? (e.prop("readonly", !1), y = !0, $("#sendmobile").html("发送验证码").attr("disabled", !1).removeClass("btn_disabled")) : (e.prop("readonly", !0), y = !1, $("#sendmobile").attr("disabled", !0).addClass("btn_disabled").html("%s秒后可重发".sprintf(60 - n)), g = setTimeout(E, 1e3));
}
function S() {
function e() {
if (!y) return;
var e = $.trim(n.val());
l.mobile(e) ? t.attr("disabled", !1).removeClass("btn_disabled") : t.attr("disabled", !0).addClass("btn_disabled");
}
var t = $("#sendmobile"), n = $("#mobile");
n.keyup(e).blur(e), e(), t.click(function() {
var e;
t.attr("disabled") !== "disabled" && (e = "+86" + $.trim(n.val()), b = (new Date).getTime(), E(), o.post({
url: w ? "/cgi-bin/formbyskey" : "/acct/formbyticket",
data: {
form: "mobile",
action: "set",
f: "json",
mobile: e
},
mask: !1
}, function(e) {
var t = e.BaseResp.Ret;
if (t == 0) u.suc("验证码已经发送"); else {
switch (t) {
case -13:
u.err("登录超时，请重新登录");
break;
case -35:
u.err("该手机已经登记过2次，请使用别的手机号进行用户信息登记");
break;
default:
u.err("验证码发送失败");
}
b = 0;
}
}));
});
}

The editor of this code just doesn't know how to call it into my own code. After being urged by an expert, I have some head-hunting.

Expert's idea of problem-solving: If it is strict, this should also be combined with the background to obtain time, or others can refresh it.
If it is not strict, a cookie can also be used.

<script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
<script src="http://yukon12345.com/yukon12345.com/js/jquery.cookie.js"></script>
<script>
 time1=$.cookie("time1")||60;
 time2=$.cookie("time2")||60;
 dis1=$.cookie("dis1")
 dis2=$.cookie("dis2")
 function countDown($obj){

 var time;
 if($obj.attr("id")=="b1")
 {
  time=--time1;
  $.cookie("time1",time,{"expires":1});
  if(time<=0){
  time1=60;
  $obj[0].disabled=!$obj[0].disabled
  clearInterval(inter1)
  $obj.text("点击发送")
  $.cookie("dis1","")
  return
  }
 }
 if($obj.attr("id")=="b2")
 { time=--time2;
  $.cookie("time2",time,{"expires":1});
  if(time<=0){
  time1=60;
  $obj[0].disabled=!$obj[0].disabled
  clearInterval(inter2)
  $obj.text("点击发送")
  $.cookie("dis2","")
  return
  }
 }

 $obj.text(time+"秒后重新发送")

 }

 $(function(){
 if(dis1="dis"){
  $("#b1")[0].disabled='disabled'
  inter1=setInterval(function(){countDown($("#b1"))},1000)
 }
 if(dis2="dis"){
  $("#b2")[0].disabled='disabled'
  inter2=setInterval(function(){countDown($("#b2"))},1000)
 }
$(".cd").bind("click",function(){
 $this=$(this);
 //没有被禁用时禁用并执行倒计时
 if(!$this[0].disabled){
 $this[0].disabled='disabled';
 if($this.attr("id")=="b1"){
  $.cookie("dis1","dis",{"expires":1})
  inter1=setInterval(function(){countDown($this)},1000)
 }
 if($this.attr("id")=="b2"){
  $.cookie("dis2","dis",{"expires":1})
  inter2=setInterval(function(){countDown($this)},1000)
 }

 }
})

})
</script>

<button id="b1" class="cd" >点击发送</button><br>
<button id="b2" class="cd" >点击发送</button><br>

For more articles about countdown, please check the topic: "Countdown Function"

js code to achieve a 60-second countdown when the button is clicked

Guess you like