全国咨询热线:18720358503

h5打包小程序_Angular6 发送手机验证码按钮倒计时

类别:行业新闻 发布时间:2021-01-08 浏览人次:

Angular6 发送手机验证码按钮倒计时效果实现方法       这篇文章主要介绍了Angular6 发送手机验证码按钮倒计时效果实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

1.组件中定义两个变量,分别用于控制按钮是否可以点击(countDown)和按钮上的倒计时数字(countDownTime):

countDown = false;
countDowmTime = 60; // 这里设置倒计时为60S
showButtonText = '发送短信验证码'; // 可以控制动态改变的按钮提示信息

2.写一个获取短信验证码的方法绑定到页面的获取短信验证码按钮上:

getCode(event) { 
 this.validateForm1.controls['phone'].markAsDirty(); // 点击获取验证码要以输入了手机号为前提 
 this.validateForm1.controls['phone'].updateValueAndValidity();
 this.userProvider.doSendSMS ({ phone: this.validateForm1.controls.phone.value }).subscribe(res = { // 如果手机号验证通过
 if (res) { 
 this.ess('短信验证码已发送!');
 this.sendMessage(); // 调用下面的按钮倒计时的方法
 }); 
sendMessage() { // 发送了短信验证码后触发本方法,开始倒计时 
 this.countDown = true; // 发送验证码后一分钟内,按钮变成不可点击状态 
 this.showButtonText = '验证码已发送(' +60+ 's)'; // 验证码发送后的初始状态 
 const start = setInterval(() = { 
 if (this.countDownTime =0 ) {
 this.showButtonText = '验证码已发送(' + this.countDownTime-- + 's)'; // 动态的进行倒计时
 } else { 
 clearInterval(start); // 如果超时则重新发送 
 this.showButtonText = '重新发送'; 
 this.countDown = false; // 按钮再次变成可点击状态
 this.countDownTime = 60; 
 }, 1000);

3.页面上用方法中的变量来控制按钮的显示效果:

 div 
 button nz-button [disabled]="countDown" (click)="getCode($event)" {{showButtonText}} /button 
..... 
 /div 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


下一篇:没有了

推荐阅读

h5打包小程序_Angular6 发送手机验证码按钮倒计时

Angular6 推送手机上认证码按键倒数计时实际效果完成方式 本文关键详细介绍了Angular6 推送手机上认证码按键倒数计时实际效果完成方式,网编感觉挺好的,如今共享给大伙儿,也...

2021-01-08
SEO优化公司:珠宝行业如何通过营销来获取利

SEO提升企业:珠宝首饰制造行业怎样根据营销推广来获得利据展望产业链科学研究院公布的《我国珠宝首饰饰品制造行业消費要求与销售市场市场竞争项目投资预测分析剖析汇报》显示...

2021-01-08
小程序开发选哪家好_详解react

详细说明react-refetch的应用小事例 本文关键详细介绍了详细说明react-refetch的应用小事例,网编感觉挺好的,如今共享给大伙儿,也给大伙儿做下参照。一起追随网编回来看一下吧...

2021-01-08
广州凡科互联网科技股份有限公司招聘销售代表

招聘人数:16职位信息直说吧,我们要人你要钱,那你就来仔细看看吧能给你的薪资福利!!!以人为本,员工是公司宝贵的财富,乐芙为优秀的人才提供具有市场竞争力的薪资待遇,完...

2021-01-08
广州凡科互联网科技股份有限公司招聘(包吃住

招聘人数:11职位信息工作内容:公司***。通过公司提供的电话、网络联系客户,与客户沟通交流。职位要求:1、不甘平庸,有上进心,热情,有克服困难的信心及决心2、表达清晰,勤...

2021-01-08
广州凡科互联网科技股份有限公司招聘互联网产

招聘人数:8职位信息岗位职责:1.负责公司移动端产品设计与管理工作,跟进产品需求到实现的闭环;2.对用户心理和深层次需求有强烈的好奇心和探究的行动力,根据用户调研和数据分...

2021-01-08
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信