短信验证码倒计时按钮的实现

1、功能描述

验证码倒计时按钮的应用是非常普遍的,本文介绍了IOS实现验证码倒计时功能,点击获取验证码,进入时间倒计时,感兴趣的小伙伴们可以参考一下:

当用户想要获取验证码时,就点击 免费获取验证码 ,然后开始倒计时,倒计时期间按钮文字为剩余时间x秒,且不可按状态,倒计时结束后,按钮更改为点击重新发送。

图片 1

2、分析

图片 2

必须用到定时器。按钮点击后,在定时器内做出判断。倒计时60秒,到0结束。

实现思路:

3、代码实现:

创建按钮, 添加点击方法;

重点介绍:定时器在进行下一次倒计时之前,一定要清除一下,这样的话保证下一次定时器倒计时是正常的。

用NSTimer定时器, 每秒执行一次, 定时改变Button的title,改变Button的样式, 设置Button不可点击;

*{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;}window.onload=function(){var button=document.getElementsByTagName[0];button.innerText="免费获取验证码";var timer=null;button.onclick=function(){clearInterval;//这句话至关重要var time=6;var that=this;//习惯timer=setInterval{console.log{that.innerText="";that.innerText="点击重新发送";that.disabled=false;}else {that.disabled=true;that.innerText="";that.innerText="剩余时间"++"秒";time--;}},1000);}}

若倒计时结束, 定时器关闭, 并改变Button的样式, 可以点击;

以上所述是小编给大家介绍的JS短信验证码倒计时功能的实现,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

代码如下:

图片 3

注意点:

我们在创建Button时, 要设置Button的样式:

当type为: UIButtonTypeCustom时 , 是读秒的效果.

当type为: 其他时,  是一闪一闪的效果.

本文由澳门威斯尼人平台登录发布于服务器&运维,转载请注明出处:短信验证码倒计时按钮的实现

相关阅读