鍍金池/ 問答/HTML/ 有沒有js短信倒計(jì)時(shí)插件呢

有沒有js短信倒計(jì)時(shí)插件呢

業(yè)務(wù)背景

就是獲取手機(jī)驗(yàn)證碼
點(diǎn)擊按鈕后倒計(jì)時(shí)

困擾

雖然自己能寫
但總是不放心自己寫的代碼
實(shí)在是怕兼容性問題,還有js性能問題
想找一個(gè)成熟的插件來用
只需要綁定一個(gè)節(jié)點(diǎn),傳入一個(gè)倒計(jì)時(shí)時(shí)長就行

問題

表面上的問題: 有誰用過這種插件么
根本上的問題: 想要找插件怎么找啊,真心不好搜索

附上我自己寫的,請(qǐng)不要再說我是伸手黨啦

// 按鈕效果
var btn = $('#getCode');
var notOk = function () {
    btn.css('color', '#959595');
    btn.attr('disabled', 'disabled');
}
var isOk = function () {
    btn.css('color', '#000');
    btn.removeAttr('disabled');
}
// 倒計(jì)時(shí)效果
var setTime = function (time) {
    notOk();
    var timer = setInterval(function () {
        btn.val('(' + time + ')' + '秒后重新發(fā)送');
        time--;
        window.sessionStorage.codeTime = time;
        if (time === 0) {
            clearInterval(timer);
            isOk();
            btn.val('重新發(fā)送驗(yàn)證碼')
        }
    }, 1000);
};

// 如果倒計(jì)時(shí)還沒結(jié)束就刷新頁面
let time = window.sessionStorage.codeTime || 60;
if (time > 0 && time < 60)
    setTime(time);

// 解禁獲取驗(yàn)證碼按鈕
var reg = /^1[0-9]{10,10}$/;
var tel = '';
$('#tel').keyup(function () {
    tel = $(this).val();
    var isTel = reg.test(tel);
    if (isTel) {
        isOk();
    } else {
        notOk();
    }
})

// 獲取驗(yàn)證碼
$('#getCode').click(function () {
    // 按鈕倒計(jì)時(shí)效果
    time = 60;
    setTime(time);
    // 獲取手機(jī)號(hào)碼
    tel = $('#tel').val();
    console.log('{{APIURL}}/codelist?mobile=' + tel)
    // 給手機(jī)發(fā)驗(yàn)證碼
    $.get('{{APIURL}}/shop/codelist?mobile=' + tel, function (res) {
        console.log(res);
    });
});
回答
編輯回答
獨(dú)特范

應(yīng)該是沒有,因?yàn)槭謱懙脑捯膊贿^幾行,不至于為此專門寫個(gè)插件

2018年2月28日 09:57
編輯回答
尛憇藌

這個(gè)需求基本沒涉及到兼容,手寫的話只需要考慮兩個(gè)問題:1.用setTimeout還是setInterval;2.是否要上rAF(可選,當(dāng)然這個(gè)要考慮下兼容)。掛庫的話我覺得并不是特別劃算,找插件的話,去github直接搜就行,比如你這個(gè)就可以用“timer”作為關(guān)鍵詞去搜,結(jié)果里過濾下javascript然后按star排列下,前幾里挑個(gè)順眼的項(xiàng)目介紹里符合需求的就可以試試。

2017年6月25日 09:08