验证码倒计时

简介: 验证码倒计时

验证码倒计时


我们经常会在注册,或者更换密码时候需要获取验证码

先给大家看一下效果

99a84f2afd4702a8f763995bf40ef891.jpg

just.gif

直接给代码,这个比较容易,注意我这里倒计时是0.2秒,所以比较快。基本都看得懂

#import "ViewController.h"
@interface ViewController ()
@property (nonatomic, strong) UIButton * timeButton;
@property (nonatomic, strong) NSTimer * timer;
@property (nonatomic, strong)UIButton * btn;
@end
@implementation ViewController
{
    NSInteger _time;
}
- (void)viewDidLoad {
    [super viewDidLoad];
    _time = 60;
    self.btn = [UIButton buttonWithType:UIButtonTypeCustom]; 
      _btn.backgroundColor = [UIColor orangeColor];
     [_btn setTitle:@"获取验证码" forState:UIControlStateNormal]; 
    _btn.titleLabel.font = [UIFont systemFontOfSize:15];
    [_timeButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    [_btn addTarget:self action:@selector(btnAction:) forControlEvents:UIControlEventTouchUpInside];
    [self refreshButtonWidth];
    [self.view addSubview:self.btn];
}
- (void)refreshButtonWidth{
    CGFloat width = 0;
    if (_btn.enabled){
        width = 100;
    } else {
        width = 100;
    }
    _btn.center = CGPointMake(self.view.frame.size.width/2, 200);
    _btn.bounds = CGRectMake(0, 0, width, 40);
    //每次刷新,保证区域正确
    [_btn setBackgroundImage:[self imageWithColor:[UIColor orangeColor] andSize:_btn.frame.size] forState:UIControlStateNormal];
    [_btn setBackgroundImage:[self imageWithColor:[UIColor lightGrayColor] andSize:_btn.frame.size] forState:UIControlStateDisabled];
}
- (UIImage *)imageWithColor:(UIColor *)color andSize:(CGSize)aSize{
    CGRect rect = CGRectMake(0.0f, 0.0f, aSize.width, aSize.height); UIGraphicsBeginImageContext(rect.size);
    CGContextRef context = UIGraphicsGetCurrentContext(); CGContextSetFillColorWithColor(context, [color CGColor]); CGContextFillRect(context, rect);
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext();
    return image;
}
- (void)btnAction:(UIButton *)sender{
    sender.enabled = NO;
    [self refreshButtonWidth];
    [sender setTitle:[NSString stringWithFormat:@"%zi", _time] forState:UIControlStateNormal];
    _timer = [NSTimer scheduledTimerWithTimeInterval:0.2 target:self selector:@selector(timeDown) userInfo:nil repeats:YES];
}
- (void)timeDown{
    _time --;
    if (_time == 0) {
        [_btn setTitle:@"重新获取" forState:UIControlStateNormal];
       _btn.enabled = YES;
        [self refreshButtonWidth];
        [_timer invalidate];
        _timer = nil; 
        _time = 60 ;
        return; 
    } 
    [_btn setTitle:[NSString stringWithFormat:@"%zi", _time] forState:UIControlStateNormal];
}


相关文章
验证码倒计时的注册页面
验证码倒计时的注册页面
54 0
layui框架实战案例(10):短信验证码60秒倒计时
layui框架实战案例(10):短信验证码60秒倒计时
325 0
|
3月前
|
Windows
Axure原型设计:获取验证码倒计时效果的实现
本文介绍了使用Axure 9.0在Windows或Mac电脑上设计手机号登录页面的步骤,包括前期准备和详细教程。前期准备涉及软件、硬件及逻辑梳理。教程涵盖绘制登录页面、创建动态面板实现倒计时效果,以及设置按钮交互。通过这些步骤,实现输入手机号后点击获取验证码的禁用状态与倒计时显示功能。鼓励读者思考其他实现方法,提升Axure使用技巧。
|
3月前
Axure原型设计:制作验证码倒计时,并重新获取交互效果
本文详细介绍了在Axure中实现验证码倒计时交互效果的步骤,包括元件准备、布局美化、全局变量设置及交互效果配置。通过分解交互流程,利用全局变量控制倒计时逻辑,最终实现按钮从“获取验证码”到倒计时状态的自动切换,并可重复使用。
120 1
|
4月前
|
NoSQL Java Redis
认证服务---整合短信验证码,验证码倒计时,验证码防刷校验 【一】
这篇文章介绍了如何在分布式微服务项目中整合短信验证码服务,包括使用阿里云短信验证接口、将短信验证功能集成到第三方服务中、其他服务的远程调用,以及通过Redis实现验证码防刷机制的代码实现和遇到的问题解决方案。
|
5月前
发送短信验证码,60秒倒计时重发
发送短信验证码,60秒倒计时重发
56 0
发送短信验证码,60秒倒计时重发
|
7月前
|
NoSQL 安全 前端开发
验证码倒计时:用户界面的小细节,大智慧
本文深入探讨了验证码倒计时的设计和实现,一项看似简单但对用户体验影响深远的功能。我们将讨论为什么需要倒计时,如何在不同平台(如Web和移动应用)上实现它,以及如何确保它既用户友好又安全。无论你是前端新手还是资深开发者,理解验证码倒计时的原理和最佳实践都将有助于你创建更流畅、更安全的用户界面。
241 3
|
JavaScript API 容器
手机短信验证码登录功能的开发实录(机器识别码、短信限流、错误提示、发送验证码倒计时60秒)
手机短信验证码登录功能的开发实录(机器识别码、短信限流、错误提示、发送验证码倒计时60秒)
307 1
|
Android开发
Android 短信验证码倒计时60s实现步骤
Android 短信验证码倒计时60s实现步骤
224 0
|
小程序 JavaScript
微信小程序登录与注册验证码倒计时的效果实现
微信小程序登录与注册验证码倒计时的效果实现
304 0