简单的验证码倒计时功能

简介: 简单的验证码倒计时功能

之前在公司实习时,主要从事于前端开发。公司当时主要是在开发一个管理系统,关于金融方面的。


前端开发技术主要是用到了vue全家桶、elementUI,以及vue相关的插件等。当时公司是IDEA进行开发,但我推荐用VSCode进行开发,具体还是要按照公司的要求来。


首先说一说验证码计时功能


HTML代码(基于elementUI):


<el-button v-bind:class="{grey:isGrey,blue:!isGrey}" v-bind:disabled="dis" type="primary" 
  @click="getCode">
       <span v-if="show">发送验证码</span><span v-else>重新发送({{count}}s)</span>
  </el-button>

v-bind是vue.js的指令用于绑定数据和元素属性,想具体了解可以去官网查看,这里是用来控制按钮的css样式。


JS代码(基于vue.js);


getCode(){
        this.$refs["form"].validate(valid => {
          if (valid) {
            sendSms(this.form.contactNumber, 120).then(response => {
              if (response.code == 200) {
                this.form.uuid = response.msg;
                this.getCode_Interval()
              }
            })
          }});
      },
      getCode_Interval(second=120)
      {
        this.msgSuccess("验证码已发送到您的手机");
        this.dis=true;
        this.isGrey=true;
        const TIME_COUNT = second;
        if (!this.timer) {
          this.count = TIME_COUNT;
          this.show = false;
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--;
            } else {
              clearInterval(this.timer);
              this.timer = null;
              this.isGrey=false;
              this.show = true;
              this.dis=false
            }
          }, 1000)
        }
      }


在看这段代码如有不懂时可以先去了解vue以及elementUI。


CSS代码:


.grey{
    background-color: #EDEEF1;
    border-color: #EDEEF1;
    color:#666;
    width: 30%;
  }
  .blue{
    background-color: #64A0DD;
    border-color: #64A0DD;
}

参照:Vue实现验证码的60s倒计时_老猫吃饭团的博客-CSDN博客

相关文章
验证码倒计时的注册页面
验证码倒计时的注册页面
47 0
|
JavaScript 前端开发
原生JS实现移动端短信验证码功能
原生JS实现移动端短信验证码功能
234 0
原生JS实现移动端短信验证码功能
JavaWeb用户信息管理系统-在登录中添加验证码功能
JavaWeb用户信息管理系统-在登录中添加验证码功能
75 0
|
2月前
|
Windows
Axure原型设计:获取验证码倒计时效果的实现
本文介绍了使用Axure 9.0在Windows或Mac电脑上设计手机号登录页面的步骤,包括前期准备和详细教程。前期准备涉及软件、硬件及逻辑梳理。教程涵盖绘制登录页面、创建动态面板实现倒计时效果,以及设置按钮交互。通过这些步骤,实现输入手机号后点击获取验证码的禁用状态与倒计时显示功能。鼓励读者思考其他实现方法,提升Axure使用技巧。
|
2月前
|
存储 JSON 前端开发
node使用token来实现前端验证码和登录功能详细流程[供参考]=‘很值得‘
本文介绍了在Node.js中使用token实现前端验证码和登录功能的详细流程,包括生成验证码、账号密码验证以及token验证和过期处理。
44 0
node使用token来实现前端验证码和登录功能详细流程[供参考]=‘很值得‘
|
2月前
Axure原型设计:制作验证码倒计时,并重新获取交互效果
本文详细介绍了在Axure中实现验证码倒计时交互效果的步骤,包括元件准备、布局美化、全局变量设置及交互效果配置。通过分解交互流程,利用全局变量控制倒计时逻辑,最终实现按钮从“获取验证码”到倒计时状态的自动切换,并可重复使用。
|
3月前
|
SQL 前端开发 NoSQL
SpringBoot+Vue 实现图片验证码功能需求
这篇文章介绍了如何在SpringBoot+Vue项目中实现图片验证码功能,包括后端生成与校验验证码的方法以及前端展示验证码的实现步骤。
SpringBoot+Vue 实现图片验证码功能需求
|
3月前
|
NoSQL Java Redis
认证服务---整合短信验证码,验证码倒计时,验证码防刷校验 【一】
这篇文章介绍了如何在分布式微服务项目中整合短信验证码服务,包括使用阿里云短信验证接口、将短信验证功能集成到第三方服务中、其他服务的远程调用,以及通过Redis实现验证码防刷机制的代码实现和遇到的问题解决方案。
|
3月前
|
NoSQL JavaScript Java
SpringBoot+Vue+Redis实现验证码功能、一个小时只允许发三次验证码。一次验证码有效期二分钟。SpringBoot整合Redis
这篇文章介绍了如何使用SpringBoot结合Vue和Redis实现验证码功能,包括验证码的有效期控制和一小时内发送次数的限制。
|
4月前
发送短信验证码,60秒倒计时重发
发送短信验证码,60秒倒计时重发
47 0
发送短信验证码,60秒倒计时重发