Ionic+AngularJs implementa un botón de cuenta regresiva para obtener el código de verificación
Principio principal de implementación: establezca un intervalo $ después de hacer clic, cambie el tiempo restante cada segundo y confíe en el enlace de datos de ángulo para mostrarlo en la página en tiempo real. Establezca $timeout e inicialice el botón a un estado disponible después de 60 segundos.
Código de implementación:
(1) código js, configurado como múltiples instrucciones de llamada.
angular.module('winwin'). comando('botón del temporizador'),
función($tiempo de espera,
$intervalo){
retorno
{
Límites:
AE',
Rango:
{
Mostrar temporizador:
'=',
Tiempo de espera:
'='
},
Enlace:
función( alcance,
elemento,
atributo) {
alcance.timer
=
falso de;
alcance.timeout
=
60000;
alcance.timerCount
=
Range.Timeout
/
1000;
Range.Text
=
” Obtener código de verificación ";
alcance.onClick
=
Función (){
alcance.showTimer
=
Verdadero;
Rango.Temporizador
=
Verdadero;
Rango.Texto
=
"Recuperar en segundos";
Definir variables
Contador
=
$intervalo (función(){
scope.timerCount
=
scope.timerCount
-
1;
},
1000);
$timeout(función(){
Rango.text
=
"Obtener código de verificación";
Range.Timer
=
Falso;
$intervalo .cancel(contador);
scope.showTimer
=
Falso;
scope.timerCount
=
Range.Timeout
/
1000;
},
alcance del tiempo de espera);
}
},
Plantilla:
& botón lt
on-tap="onClick( )"
class="botón
Botón-Calma
xgmm-btn "
ng-disabled=" temporizador " > & ltspan
ng-if = " mostrar temporizador " >{{
Recuento del temporizador
} } </span>. { { texto } } & lt/botón & gt;'
};
});
(2)código html
& ltBotón del temporizador
show-timer = " false " & gt Obtener código de verificación
Logra el efecto:
(1) Luego haz clic en< /p >
(2) Después de hacer clic
Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos y también espero que todos apoyen a Script House.