angular发送验证码读秒

最新推荐文章于 2024-08-30 07:33:38 发布

小迷糊MJ

最新推荐文章于 2024-08-30 07:33:38 发布

阅读量404

点赞数

分类专栏：学习笔记文章标签： angular.js javascript 前端

本文链接：https://blog.youkuaiyun.com/Mjxiaomihu/article/details/126877577

版权

学习笔记专栏收录该内容

55 篇文章

订阅专栏

本文介绍了在AngularJS中实现发送验证码后的倒计时功能。主要包括：1) 用户点击发送验证码，接口请求成功后启动60秒的倒计时，通过定时器每秒更新显示；2) 倒计时结束后，更新提示内容并清除定时器；3) 若接口请求失败，直接显示错误信息。同时，文章涵盖了设置和清除定时器的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、html

   <nz-form-item>
       <nz-form-control [nzErrorTip]="'personnel.codePlaceholder' | translate">
           <nz-input-group nzSearch nzSize="large" [nzAddOnAfter]="suffixButton">
           <input type="text"  formControlName="code" nz-input [placeholder]="'personnel.code' | translate" />
       </nz-input-group>
        <ng-template #suffixButton>
             <a href="javascript:;"  nzSize="large" nz-button [disabled]="sendBtnDisabled" (click)="sendCode()">{{tips}}</a>
        </ng-template>
        </nz-form-control>
</nz-form-item>

2、js

public tips = '获取验证码';

//发送验证码
  sendCode() {
    let data = {
      mobile:this.validateForm.value["mobile"]
    }
    this.httpService.parameterPost(environment.testUrl.sendCode, data, {}).subscribe((data: any) => {
      if (data.code == 1) {
        let number = 60;
        this.disabled = true;
        const that = this;
        that.tips = number + 's后重新获取';
        const timer = setInterval(function () {
          number--;
          if (number === 0) {
            that.disabled = false;
            that.tips = '获取验证码';
            clearInterval(timer);
          } else {
            that.tips = number + 's后重新获取';
          }
        }, 1000);
      } else {
        this.message.error(data.message)
      }
    })
  }

总结：

1、读秒逻辑：
（1）当用户点击发送验证码按钮接口请求成功时进行读秒动作，总时长为number为60秒，设置定时任务1秒触发一次，这时number--,如果number为0也就是读秒结束，更换tips内容为获取验证码并清除定时器，反之tips内容为number+’s后重新获取‘

（2）接口请求失败时直接返回错误信息

2、设置定时器

const timer = setInterval(function() {
	---
}, 1000);

3、清除定时器

clearInterval(timer);