JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
更新时间：2019年08月23日 14:56:44 作者：而一水巳
这篇文章主要介绍了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>
知识点扩展：
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("验证码输入错误");
}
}
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);
}
总结
以上所述是小编给大家介绍的JS 实现发送短信验证码的“59秒后重新发送验证短信”功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
相关文章
下面小编就为大家分享一篇JavaScript判断变量名是否存在数组中的实例，具有很的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2017-12-12
JavaScript控制一张图片旋转，每次旋转90度，可旋转一周360度，以前没见到过，也不知道有没有用，奉献给大家，希望喜欢2011-12-12
这篇文章主要为大家详细介绍了js实现查询商品案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-07-07
下面小编就为大家带来一篇js获取当前年月日-YYYYmmDD格式的实现代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
这篇文章主要介绍了JS遍历数组及打印数组的方法,结合实例形式分析JavaScript数组的遍历与打印输出相关技巧,需要的朋友可以参考下2016-01-01
变量是存储信息的容器(JS的变量名是区分大小写的),下面这篇文章主要给大家介绍了关于JS进阶指南之变量和类型的相关资料,文章通过实例代码介绍的非常详细,需要的朋友可以参考下2022-05-05
饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比,它的数据格式比柱状图更简单,这篇文章主要给大家介绍了关于Echarts饼图样式之添加内圈阴影达到立体效果的相关资料,文中还介绍了echarts饼图外部阴影设置的方法,需要的朋友可以参考下2024-02-02
这篇文章主要介绍了ES10的13个新特性示例(小结)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
这篇文章主要为大家详细介绍了JavaScript实现页面无操作倒计时退出,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
这篇文章主要介绍了JavaScript实现数组全排列、去重及求最大值算法,结合实例形式分析了JavaScript针对数组的递归、遍历、排序等相关操作技巧,需要的朋友可以参考下2018-07-07
最新评论