验证码输入时倒计时控制

最新推荐文章于 2021-03-27 18:09:05 发布

火把水逗笑

最新推荐文章于 2021-03-27 18:09:05 发布

阅读量272

点赞数

文章标签： cocos-js 验证码输入框倒计时

本文链接：https://blog.csdn.net/weixin_43907572/article/details/103067317

版权

需求：验证码登录时，点击获取验证码按钮，此时按钮变成不可点击，并且开始倒计时，倒计时结束后自动变成重新发送按钮。

思路：用cocosStudio拼好基本界面，发送验证码按钮，并且用两个text分别表示“重新发送”和“发送验证码”，这样在倒计时开始和结束时界面发生改变。

以下时逻辑代码：

_curCoolTime : 0,
_coolTimeTimer : 0,

点击了发送验证码按钮

startVerifyCodeCoolTime:function (time) {
    var vertifyCodeBtn = this.getChildFromRoot("vertifyCodeBtn");  // 获取CocosStudio组件
    var name1 = this.getChildByName("name1");
    var name2 = this.getChildByName("name2");
    name1.setVisible(false);
    name2.setVisible(true);

    this._curCoolTime = time;
    name2.string = this._curCoolTime + "/ s";

    if(this._coolTimeTimer != 0){
        clearInterval(this._coolTimeTimer);
    }

    var self = this;
    this._coolTimeTimer = setInterval(function () {
        self._curCoolTime--;
        name2.string = self._curCoolTime + "/ s";
        if(self._curCoolTime == 0){
            name1.setVisible(true);
            name2.setVisible(false);
            clearInterval(self._coolTimeTimer);
        }
    },1000);
},