JS mengira detik secara automatik selama 30 saat sebelum butang tersedia (dua senario)_kemahiran javascript

Paparan paparan:

Kira detik sering digunakan dalam pembangunan WEB untuk mengehadkan operasi pengguna pada borang Contohnya, pengguna dijangka akan membaca maklumat protokol yang berkaitan dalam tempoh masa tertentu sebelum pengguna dibenarkan meneruskan ke seterusnya. Langkah. Contohnya, apabila menerima kod pengesahan telefon mudah alih, pengguna dibenarkan untuk Mendapatkan semula kod pengesahan selepas tempoh masa tertentu (jika kod pengesahan tidak diterima). Jadi hari ini saya akan memperkenalkan kepada anda cara menggunakan Javascript untuk melaksanakan aplikasi mudah ini.

  Lihat demo Muat turun kod sumber

Senario aplikasi 1: Butang hanya boleh diaktifkan selepas membaca maklumat perjanjian yang berkaitan semasa pendaftaran pengguna

Sesetengah laman web memerlukan pengguna untuk bersetuju dengan maklumat seperti yang dipanggil perjanjian pengguna semasa mendaftar Jika kandungan perjanjian itu sangat penting, sesetengah laman web akan memerlukan pengguna yang baru berdaftar untuk membaca maklumat perjanjian yang berkaitan sebelum mengaktifkan butang seterusnya. untuk menghantar borang. Untuk membolehkan pengguna membaca maklumat perjanjian (kami tidak tahu sama ada pengguna sebenar benar-benar membacanya), pembangun akan mereka bentuk kira detik, seperti 30 saat, butang hantar borang akan diaktifkan bagaimana untuk melaksanakannya.

<form action="http://www.jb51.net/" method="post" name="agree"> 
 <input type="submit" class="button" value="请认真查看<服务条款和声明> ()" name="agreeb"> 
</form> 

Andaikan terdapat borang seperti di atas Kami meninggalkan bahagian lain pada borang tersebut. Butang tidak tersedia pada mulanya Apabila undur 30 saat selesai, butang akan dipaparkan. Saya setuju" dan boleh diklik untuk mengaktifkan.

Kami menggunakan js asli untuk mencapai kesan ini:

<script> 
var secs = ; 
document.agree.agreeb.disabled=true; 
for(var i=;i<=secs;i++) { 
 window.setTimeout("update(" + i + ")", i * ); 
} 
function update(num) { 
 if(num == secs) { 
 document.agree.agreeb.value =" 我 同 意 "; 
 document.agree.agreeb.disabled=false; 
 } 
 else { 
 var printnr = secs-num; 
 document.agree.agreeb.value = "请认真查看<服务条款和声明> (" + printnr +")"; 
 } 
} 
</script> 

Kami menetapkan masa kepada 30 saat Sudah tentu, anda juga boleh menetapkan masa yang anda mahu, melumpuhkan butang, iaitu, tidak boleh diklik, dan kemudian menggelungkan fungsi kemas kini() melalui window.setTimeout untuk membandingkan detik semasa dengan undur Sebaliknya, jika undur selesai, "Saya bersetuju" dipaparkan dan butang diaktifkan.

Senario aplikasi 2: Pengguna mengaktifkan saluran SMS untuk menghantar SMS kod pengesahan ke telefon mudah alih pengguna untuk mengesahkan identiti mereka

Banyak laman web perlu meningkatkan keselamatan maklumat pengguna semasa mengesahkan identiti pengguna, supaya ia akan terikat pada telefon bimbit pengguna, jadi maklumat kod pengesahan akan dihantar ke telefon bimbit pengguna jika pengguna mengisi dengan betul kod pengesahan dan menyerahkannya ke bahagian belakang, Kemudian operasi akan berjaya. Menghantar kod pengesahan juga mungkin tidak berjaya kerana pelbagai sebab dan pengguna tidak boleh terus mengklik untuk menghantar. Dengan cara ini, pembangun menggunakan kira detik untuk menangani jenis masalah ini Selepas pengguna mengaktifkan SMS, jika kod pengesahan SMS tidak diterima selepas 30 saat, pengguna kemudiannya boleh dibenarkan mengklik untuk menghantar SMS.

<form action="http://www.jb51.net/" method="post" name="myform"> 
 <input type="button" class="button" value="获取手机验证码" name="phone" onclick="showtime()"> 
</form> 

Borang di atas menambah acara onclick pada butang dan memanggil fungsi masa tayangan().

<script> 
function showtime(t){ 
 document.myform.phone.disabled=true; 
 for(i=;i<=t;i++) { 
 window.setTimeout("update_p(" + i + ","+t+")", i * ); 
 } 
 
} 
function update_p(num,t) { 
 if(num == t) { 
 document.myform.phone.value =" 重新发送 "; 
 document.myform.phone.disabled=false; 
 } 
 else { 
 printnr = t-num; 
 document.myform.phone.value = " (" + printnr +")秒后重新发送"; 
 } 
} 
</script> 

Sama seperti senario 1, apabila butang diklik, status butang dilumpuhkan Kira detik dipaparkan dengan memanggil window.setTimeout's update_p() apabila undur selesai, butang memaparkan "Hantar Semula", kemudian status butang tersedia.

Dua senario di atas menunjukkan kepada anda cara js boleh mengira detik secara automatik selama 30 saat sebelum butang tersedia. Saya harap ia akan membantu semua orang.