美文网首页Ios@IONIC
Swift-发送验证码的倒计时

Swift-发送验证码的倒计时

作者: 麦穗0615 | 来源:发表于2019-06-28 11:54 被阅读6次

前言:本篇文章在于记录常用的倒计时,方便查找。可以随时的,进行记忆

目录:
一、效果图
二、代码示例
三、主要逻辑

效果图展示:

代码示例

 import UIKit
 
 // 封装倒计时button
 class CountDownTimerButton: UIButton {
 
     // 向外部提供可点击接口
     // 声明闭包,在外面使用时监听按钮的点击事件
     typealias ClickedClosure = (_ sender: UIButton) -> Void
     // 作为此类的属性
     var clickedBlock: ClickedClosure?
     
     
     /// 计时器
     private var countdownTimer: Timer?
     /// 计时器是否开启(定时器开启的时机)
     var isCounting = false {
         
         willSet {
               // newValue 为true表示可以计时
             if newValue {
                 countdownTimer = Timer.scheduledTimer(timeInterval: 1, target: self, selector: #selector(updateTime(_:)), userInfo: nil, repeats: true)
                 
             } else {
                 // 定时器停止时,定时器关闭时(销毁定时器)
                 countdownTimer?.invalidate()
                countdownTimer = nil
            }
             
             // 判断按钮的禁用状态 有新值 按钮禁用 无新值按钮不禁用
              self.isEnabled = !newValue
             
         }
     }
     
     /// 剩余多少秒
     var remainingSeconds: Int = 5 {
         
         willSet {
             self.setTitle("\(newValue) s", for: .normal)
             if newValue <= 0 {
                 self.setTitle("重新获取", for: .normal)
                 isCounting = false
             }
         }
     }
     
 
     override init(frame: CGRect) {
         super.init(frame: frame)
         
         // 初始化
         self.setupUI()
     }
     
     required init?(coder aDecoder: NSCoder) {
         fatalError("init(coder:) has not been implemented")
     }
     
     // 配置UI
     func setupUI() -> Void {
         
         self.setTitle(" 获取验证码 ", for:.normal)
         self.setTitleColor(RGBAlpa(0,0,0,1), for: .normal)
         self.titleLabel?.font = UIFont.systemFont(ofSize: 13~)
         self.backgroundColor = UIColor.white
         self.layer.cornerRadius = 12~
         self.layer.masksToBounds = true
         self.layer.borderWidth = 1.0
         self.layer.borderColor = UIColor.black.cgColor
         self.addTarget(self, action: #selector(sendButtonClick(_:)), for: .touchUpInside)
         
         
         
     }
    
     // MARK: 点击获取验证码
     // 按钮点击事件(在外面也可以再次定义点击事件,对这个不影响,会并为一个执行)
     @objc func sendButtonClick(_ btn:UIButton) {
         
         // 开启计时器
         self.isCounting = true
        // 设置重新获取秒数
       self.remainingSeconds = 60
        
         // 调用闭包
        if clickedBlock != nil {
            self.clickedBlock!(btn)
        }
       
     }
    
     // 开启定时器走的方法
     @objc func updateTime(_ btn:UIButton) {
         remainingSeconds -= 1
     }
     
     
 }

主要逻辑:

  • 初始时isCounting为false, 表示没有开始计时

  • 当我点击按钮时,isCounting为true, 开始计时,这时isCounting被赋予了新的值,会执行willSet方法,从而执行了updateTime方法,在updateTime方法中,我们让remainingSeconds每秒减1,当remainingSeconds值改变时,会调用willSet方法,并将新的值显示在按钮上。

  • 当remainingSeconds减为0时,让按钮重新显示获取验证码字样,并结束倒计时,这样就实现了一个获取验证码倒计时的功能。

相关文章

  • iOS-UIButton倒计时

    一般倒计时的使用场景就两种:发送短信验证码倒计时广告页倒计时 一、发送短信验证码倒计时 这种情况下,正在倒计时的按...

  • iOS验证码倒计时实现,退出进入以后继续倒计时

    需求 App中有很多页面地方要发送验证码,涉及到验证码的地方肯定会有倒计时功能。产品要求发送验证码以后,在倒计时结...

  • 链式调用

    这个是, 短信验证码的发送接口, 然后,验证码发送成功调用倒计时函数,不成功不调用倒计时,我一开始的想法,是返回一...

  • Axure RP9 倒计时效果

    在注册时常用到发送验证码的功能,输入手机号后点击“发送验证码” 此时按钮置灰 并开始倒计时,倒计时结束后,可以再次...

  • 登录注册---验证码倒计时的实现

    先上图: OK!今天要实现的就是发送验证码的倒计时。 首先搭建好你需要的页面。给“发送验证码”sendBtn添加一...

  • Swift-发送验证码的倒计时

    前言:本篇文章在于记录常用的倒计时,方便查找。可以随时的,进行记忆 目录:一、效果图二、代码示例三、主要逻辑 效果...

  • 输入正确的手机号码才可以发送验证码 2018-08-10

    实现输入正确的手机号码才可以发送验证码的功能,check函数在mounted中调用 发送验证码的倒计时效果

  • React 自定义 Hooks 之 useSetInterval

    概述 在业务场景中,我们总会遇到倒计时。例如发送验证码之后的 60s 重新发送的倒计时。最近在使用 React H...

  • 获取验证码按钮的状态

    有四个状态 获取验证码 发送中 倒计时 60-1 重新获取 1.默认为获取验证码首先 点击发送请求 中 按钮为 发...

  • Android 用 RxBinding 与 RxJava2 实现

    场景:注册账号页面时,我们点击按钮发送验证码,在等待验证码时,界面会有倒计时提示,这此期间按钮不可点击。当倒计时结...

网友评论

    本文标题:Swift-发送验证码的倒计时

    本文链接:https://www.haomeiwen.com/subject/pxjscctx.html