比如，一些網(wǎng)站上的手機(jī)短信認(rèn)證的功能，有類似實(shí)現(xiàn)點(diǎn)擊按鈕后，倒計(jì)時(shí)60秒才能再次點(diǎn)擊發(fā)送的效果。
此例子用Javascript實(shí)現(xiàn)點(diǎn)擊按鈕后，倒計(jì)時(shí)60秒才能再次點(diǎn)擊發(fā)送驗(yàn)證碼的功能。
例子1：Javascript 實(shí)現(xiàn) 點(diǎn)擊按鈕 倒計(jì)時(shí)60秒方可再次點(diǎn)擊發(fā)送的效果
<input type="button" id="btn" value="免費(fèi)獲取驗(yàn)證碼" /><script type="text/javascript">var wait=60;function time(o) { if (wait == 0) { o.removeAttribute("disabled"); o.value="免費(fèi)獲取驗(yàn)證碼"; wait = 60; } else { o.setAttribute("disabled", true); o.value="重新發(fā)送(" + wait + ")"; wait--; setTimeout(function() { time(o) }, 1000) } }document.getElementById("btn").onclick=function(){time(this);}</script>例子2：點(diǎn)擊按鈕出現(xiàn)60秒倒計(jì)時(shí)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>無(wú)標(biāo)題文檔</title> <script type="text/javascript" src="js/jquery.js"></script> </head> <body> <input type="button" id="btn" value="免費(fèi)獲取驗(yàn)證碼" onclick="settime(this)" /> <script type="text/javascript"> var countdown=60; function settime(val) { if (countdown == 0) { val.removeAttribute("disabled"); val.value="免費(fèi)獲取驗(yàn)證碼"; countdown = 60; } else { val.setAttribute("disabled", true); val.value="重新發(fā)送(" + countdown + ")"; countdown--; } setTimeout(function() { settime(val) },1000) } </script> </body> </html>例子3：點(diǎn)擊按鈕后，60秒倒計(jì)時(shí)后才能繼續(xù)可以點(diǎn)擊，按鈕上還能顯示倒計(jì)時(shí)
預(yù)想的效果圖:
這是微信公眾平臺(tái)上的代碼
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("發(fā)送驗(yàn)證碼").attr("disabled", !1).removeClass("btn_disabled")) : (e.prop("readonly", !0), y = !1, $("#sendmobile").attr("disabled", !0).addClass("btn_disabled").html("%s秒后可重發(fā)".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("驗(yàn)證碼已經(jīng)發(fā)送"); else {switch (t) {case -13:u.err("登錄超時(shí)，請(qǐng)重新登錄");break;case -35:u.err("該手機(jī)已經(jīng)登記過(guò)2次，請(qǐng)使用別的手機(jī)號(hào)進(jìn)行用戶信息登記");break;default:u.err("驗(yàn)證碼發(fā)送失敗");}b = 0;}}));});}這段代碼小編就是不知道怎么才能調(diào)用到自己的代碼上來(lái)，經(jīng)過(guò)高人指點(diǎn)有了一些頭尋。
高人的解題思路：如果嚴(yán)格的話，這個(gè)還要結(jié)合后臺(tái)獲取時(shí)間的，要不然別人刷新一下就行了。
如果不嚴(yán)格，用個(gè)cookie也可以。
<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("點(diǎn)擊發(fā)送") $.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("點(diǎn)擊發(fā)送") $.cookie("dis2","") return } } $obj.text(time+"秒后重新發(fā)送") } $(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); //沒有被禁用時(shí)禁用并執(zhí)行倒計(jì)時(shí) 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" >點(diǎn)擊發(fā)送</button><br><button id="b2" class="cd" >點(diǎn)擊發(fā)送</button><br>大家通過(guò)這三個(gè)例子講解有沒有點(diǎn)思路了，那就動(dòng)手實(shí)現(xiàn)一下吧，希望對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
