JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
倒计时——从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短信验证码如何实现
我们在使用移动.电信等运营商网上营业厅的时候,为确保业务的完整和正确性,经常会需要用到短信的验证码.最近因为某省业务需要,也做了个类似的功能. 原理很简单,就是在用户点击"获取验证码"的时候,Ajax获取一串固定位数的数字,然后写数据库发短信,写Cookie设置验证码的有效期. JS请求验证码如下: $.ajax({ type: "GET", url: "../Ajax/smsrandcodetest.ashx?phone=" + phone.v
-
Vue.js实现移动端短信验证码功能
现在的短信验证码一般为4位或6位,则页面中会相应的显示4个或6个文本框,如图所示 当点击注册进入到输入验证码页面的时候,第一个框自动获取光标,依次输入,不可直接输入第三个或第四个框的值, input输入框是循环出来的,代码如下: <div class="sms_input"> <div v-for="n in sms.numbers-1"><input v-if="sms.show[n-1]" disabled=&q
-
JS短信验证码倒计时功能的实现（没有验证码，只有倒计时）
1.功能描述 当用户想要获取验证码时,就点击 免费获取验证码 ,然后开始倒计时,倒计时期间按钮文字为剩余时间x秒,且不可按状态,倒计时结束后,按钮更改为点击重新发送. 2.分析 必须用到定时器.按钮点击后,在定时器内做出判断.倒计时60秒,到0结束. 3.代码实现: 重点介绍:定时器在进行下一次倒计时之前,一定要清除一下,这样的话保证下一次定时器倒计时是正常的. <!DOCTYPE html> <html> <head> <meta charset="U
-
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新，页面关闭不进行倒计时功能)
相关阅读: 基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭) 下面一段代码是小编给大家带来的js发送短信验证码后实现倒计时功能,代码简单易懂. 具体代码如下所示: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus
-
JS实现用户注册时获取短信验证码和倒计时功能
在用户注册时,通常需要短信验证码,而且为了交互效果,也需要增加倒计时. 效果如下: <div class="user-form"> <form action="{{ path('zm_member_register') }}" method="post"> <div class="form-list"> <label class="register-label"&g
-
javascript发送短信验证码实现代码
本文首先分析手机发送验证码的原理,再对javascript发送短信验证码予以实现,具体思路如下: 实现点击"发送验证码"按钮后,按钮依次显示为"59秒后重试"."58秒后重试"-直至倒计时至0秒时再恢复显示为"发送验证码".在倒计时期间按钮为禁用状态 . 第一步.获取按钮.绑定事件.设置定时器变量和计时变量 第二步.添加定时器,每隔1秒钟计时减 1,直至当计时小于等于 0 时清除定时器,按钮恢复为"发送验证码&quo
-
JS获取短信验证码倒计时的实现代码
废话不多说了,直接给大家贴代码了,具体代码如下所示: $(function() { var phone_num = /^1\d{10}$/; var flag = 1; //短信发送时标志位 $(".getcode").click(function() { if($("#phone").val() == "") { alert("请输入电话号码!"); return false; }; if(!phone_num.test($
-
Nodejs 发送Post请求功能(发短信验证码例子)
直接上代码 sms.js var http = require('http'); var querystring = require('querystring'); function SmsCode() { //发短信 this.send = function (req0, res0) { var code = "3212"; var txt = "您的验证码是:"+code+".请不要把验证码泄露给其他人.如非本人操作,可不用理会!"; var
-
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
倒计时--从10倒数到0,点击按钮会还原倒计时 <body> <!-- 将textvalue值设为10,从10倒数 --> <input type="text" value="10" id="txt"> <input type="button" value="重新开始" id="btn"> </body> <script&
-
JS实现点击发送验证码 xx秒后重新发送功能
用于一些注册类的场景,点击发送验证码,xx秒后重新发送. 利用 setTimeout 方法,xx秒后执行指定的方法,修改button的属性值,disabled为true时为灰色,不可点击. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--<scrip
-
JS 60秒后重新发送验证码的实例讲解
废话不多说,直接上代码 //settime($("#getPhoneCode"),60); function settime($obj, time) { if (time == 0) { $obj.attr("disabled", false); $obj.css("background", "#f38401").css("cursor", "pointer"); $obj.text(&
-
Java实现发送短信验证码+redis限制发送的次数功能
java实现短信验证码发送,由于我们使用第三方平台进行验证码的发送,所以首先,我们要在一个平台进行注册.这样的平台有很多,有的平台在新建账号的时候会附带赠几条免费短信.这里我仅做测试使用(具体哪个平台见参考三,很简单,注册账号就行,记得添加短信签名). 另外,在实际项目中,如果有人恶意攻击,不停的发送短信验证码,就会造成很大的损失.故对发送次数做一定的限制就非常必要,这里我们限制一个手机号一天可以发多少短信和短信平台无关. 这里采用的是存redis来实现这一个功能.就是每次调用发送验证码这个接口
-
Python3实现发送邮件和发送短信验证码功能
Python3实现发送邮件: import smtplib from email.mime.text import MIMEText from email.utils import formataddr my_sender = '1434399884@qq.com' # 发件人邮箱账号 my_pass = '*********' # 发件人邮箱的授权码 my_user = '3152609963@qq.com' # 收件人邮箱账号,我这边发送给自己 def mail(): ret= True t
-
python网络爬虫实现发送短信验证码的方法
前言:今天要总结的是如何用程序来实现短信发送功能.但是呢,可能需要我们调用一些api接口,我会详细介绍.都是自己学到的,害怕忘记,所以要总结一下,让写博客成为一种坚持的信仰.废话不多说,我们开始吧! 网络爬虫实现发送短信验证码 在实现我们目标的功能之前,我们要有自己的思路,否则你没有方向,又如何实现自己的代码功能呢? 我们要发送短信,那么我们其实是需要分析的.我们可以去分析一个可以发送短信的网站页面. 我们来到这里如下: 可以看到这是一个注册界面,我们在注册时会被要求需要填写手机号码的·,其实还
-
教你用Python实现短信验证码的发送
目录 1. 短信API平台 2. 使用官方提供的SDK实现短信发送 2.1 安装SDK 2.2 使用官方的测试用例进行测试 2.3 参数及其参数的查看 3. 单例模式实现短信发送 总结 1. 短信API平台 使用的短信API平台为:容联云(https://www.yuntongxun.com/) 开发者文档:http://doc.yuntongxun.com/pe/5a531a353b8496dd00dcdfe2 2. 使用官方提供的SDK实现短信发送 Python SDK 文档 Python
-
JavaScript获取短信验证码（周期性）
本文实例为大家分享了js周期性获取短信验证码的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <input type="text"/> <input type=
-
java短信验证码获取次数限制实例
现在不管什么项目,用到短信验证功能,都会在程序上设计一个短信验证码的获取次数限制,这样主要是避免短信验证码接口被刷. 前一段正好做一个项目的用户短信验证码登录功能,就研究了以下,下面贴出来分享一下. 这里涉及到的短信接口,用的第三方短信接口-动力思维思维乐信的(http://www.lx598.com/),如果想了解短信接口接入,可以到他们官网,查看下短信接口API文档说明,参考下面的代码应该就能弄明白. 用户注册部分,主要代码如下: //主要js方法: //获取手机验证码: function