Bagaimana untuk menetapkan jquery untuk mendapatkan mesej teks selepas 59 saat

Dalam masyarakat moden, telefon bimbit telah menjadi bahagian yang sangat diperlukan dalam kehidupan seharian manusia. Mendapatkan kod pengesahan telefon mudah alih telah menjadi bahagian yang amat diperlukan dalam pelbagai senario perniagaan. Untuk mengelakkan pendaftaran berniat jahat dan kebocoran maklumat, banyak platform akan menyediakan kod pengesahan SMS untuk mengesahkan apabila pengguna mendaftar atau log masuk. Walau bagaimanapun, jika kod pengesahan SMS dihantar terlalu kerap, ia akan membawa masalah yang tidak perlu dan pembaziran masa kepada pengguna. Cara untuk meningkatkan pengalaman pengguna sambil mengekalkan pengesahan kod pengesahan telah menjadi isu yang mesti dipertimbangkan.

Dalam kes ini, kami boleh mempertimbangkan untuk menggunakan JQuery untuk menyelesaikan masalah ini. JQuery ialah rangka kerja JavaScript yang pantas dan ringkas dengan falsafah reka bentuk terasnya ialah "kurang tulis, buat lebih banyak". Menggunakan JQuery, kami boleh melakukan operasi dinamik pada halaman dengan mudah dan menggunakan teknologi Ajax untuk mencapai interaksi tak segerak antara halaman dan pelayan.

Pertama, kita perlu menentukan butang untuk pengguna mendapatkan kod pengesahan. Apabila pengguna mengklik butang Dapatkan Kod Pengesahan, kami perlu menukar status butang supaya butang menjadi tidak tersedia dalam masa 59 saat untuk menghalang pengguna daripada mengklik butang Kod Pengesahan berulang kali. Di sini kita mengambil pengajaran daripada gaya butang dilumpuhkan dalam rangka kerja Bootstrap Pada masa yang sama, warna butang juga ditukar apabila butang dilumpuhkan dahulu, dan selepas ia dinyahdayakan, butang itu bertukar menjadi kelabu .

Kod HTML:

<button type="button" class="btn btn-primary" id="getCodeBtn" onclick="getCode(this)">获取验证码</button>

Apabila pengguna mengklik butang Dapatkan Kod Pengesahan, kami perlu menukar status butang Dalam JQuery, kami boleh melakukan ini dengan menetapkan atribut yang dilumpuhkan daripada butang Butang dinyahdayakan. Pada masa yang sama, kita perlu memulakan pemasa dan menggunakan mekanisme pemasa untuk mengawal butang untuk kembali ke keadaan tersedia selepas 60 saat. Kodnya adalah seperti berikut:

function getCode(obj) {
    var $getCodeBtn = $(obj);
    var count = 59;
    var countdown = setInterval(function() {
        $getCodeBtn.addClass("disabled");
        $getCodeBtn.css("cursor", "not-allowed");
        $getCodeBtn.text("重新发送 (" + count + ")");
        count--;
        if (count == 0) {
            clearInterval(countdown);
            $getCodeBtn.css("cursor", "pointer");
            $getCodeBtn.removeClass("disabled");
            $getCodeBtn.text("获取验证码");
        }
    }, 1000)
}

Dalam kod, tiga pembolehubah akan ditakrifkan terlebih dahulu $getCodeBtn mewakili butang untuk mendapatkan kod pengesahan, kiraan mewakili detik undur pemasa dan undur mewakili. pemegang pemasa. Selepas mengklik butang, kami mencetuskan pemasa dan memanggil fungsi panggil balik tanpa nama setiap saat melalui fungsi setInterval(). Dalam fungsi panggil balik, kami mula-mula menetapkan status butang kepada dilumpuhkan dan menukar gaya CSS butang untuk menjadikan tetikus dilumpuhkan. Juga, tukar teks butang kepada "Hantar Semula (Countdown)". Semasa memaparkan baki saat, nilai kiraan dikurangkan sebanyak 1 setiap kali dalam fungsi panggil balik pemasa. Apabila kiraan berkurangan kepada 0, kami mengosongkan pemasa, menetapkan status butang kepada tersedia dan menukar teks butang kepada "Dapatkan Kod Pengesahan".

Dengan cara ini, kami boleh meningkatkan pengalaman pengguna tanpa menjejaskan pengesahan kod pengesahan, membolehkan pengguna mendapatkan kod pengesahan SMS dengan lebih mudah, di samping menghalang pengguna daripada berulang kali mengklik butang kod pengesahan, mengurangkan bilangan ralat . Masa terbuang dengan kerap mendapatkan kod pengesahan SMS.

Secara amnya, melalui rangka kerja JavaScript seperti JQuery, kami boleh menukar status halaman dengan mudah dan mengoptimumkan pengalaman pengguna, sekali gus meningkatkan pengalaman pengguna tapak web atau APP kami.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan jquery untuk mendapatkan mesej teks selepas 59 saat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!