zoukankan      html  css  js  c++  java
  • 前端验证码倒计时算法

    我看了很多算法的方式都是用settimeout函数来进行dom操作,在React,Vue或者小程序中不太适用,每次都去改代码也稍微有点麻烦,并且不是很难的算法.这里做个记录,方便以后查阅,该算法也进行了一些优化.按理说应该比网络上其他大部分算法好.至少看起来舒服.

    接下来放源码了.

    由于是React,Vue和小程序,所以和一般的算法不太一样.

    首先是data数据.在React中是state,在Vue和小程序中是data.本文里的小程序,只是指微信小程序,由于支付宝和其他平台的没看过,估计也差不多.

    data或者state中的数据

    {
      countdown: 60,
      btnDisabled: false,
      text: '获取验证码',
    }

    接下来是主要算法:

    countTime(second) {
        let that = this;
        let intervalTimer = setInterval(() => {
            second -= 1;
            if (second >= 0) {
                // Vue中的写法
                this.text = second + "s后重新获取";
                this.btnDisabled = true;
                // React的写法
                that.setState({
                    text: second + "s后重新获取",
                    btnDisabled: true
                });
                // 小程序写法
                that.setData({
                    text: second + "s后重新获取",
                    btnDisabled: true
                });
            } else {
                clearInterval(intervalTimer);
                // Vue中的写法
                this.text = "获取验证码";
                this.codeBtnDisabled = false;
                // React的写法
                that.setState({
                    text: "获取验证码",
                    btnDisabled: false
                });
                // 小程序写法
                that.setData({
                    text: "获取验证码",
                    btnDisabled: false
                });
            }
        }, 0x03e8);
    }

    好了,主要的算法就是这样.接下来只需要在发送验证码的按钮点击事件中调用

    countTime 函数并传入参数就行.是60秒就传入60,120秒就传入120.

    H5的版本.
     function countTime(second) {
              var intervalTimer = setInterval(() => {
                second -= 1;
                if (second >= 0) {
                  btnSendCode.setAttribute("disabled", true);
                  btnSendCode.style.backgroundColor = "#DCDCDC";
                  btnSendCode.innerHTML = second + "s";
                } else {
                  btnSendCode.removeAttribute("disabled");
                  btnSendCode.style.backgroundColor = "#d4143c";
                  btnSendCode.innerHTML = "获取验证码";
                }
              }, 0x03e8);
            }
     
     
  • 相关阅读:
    实现类似“添加扩展程序…”的设计时支持
    为什么word2007写的文章不能显示在首页
    (翻译)LearnVSXNow!#4 创建一个带有工具窗的Package
    (翻译)LearnVSXNow!#1 如何开始VSX开发?
    测试Windows live writer 发日志
    (翻译)LearnVSXNow!#3 创建一个带有简单命令的Package
    styleSheetTheme和them
    (翻译)LearnVSXNow!#2 创建一个空的VS Package
    VS 2008 Package 备忘
    通用树形表查询SQL
  • 原文地址:https://www.cnblogs.com/dygood/p/12401799.html
Copyright © 2011-2022 走看看