jQuery實(shí)現(xiàn)倒計(jì)時(shí)按鈕功能代碼分享
更新時(shí)間：2014年09月03日 10:38:17 投稿：junjie
這篇文章主要介紹了jQuery實(shí)現(xiàn)倒計(jì)時(shí)按鈕功能代碼分享,一般用在短信發(fā)送倒計(jì)時(shí)按鈕情景,本文給出了幾個(gè)例子,需要的朋友可以參考下
代碼一：
{
wait:90,
hsTime:function(that){
if (this.wait == 0) {
$('#hsbtn').removeAttr("disabled").val('重發(fā)短信驗(yàn)證碼');
this.wait = 90;
} else {
var _this = this;
$(that).attr("disabled", true).val('在'+_this.wait+'秒后點(diǎn)此重發(fā)');
_this.wait--;
setTimeout(function() {
_this.hsTime(that);
}, 1000)
}
},
}
代碼二:
<!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>
<title></title>
<script src="HTML/js/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
/*-------------------------------------------*/
var InterValObj; //timer變量，控制時(shí)間
var count = 5; //間隔函數(shù)，1秒執(zhí)行
var curCount;//當(dāng)前剩余秒數(shù)
var code = ""; //驗(yàn)證碼
var codeLength = 6;//驗(yàn)證碼長(zhǎng)度
function sendMessage() {
curCount = count;
var dealType; //驗(yàn)證方式
var uid=$("#uid").val();//用戶uid
if ($("#phone").attr("checked") == true) {
dealType = "phone";
}
else {
dealType = "email";
}
//產(chǎn)生驗(yàn)證碼
for (var i = 0; i < codeLength; i++) {
code += parseInt(Math.random() * 9).toString();
}
//設(shè)置button效果，開始計(jì)時(shí)
$("#btnSendCode").attr("disabled", "true");
$("#btnSendCode").val("請(qǐng)?jiān)? + curCount + "秒內(nèi)輸入驗(yàn)證碼");
InterValObj = window.setInterval(SetRemainTime, 1000); //啟動(dòng)計(jì)時(shí)器，1秒執(zhí)行一次
//向后臺(tái)發(fā)送處理數(shù)據(jù)
$.ajax({
type: "POST", //用POST方式傳輸
dataType: "text", //數(shù)據(jù)格式:JSON
url: 'Login.ashx', //目標(biāo)地址
data: "dealType=" + dealType +"&uid=" + uid + "&code=" + code,
error: function (XMLHttpRequest, textStatus, errorThrown) { },
success: function (msg){ }
});
}
//timer處理函數(shù)
function SetRemainTime() {
if (curCount == 0) {
window.clearInterval(InterValObj);//停止計(jì)時(shí)器
$("#btnSendCode").removeAttr("disabled");//啟用按鈕
$("#btnSendCode").val("重新發(fā)送驗(yàn)證碼");
code = ""; //清除驗(yàn)證碼。如果不清除，過(guò)時(shí)間后，輸入收到的驗(yàn)證碼依然有效
}
else {
curCount--;
$("#btnSendCode").val("請(qǐng)?jiān)? + curCount + "秒內(nèi)輸入驗(yàn)證碼");
}
}
</script>
</head>
<body>
<input id="btnSendCode" type="button" value="發(fā)送驗(yàn)證碼" onclick="sendMessage()" /></p>
</body>
</html>
代碼三：
<!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>
<title>10之后注冊(cè)</title>
<script src="../js/jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
var leftSeconds = 10;//倒計(jì)時(shí)時(shí)間10秒
var intervalId;
$(function () {
$("#btn_reg").attr("disabled", true);//設(shè)置按鈕不可用
intervalId = setInterval("CountDown()",1000);//調(diào)用倒計(jì)時(shí)的方法
});
function CountDown() {//倒計(jì)時(shí)方法
if (leftSeconds <= 0) {
$("#btn_reg").val("注冊(cè)"); //當(dāng)時(shí)間<=0的時(shí)候改變按鈕的value
$("#btn_reg").attr("disabled",false);//如果時(shí)間<=0的時(shí)候按鈕可用
clearInterval(intervalId); //取消由 setInterval() 設(shè)置的 timeout
return;
}
leftSeconds--;
$("#btn_reg").val("請(qǐng)仔細(xì)閱讀"+leftSeconds+"秒");
}
</script>
</head>
<body>
<textarea cols="20" rows="8">10秒之后注冊(cè)按鈕才可以使用</textarea>
<input type="button" value="注冊(cè)" id="btn_reg" />
</body>
</html>
代碼四：
<!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>
<title></title>
<script src="HTML/js/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
/*-------------------------------------------*/
var InterValObj; //timer變量，控制時(shí)間
var count = 5; //間隔函數(shù)，1秒執(zhí)行
var curCount;//當(dāng)前剩余秒數(shù)
var code = ""; //驗(yàn)證碼
var codeLength = 6;//驗(yàn)證碼長(zhǎng)度
function sendMessage() {
curCount = count;
var dealType; //驗(yàn)證方式
var uid=$("#uid").val();//用戶uid
if ($("#phone").attr("checked") == true) {
dealType = "phone";
}
else {
dealType = "email";
}
//產(chǎn)生驗(yàn)證碼
for (var i = 0; i < codeLength; i++) {
code += parseInt(Math.random() * 9).toString();
}
//設(shè)置button效果，開始計(jì)時(shí)
$("#btnSendCode").attr("disabled", "true");
$("#btnSendCode").val("請(qǐng)?jiān)? + curCount + "秒內(nèi)輸入驗(yàn)證碼");
InterValObj = window.setInterval(SetRemainTime, 1000); //啟動(dòng)計(jì)時(shí)器，1秒執(zhí)行一次
//向后臺(tái)發(fā)送處理數(shù)據(jù)
$.ajax({
type: "POST", //用POST方式傳輸
dataType: "text", //數(shù)據(jù)格式:JSON
url: 'Login.ashx', //目標(biāo)地址
data: "dealType=" + dealType +"&uid=" + uid + "&code=" + code,
error: function (XMLHttpRequest, textStatus, errorThrown) { },
success: function (msg){ }
});
}
//timer處理函數(shù)
function SetRemainTime() {
if (curCount == 0) {
window.clearInterval(InterValObj);//停止計(jì)時(shí)器
$("#btnSendCode").removeAttr("disabled");//啟用按鈕
$("#btnSendCode").val("重新發(fā)送驗(yàn)證碼");
code = ""; //清除驗(yàn)證碼。如果不清除，過(guò)時(shí)間后，輸入收到的驗(yàn)證碼依然有效
}
else {
curCount--;
$("#btnSendCode").val("請(qǐng)?jiān)? + curCount + "秒內(nèi)輸入驗(yàn)證碼");
}
}
</script>
</head>
<body>
<input id="btnSendCode" type="button" value="發(fā)送驗(yàn)證碼" onclick="sendMessage()" /></p>
</body>
</html>
代碼五：
最近在寫短信發(fā)送驗(yàn)證碼，就寫了個(gè)js/jquery倒計(jì)時(shí)發(fā)送驗(yàn)證碼按鈕
<script language="javascript" src="jquery-1.7.1.min.js"></script>
<input type="button" id="btn" value="免費(fèi)獲取驗(yàn)證碼" />
<script type="text/javascript">
var wait=10;
function time(t) {
if (wait == t) {
t.removeAttribute("disabled");
t.value="免費(fèi)獲取驗(yàn)證碼";
wait = 10;
} else {
t.setAttribute("disabled", true);
t.value="重新發(fā)送(" + wait + ")";
wait--;
setTimeout(function() {
time(t)
},
1000)
}
}
$(document).ready(function(){
$("#btn").click( function () {
time(this);
});
});
</script>
您可能感興趣的文章:
- jquery實(shí)現(xiàn)手機(jī)發(fā)送驗(yàn)證碼的倒計(jì)時(shí)代碼
- JQuery實(shí)現(xiàn)倒計(jì)時(shí)按鈕具體方法
- jquery簡(jiǎn)單倒計(jì)時(shí)實(shí)現(xiàn)方法
- 基于jQuery的倒計(jì)時(shí)實(shí)現(xiàn)代碼
- jQuery實(shí)現(xiàn)倒計(jì)時(shí)跳轉(zhuǎn)的例子
- jQuery倒計(jì)時(shí)代碼(超簡(jiǎn)單)
- JQuery實(shí)現(xiàn)倒計(jì)時(shí)按鈕的實(shí)現(xiàn)代碼
- 利用jQuery實(shí)現(xiàn)漂亮的圓形進(jìn)度條倒計(jì)時(shí)插件
- jquery 倒計(jì)時(shí)效果實(shí)現(xiàn)秒殺思路
- jQuery實(shí)現(xiàn)倒計(jì)時(shí)功能 jQuery實(shí)現(xiàn)計(jì)時(shí)器功能
相關(guān)文章
本篇文章主要介紹了jquery仿蘋果的時(shí)間/日期選擇效果的實(shí)例，具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
jquery easyui DataGrid簡(jiǎn)單示例
本篇文章主要介紹了jquery easyui DataGrid簡(jiǎn)單示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-01-01
這篇文章主要介紹了jquery-mobile基礎(chǔ)屬性與用法,結(jié)合實(shí)例形式詳細(xì)分析了jQuery-mobile常用屬性功能與具體使用技巧,需要的朋友可以參考下2016-11-11
jQuery實(shí)現(xiàn)表單動(dòng)態(tài)添加數(shù)據(jù)并提交的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)表單動(dòng)態(tài)添加數(shù)據(jù)并提交的方法,結(jié)合實(shí)例形式總結(jié)分析了jQuery針對(duì)存在form表單的添加、提交,不存在form表單的添加、提交,ajax、非ajax形式提交等數(shù)據(jù)添加與表單提交操作技巧,需要的朋友可以參考下2018-07-07
jquery復(fù)選框全選/取消示例,實(shí)現(xiàn)點(diǎn)擊復(fù)選框的時(shí)候全選所有的子復(fù)選框，再點(diǎn)擊取消所有復(fù)選框的選中狀態(tài)2013-12-12
這篇文章主要介紹了jquery中的過(guò)濾操作。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12
這篇文章主要為大家詳細(xì)介紹了layui表格效果的實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
基于jQuery的前端數(shù)據(jù)通用驗(yàn)證庫(kù)
做了這么長(zhǎng)時(shí)間的開發(fā)，一直因?yàn)轵?yàn)證的問(wèn)題相當(dāng)?shù)目鄲?，不斷的寫很多重?fù)的代碼，對(duì)想偷懶的我來(lái)說(shuō)是相當(dāng)痛苦的。2011-08-08
ASP.NET jQuery 實(shí)例14 在ASP.NET form中校驗(yàn)時(shí)間范圍
這節(jié)主要講如何用jQuery校驗(yàn)表單時(shí)間范圍，時(shí)間控件用到了jQuery-ui2012-02-02
jQuery Ajax 加載數(shù)據(jù)時(shí)異步顯示加載動(dòng)畫
這篇文章主要介紹了jQuery Ajax 加載數(shù)據(jù)時(shí)異步顯示加載動(dòng)畫的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-08-08