집 > 기사 > 웹 프론트엔드 > Button_javascript 스킬을 클릭하면 60초 카운트다운을 구현하는 Node.js 코드

Button_javascript 스킬을 클릭하면 60초 카운트다운을 구현하는 Node.js 코드

WBOY원래의: 2016-05-16 15:24:292106검색

예를 들어 일부 웹사이트의 SMS 인증 기능은 버튼을 클릭한 후 다시 보내기를 클릭하기 전에 60초 동안 카운트다운되는 것과 유사한 효과를 갖습니다.

이 예제에서는 버튼을 다시 클릭하기 전 60초 동안 카운트다운하여 버튼 클릭 후 인증코드를 보내는 기능을 자바스크립트로 구현했습니다.

예 1: Javascript는 버튼을 클릭하고 60초 동안 카운트다운한 후 다시 클릭하여 보내는 효과를 구현합니다.

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

예 2: 버튼을 클릭하면 60초 카운트다운 js 코드가 표시됩니다

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

예 3: 버튼을 클릭한 후 60초 카운트다운 후에 계속 클릭하면 버튼에 카운트다운이 표시될 수도 있습니다.

예상 렌더링:

WeChat 공개 플랫폼의 코드입니다

function E() {
var e = $("#mobile"), t = (new Date).getTime(), n = Math.floor((t - b) / 1e3);
g && clearTimeout(g), n >= 60 &#63; (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) &#63; 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 &#63; "/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;
}
}));
});
}

편집자는 이 코드를 자신의 코드로 호출하는 방법을 몰랐지만 전문가의 안내를 받은 후 몇 가지 단서를 찾아냈습니다.

전문가의 문제 해결 아이디어: 엄격하다면 백그라운드 획득 시간과 결합해야 하고, 그렇지 않으면 다른 사람들이 새로 고치면 됩니다.
엄격하지 않은 경우 쿠키를 사용할 수도 있습니다.

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

이 세 가지 예제를 통해 아이디어가 있으시면 구현해 보시기 바랍니다. 자바스크립트 프로그래밍을 배우는 모든 분들께 도움이 되기를 바랍니다.

성명：

이전 기사：마스크 레이어로 팝업 비디오 효과를 구현하기 위한 js 클릭 버튼의 코드 예제 분석다음 기사：마스크 레이어로 팝업 비디오 효과를 구현하기 위한 js 클릭 버튼의 코드 예제 분석

Button_javascript 스킬을 클릭하면 60초 카운트다운을 구현하는 Node.js 코드

관련 기사