js implémentation du partage d'exemple de compte à rebours du code de vérification SMS

1. Une fois que la cible a obtenu le code de vérification, le bouton affiche un compte à rebours de renvoi et le bouton redevient disponible une fois le compte à rebours terminé. Cet article partage principalement avec vous un exemple d'utilisation de js pour implémenter le compte à rebours du code de vérification SMS. J'espère que cela pourra vous aider.

2. Les deux API clés utilisées

sont exécutées toutes les secondes : setInterval

Exécuter après l'heure spécifiée : setTimeout

3 Code

<span style="font-size: 14px;">function createTimer(time,interval,timeout){<br/><br/>  let hasStartTime = 0//已经走了的时间<br/>  interval(hasStartTime)//立即执行一次<br/>  let _interval = setInterval(()=>{<br/>    hasStartTime = hasStartTime+1000<br/>    interval(hasStartTime)<br/>  }, 1000)<br/>  setTimeout(()=>{<br/>    clearInterval(_interval)<br/>    timeout()<br/>  }, time || 60000)<br/>}<br/></span>

où le temps est le temps total défini, l'intervalle est le suivant. l'opération effectuée toutes les secondes et le délai d'attente est l'opération effectuée une fois le temps écoulé. N'oubliez pas d'annuler les opérations effectuées toutes les secondes après la fin du compte à rebours.

L'appelant n'a qu'à transmettre le contenu pour être actualisé toutes les secondes. Par exemple,

<span style="font-size: 14px;">let time = 10000<br/>createTimer(time,timeStart=>{<br/>    let btn_text = `重新发送(${(time- timeStart)/1000}s)`<br/>    let btn_lock = true<br/>  },()=>{<br/>    let btn_text = `重新发送`,<br/>    let btn_lock = false<br/>  })<br/></span>

Recommandations associées :

JS implémente la fonction de compte à rebours du code de vérification SMS

Développer un code de vérification SMS dans Laravel "Spécification" de la fonction d'envoi (image)

Implémentation JS d'un exemple de partage de code pour obtenir le code de vérification SMS et la fonction de compte à rebours lors de l'inscription de l'utilisateur

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!