首页 > 其他分享 >前端短信验证码倒计时

前端短信验证码倒计时

时间:2022-11-24 17:45:57浏览次数:39  
标签:function countdown layer 短信 username 验证码 倒计时 btnSendCode msg

  var btnSendCode = document.getElementById('btnSendCode')
  function getcode() {
    let username = $("input[name=username]").val();
    var loading = layer.load(1);
    $.post("{:url('frontend/Sign/sendCode')}", { username: username }, function (response) {
      layer.close(loading);
      if (response.code != 1) {
        layer.msg(response.msg, function () { });
        return;
      }
      layer.msg(response.msg);
      btnSendCode.setAttribute("disabled", true);
      settime(60)
    })
 
  }

  下面是倒计时的代码

  function settime(countdown) {
    if (countdown == 0) {
      btnSendCode.removeAttribute("disabled");
      btnSendCode.value = "获取验证码";
    } else {
      btnSendCode.setAttribute("disabled", true);
      btnSendCode.value = "重新发送(" + countdown + ")";
      countdown--;
    }
    setTimeout(function () {
      settime(countdown)
    }, 1000)
  }

 

标签:function,countdown,layer,短信,username,验证码,倒计时,btnSendCode,msg
From: https://www.cnblogs.com/caijiqi190731/p/16922654.html

相关文章

  • Easy-Classification-验证码识别
    1.背景Easy-Classification是一个应用于分类任务的深度学习框架,它集成了众多成熟的分类神经网络模型,可帮助使用者简单快速的构建分类训练任务。 案例源代码Easy-......
  • 安卓读取手机短信
    上次接了一个项目,大致意思是一个页面,有六个输入(EditText),以及两个Button,一个button用于读取短信,并处理读取的信息填充至六个EditText里面,另外一个按钮用于清除掉六个EditTe......
  • Pig4Cloud之验证码
    登陆前端代码<template#append><divclass="login-code"><spanclass="login-code-img"@click="refreshCode......
  • 2014春节短信王
    史上最全的2014马年春节拜年短信王为您集合各式春节拜年短信,亲人朋友恋人老板红颜闺蜜发小一网打尽绝对的高端大气上档次,低调奢华有内涵,发条一温馨的短信给家人朋友,送去您......
  • zabbix 配置使用阿里云短信服务
    1.简介Zabbix的版本升级迭代的速度越来越快,随着云原生的普及,zabbix也增加了对于容器的支持和主动监控服务。以下的参考基于之前的版本,但相关功能配置是类似的。本文的短信......
  • java工具类之验证码工具类
    生成验证码之工具类packagecn.edu.dcxy;importjava.util.Random;publicclassItUtil{/***由于工具类无需创建对象,所以把其构造器私有化*/......
  • 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=......
  • Android 手机发送短信
    参照网上的例子,做了一个手机发送短信的app。有两种发送方法:第一种方法测试没有信息的发送记录,第二种调用的sms的Activity还要自行操作。首先是xml布局文件代码:<LinearLayout......
  • 开启群晖双重验证(密码+动态验证码)
    利用谷歌身份验证器(GoogleAuthenticator)绑定群晖账户实现验证码登录。​两步验证登录是公认的低成本高强度账号保护技术,很多安全等级较高的网站或软件都采用此种方式进行登......