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 相关文章推荐
网站上面有这种切换效果
Jun 26 Javascript
基于jquery的自定义鼠标提示效果 jquery.toolTip
Nov 14 Javascript
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
Jun 08 Javascript
jquery 卷帘效果实现代码(不同方向)
Feb 05 Javascript
js调用webservice中的方法实现思路及代码
Feb 25 Javascript
javascript 获取图片尺寸及放大图片
Sep 04 Javascript
jquerydom对象的事件隐藏显示和对象数组示例
Dec 10 Javascript
javascript实现确定和取消提示框效果
Jul 10 Javascript
js严格模式总结(分享)
Aug 22 Javascript
jQuery实现的网页换肤效果示例
Sep 20 Javascript
Node.js获取前端ajax提交的request信息
Feb 20 Javascript
vue全局使用axios的方法实例详解
Nov 22 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上传图片存入数据库示例分享
2014/03/11 PHP
注释PHP和html混合代码的小技巧(分享)
2016/11/03 PHP
实例讲解php将字符串输出到HTML
2019/01/27 PHP
极酷的javascirpt,让你随意编辑任何网页
2007/02/25 Javascript
JavaScript的类型简单说明
2010/09/03 Javascript
JavaScript入门之对象与JSON详解
2011/10/21 Javascript
jquery获取复选框checkbox的值实现方法
2016/05/30 Javascript
jQuery基础_入门必看知识点
2016/07/04 Javascript
如何用js实现鼠标向上滚动时浮动导航
2016/07/18 Javascript
深入理解Node.js 事件循环和回调函数
2016/11/02 Javascript
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
2017/03/23 jQuery
详解angularJs中关于ng-class的三种使用方式说明
2017/06/02 Javascript
在ES5与ES6环境下处理函数默认参数的实现方法
2018/05/13 Javascript
vuex实现的简单购物车功能示例
2019/02/13 Javascript
详解JavaScript的变量
2019/04/04 Javascript
javascript删除数组元素的七个方法示例
2019/09/09 Javascript
NProgress显示顶部进度条效果及使用详解
2019/09/21 Javascript
[45:56]Ti4正赛第一天 VG vs NEWBEE 3
2014/07/19 DOTA
Linux环境下MySQL-python安装过程分享
2015/02/02 Python
python生成每日报表数据(Excel)并邮件发送的实例
2019/02/03 Python
python生成带有表格的图片实例
2019/02/03 Python
Django admin禁用编辑链接和添加删除操作详解
2019/11/15 Python
python flask中动态URL规则详解
2019/11/22 Python
详解Python Opencv和PIL读取图像文件的差别
2019/12/27 Python
Python函数参数定义及传递方式解析
2020/06/10 Python
python opencv实现简易画图板
2020/08/27 Python
python 服务器运行代码报错ModuleNotFoundError的解决办法
2020/09/16 Python
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
2018/01/08 HTML / CSS
FILA斐乐中国官方商城:意大利运动品牌
2017/01/25 全球购物
高中军训第一天感言
2014/03/06 职场文书
党员2014两会学习心得体会
2014/03/17 职场文书
教师岗位聘任书范文
2014/03/29 职场文书
写给领导的感谢信
2015/01/22 职场文书
荆州古城导游词
2015/02/06 职场文书
结婚喜宴祝酒词
2015/08/10 职场文书
Python Matplotlib绘制条形图的全过程
2021/10/24 Python