JavaScript短信驗(yàn)證碼60秒倒計(jì)時(shí)插件
標(biāo)簽:
JavaScript
该插件依赖于jquery,用于发送短信验证码后的60秒倒计时:
下载完整代码: 下载
下载后的完整实例包括:
插件完整源码
countdown.js:
$(function(){
$(".captchaBtn").html('获取验证码').on("click", function(){
var that = $(this);
var seconds = 60;
that.attr("disabled", true);
that.html(seconds+'秒');
let promise = new Promise((resolve, reject) => {
let setTimer = setInterval(
() => {
seconds -= 1;
// console.info('倒计时:' + seconds);
that.html(seconds+'秒');
if (seconds <= 0) {
that.html('获取验证码');
resolve(setTimer)
}
}
, 1000)
})
promise.then((setTimer) => {
// console.info('清除');
clearInterval(setTimer);
that.attr("disabled", false);
})
})
});
如何使用
- 引入插件
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery-2.1.1.min.js" type="text/javascript"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="countdown.js" type="text/javascript"></script>
需要依赖jquery
- 在"获取验证码"按钮上添加 class=“captchaBtn”
<button class="captchaBtn"></button>
ok,使用非常简单
點(diǎn)擊查看更多內(nèi)容
1人點(diǎn)贊
評(píng)論
評(píng)論
共同學(xué)習(xí),寫(xiě)下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持,我會(huì)繼續(xù)努力的~
掃碼打賞,你說(shuō)多少就多少
贊賞金額會(huì)直接到老師賬戶(hù)
支付方式
打開(kāi)微信掃一掃,即可進(jìn)行掃碼打賞哦
今天注冊(cè)有機(jī)會(huì)得
100積分直接送
付費(fèi)專(zhuān)欄免費(fèi)學(xué)
大額優(yōu)惠券免費(fèi)領(lǐng)