首页 > 其他分享 >短信验证码倒计时60s

短信验证码倒计时60s

时间:2022-11-25 10:01:00浏览次数:31  
标签:count COUNT 60s show 验证码 timer 倒计时

<span v-show="show" @click="getCode" class="getCode">获取验证码</span>
<span v-show="!show" class="count">{{count}}s后重新获取</span>
data(){
    return {
        show: true,
        count: '',
        timer: null,
    }
},
methods: {
        getCode(){
            const TIME_COUNT = 60;
            if (!this.timer) {
                this.count = TIME_COUNT;
                this.show = false;
                this.timer = setInterval(() => {
                    if (this.count > 0 && this.count <= TIME_COUNT) {
                        this.count--;
                    } else {
                        this.show = true;
                        clearInterval(this.timer);
                        this.timer = null;
                    }
                }, 1000)
            }
        }
    }

标签:count,COUNT,60s,show,验证码,timer,倒计时
From: https://www.cnblogs.com/snowhite/p/16924245.html

相关文章

  • 前端短信验证码倒计时
    varbtnSendCode=document.getElementById('btnSendCode')functiongetcode(){letusername=$("input[name=username]").val();varloading=layer......
  • Easy-Classification-验证码识别
    1.背景Easy-Classification是一个应用于分类任务的深度学习框架,它集成了众多成熟的分类神经网络模型,可帮助使用者简单快速的构建分类训练任务。 案例源代码Easy-......
  • Pig4Cloud之验证码
    登陆前端代码<template#append><divclass="login-code"><spanclass="login-code-img"@click="refreshCode......
  • java工具类之验证码工具类
    生成验证码之工具类packagecn.edu.dcxy;importjava.util.Random;publicclassItUtil{/***由于工具类无需创建对象,所以把其构造器私有化*/......
  • 360安全卫士举报360safe.exe?原来是在打假
    一同事在检查电脑时发现360safe.exe被360安全卫士举报为伪装成360安全卫士的程序:他以为大水冲了龙王庙,觉得不可思议,请我看看。先看这个被举报为伪装成360安全卫......
  • JSP利用AJAX实现页面即时校验验证码
    在JSP页面实现验证码校验文章中当时是使用的Servlet类来进行的验证码校验,但是这种方式并不能即时校验,在正常情况下都是直接在用户输入之后就进行校验,这样对用户来说很方便......
  • vue 倒计时组件
    引用自https://github.com/cgygd/vue2-countdown页面中使用<count-downv-on:start_callback="countDownS_cb(1)"v-on:end_callback="countDownE_cb(1)":currentTime=......
  • 开启群晖双重验证(密码+动态验证码)
    利用谷歌身份验证器(GoogleAuthenticator)绑定群晖账户实现验证码登录。​两步验证登录是公认的低成本高强度账号保护技术,很多安全等级较高的网站或软件都采用此种方式进行登......
  • Redis——模拟手机验证码校验过程
    importlombok.extern.slf4j.Slf4j;importredis.clients.jedis.Jedis;importredis.clients.jedis.JedisShardInfo;importjava.util.Random;/***@authorhuangd......
  • python ddddocr图片验证码详解
     下载地址:https://pypi.tuna.tsinghua.edu.cn/simple/ddddocr/安装命令:pipinstallD:\ChromeCoreDownloads\ddddocr-1.3.0-py3-none-any.whl-ihttps://pypi.tuna.ts......