欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

JS 实现发送短信验证码的“59秒后重新发送验证短信”功能

程序员文章站 2023-12-01 17:09:46
倒计时——从10倒数到0，点击按钮会还原倒计时 &...

倒计时——从10倒数到0，点击按钮会还原倒计时

<body>
  <!-- 将textvalue值设为10，从10倒数 -->
  <input type="text" value="10" id="txt">
  <input type="button" value="重新开始" id="btn">
</body>
<script>
  var ot = document.getelementbyid("txt");
  var ob = document.getelementbyid("btn");
  var timer;
  //封装一个开始倒数的函数
  function start(){
    //开启计时器，每秒text框中的数值自减1
    timer = setinterval(function(){
      ot.value--;
      //当text框中的数值为0时，停止计时器
      if(ot.value<=0){
        clearinterval(timer);
      }
    },1000)
  }
  //封装一个清楚延时器的函数
  function stop(){
    cleartimeout(timer);
  }
  //当网页加载完毕时的行为如下
  window.onload = function(){
    //只要text里面的数值还未到0，则不停地以每秒减一的速度进行着
    if(ot.value>0){
      start();
    //一旦清零，就停止
    }else{
      stop();
    }
  }
  //当点击按钮时的行为
  ob.onclick = function(){
    //此处要设清除计时器，否则中断text倒数后的重新倒数将会加速，甚至会递减到负值
    clearinterval(timer);
    //点击按钮后，无论text中的数值时多少，都变为10
    ot.value = 10;
    //重复上面函数的行为
    if(ot.value>0){
      start();
    }else{
      stop();
    }
  }
</script>

知识点扩展：

不管是在app注册、登录里，还是在网页注册里，都会看到验证码；那这个验证码要怎么实现呢？通过js有两种方法可以达到这样的效果，下面代码奉上哦！

方法一：这个方法比较好理解，首先定义一个数组，将会产生的字母，数值都放进去；有4位就循环4次，每循环一次产生一个随机结果，将每次的结果累加起来存入想要放的位置。

var arr=['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z']
  //产生4位验证码
  for(var i=0;i<4;i++){
    pos=parseint(math.random()*(arr.length-1));
    ophoto.value+=arr[pos];
  }
  // 验证用户输入的验证码是否正确
  ocode.onblur = function () {
    if(ocode.value!=ophoto.value){
      alert("验证码输入错误");
    }
  }

方法二：这个方法也挺好理解的，产生一个随机字符库，然后开始对随机库（str）里面的字符所对应的下标进行随机，然后将随机而来的下标所对应的字符累加给另一个字符串即可。

function randomstr(){
    // 产生库
    var str = "";
    var str1 = "";
    for (var i = 0; i < 4; i++) {
      var a = random(0, 9);
      var b = string.fromcharcode(random(65, 90));
      var c = string.fromcharcode(random(97, 122));
      str1 = str1 + a + b + c;
    }
    // 开始真正的随机
    for (var i = 0; i < 4; i++) {
      str += str1[random(0, str1.length - 1)]
    }
    return str;
  }
  ophoto.value = randomstr();
  ocode.onblur = function () {
    if (ocode.value != ophoto.value) {
      alert("验证码输入错误");
    }
  }
  function random(max, min) {
    return math.round(math.random() * (max - min) + min);
  }

以上两种方法都可得到随机数字字母混合的4位验证码，可以都尝试着理解下，然后去敲敲看。若有其他方法，会更新哒！

总结

以上所述是小编给大家介绍的js 实现发送短信验证码的“59秒后重新发送验证短信”功能,希望对大家有所帮助

上一篇： 微信小程序前端promise封装代码实例

下一篇： 云服务架构有哪些（私有云和公有云的区别）

推荐阅读