English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
1、功能描述
Cuando el usuario desea obtener el código de verificación, hace clic en "Obtener código de verificación gratuito" y luego comienza el conteo regresivo. Durante el conteo regresivo, el texto del botón es el tiempo restante x segundos y no se puede hacer clic. Después del final del conteo regresivo, el botón se cambia a "Hacer clic para volver a enviar".
2、分析
Se debe usar un temporizador. Después de hacer clic en el botón, se realiza una judgment dentro del temporizador. Conteo regresivo60 segundos, hasta 0.
3、代码实现：
Se debe asegurar que se limpie el temporizador antes de que realice el siguiente conteo regresivo, de esta manera se garantiza que el siguiente conteo regresivo del temporizador sea normal.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
.send{
width:250px;
margin:0 auto;
}
.send input{
display: block;
width:200px;
font:400 16px/30px "微软雅黑";
outline: none;
border: none;
}
.send button{
height:30px;
border: none;
outline: none;
font:400 16px/30px "微软雅黑";
text-align: center;
}
</style>
<script type="text/javascript">
function onload() {
var button=document.getElementsByTagName("button")[0];
button.innerText="Obtener código de verificación gratuito";
var timer=null;
button.onclick=function(){
clearInterval(timer);//Esta frase es crucial
var time=6;
var that=this;//costumbre
timer=setInterval(function(){
console.log(time);
if(time<=0){
that.innerText="";
that.innerText="Haga clic para volver a enviar";
that.disabled=false;
}else {
that.disabled=true;
that.innerText="";
that.innerText="Tiempo restante"+(time)+"segundos";
time--;
}
,1000);
}
}
</script>
</head>
<body>
<div id="send">
<input type="text" name="in" id="in" value="" /><button></button>
</div>
</body>
</html>
Lo que se mencionó anteriormente es la implementación de la función de cuenta regresiva de código de verificación de SMS de JS que el editor le ha presentado a todos. Esperamos que sea útil para ustedes. Si tienen alguna pregunta, déjenos un mensaje y el editor les responderá a tiempo. También queremos agradecer muy especialmente el apoyo de todos a la página web de tutorial de grito!
Declaración: El contenido de este artículo se ha obtenido de la red, y los derechos de autor pertenecen al propietario original. El contenido ha sido contribuido y subido por usuarios de Internet de manera autónoma. Este sitio no posee los derechos de propiedad, no ha sido editado por humanos y no asume ninguna responsabilidad legal relacionada. Si encuentra contenido sospechoso de infracción de derechos de autor, le invitamos a enviar un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, reemplace # con @ para denunciar y proporcione evidencia relevante. Una vez verificada, este sitio eliminará inmediatamente el contenido sospechoso de infracción de derechos de autor.)