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


Posted in Javascript onAugust 23, 2019

倒计时——从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>

知识点扩展:

 数字字母混合的4位验证码

不管是在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秒后重新发送验证短信”功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jQuery aminate方法定位到页面具体位置
Dec 26 Javascript
禁用JavaScript控制台调试的方法
Mar 07 Javascript
JS根据生日算年龄的方法
May 05 Javascript
Bootstrop实现多级下拉菜单功能
Nov 24 Javascript
ES6概念 ymbol.for()方法
Dec 25 Javascript
利用 spin.js 生成等待效果(js 等待效果)
Jun 25 Javascript
浅谈node中的exports与module.exports的关系
Aug 01 Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
Apr 11 jQuery
微信小程序图片左右摆动效果详解
Jul 13 Javascript
JavaScript this在函数中的指向及实例详解
Oct 14 Javascript
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
解决vuecli3中img src 的引入问题
Aug 04 Javascript
微信小程序swiper禁止用户手动滑动代码实例
Aug 23 #Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
Aug 23 #Javascript
微信小程序之侧边栏滑动实现过程解析(附完整源码)
Aug 23 #Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
Aug 23 #Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
Aug 23 #Javascript
微信小程序 授权登录详解(附完整源码)
Aug 23 #Javascript
vue使用微信JS-SDK实现分享功能
Aug 23 #Javascript
You might like
php正则
2006/07/07 PHP
PHP通用分页类page.php[仿google分页]
2008/08/31 PHP
用php来改写404错误页让你的页面更友好
2013/01/24 PHP
php实现保存submit内容之后禁止刷新
2014/03/19 PHP
php5.4以下版本json不支持不转义内容中文的解决方法
2015/01/13 PHP
PHP+MySQL实现无极限分类栏目的方法
2015/12/23 PHP
PHP操作FTP类 (上传、下载、移动、创建等)
2016/03/31 PHP
PHP按符号截取字符串的指定部分的实现方法
2018/09/10 PHP
用js重建星际争霸
2006/12/22 Javascript
IE 上下滚动展示模仿Marquee机制
2009/12/20 Javascript
在javascript中对于DOM的加强
2013/04/11 Javascript
js 处理数组重复元素示例代码
2013/12/27 Javascript
JS解析XML实例分析
2015/01/30 Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
2015/03/12 Javascript
JavaScript实现移动端滑动选择日期功能
2016/06/21 Javascript
js手动播放图片实现图片轮播效果
2016/09/17 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
2018/08/28 Javascript
js使用文件流下载csv文件的实现方法
2019/07/15 Javascript
vue.js watch经常失效的场景与解决方案
2021/01/07 Vue.js
[07:01]DOTA2-DPC中国联赛正赛 Aster vs Magma 3月5日 赛后选手采访
2021/03/11 DOTA
全面了解python字符串和字典
2016/07/07 Python
分享python数据统计的一些小技巧
2016/07/21 Python
python中类变量与成员变量的使用注意点总结
2017/04/29 Python
Python基于Matplotlib库简单绘制折线图的方法示例
2017/08/14 Python
对Python中list的倒序索引和切片实例讲解
2018/11/15 Python
Python 解决火狐浏览器不弹出下载框直接下载的问题
2020/03/09 Python
HTML5 visibilityState属性详细介绍和使用实例
2014/05/03 HTML / CSS
美国知名珠宝首饰品牌:Gemvara
2017/10/06 全球购物
荷兰电脑专场:Paradigit
2018/05/05 全球购物
捷克街头、运动和滑板一站式商店:BoardStar.cz
2019/10/06 全球购物
关于爱情的广播稿
2014/01/16 职场文书
关于抽烟的检讨书
2014/02/25 职场文书
反腐倡廉影片观后感
2015/06/08 职场文书
法律讲堂观后感
2015/06/11 职场文书
教你怎么用Python实现GIF动图的提取及合成
2021/06/15 Python
SQL bool盲注和时间盲注详解
2022/07/23 SQL Server