JS短信验证码倒计时功能的实现（没有验证码，只有倒计时）

1、功能描述

　　当用户想要获取验证码时，就点击 免费获取验证码 ，然后开始倒计时，倒计时期间按钮文字为剩余时间x秒，且不可按状态，倒计时结束后，按钮更改为点击重新发送。

2、分析

　　必须用到定时器。按钮点击后，在定时器内做出判断。倒计时60秒，到0结束。

3、代码实现：

　　重点介绍：定时器在进行下一次倒计时之前，一定要清除一下，这样的话保证下一次定时器倒计时是正常的。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
.send{
width:250px;
margin:0 auto;
}
.send input{
display: block;
width:200px;
font:400 16px/30px "微软雅黑";
outline: none;
border: none;
}
.send button{
height:30px;
border: none;
outline: none;
font:400 16px/30px "微软雅黑";
text-align: center;
}
</style>
<script type="text/javascript">
window.onload=function(){
var button=document.getElementsByTagName("button")[0];
button.innerText="免费获取验证码";
var timer=null;
button.onclick=function(){
clearInterval(timer);//这句话至关重要
var time=6;
var that=this;//习惯
timer=setInterval(function(){
console.log(time);
if(time<=0){
that.innerText="";
that.innerText="点击重新发送";
that.disabled=false;
}else {
that.disabled=true;
that.innerText="";
that.innerText="剩余时间"+(time)+"秒";
time--;
}
},1000);
}
}
</script>
</head>
<body>
<div id="send">
<input type="text" name="in" id="in" value="" /><button></button>
</div>
</body>
</html>

以上所述是小编给大家介绍的JS短信验证码倒计时功能的实现（没有验证码，只有倒计时），希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • js验证手机号、密码、短信验证码代码工具类

    本文实例为大家分享了js验证手机号.密码.短信验证码的代码工具类,供大家参考,具体内容如下 代码工具类 /** * 参数较验 * * */ var verification = { stop : false, //倒计时 //验证手机号 phone : function (tel, id) { if ("" == tel || !tel) { mui.toast('手机号不可以为空!'); } else { var reg = /^0?1[3|4|5|7|8][0-9]\d{8}$/;

  • Vue.js实现移动端短信验证码功能

    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.要实现短信验证码界面,首先要有一个文本框,旁边是按钮,点击时开始倒计时. 2.先创建文本框和按钮,按钮设置对应的id,然后在js中通过id获取按钮这个元素,对其执行操作.同时应设置倒计时时间以及计时器变量,并使点击发送按钮后倒计时结束前无法继续点击按钮重新发送. 3.倒计时结束后,清除计时器,并使文字改变为"重新发送验证码",恢复对按钮能操作的功能,同时使倒计时的数从5秒重新开始以便点击后重新倒计时. <head> <meta charset="UTF-

  • javascript发送短信验证码实现代码

    javascript发送短信验证码实现代码

    本文首先分析手机发送验证码的原理,再对javascript发送短信验证码予以实现,具体思路如下: 实现点击"发送验证码"按钮后,按钮依次显示为"59秒后重试"."58秒后重试"-直至倒计时至0秒时再恢复显示为"发送验证码".在倒计时期间按钮为禁用状态 . 第一步.获取按钮.绑定事件.设置定时器变量和计时变量 第二步.添加定时器,每隔1秒钟计时减 1,直至当计时小于等于 0 时清除定时器,按钮恢复为"发送验证码&quo

  • 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

  • Nodejs实现短信验证码功能

    使用Nodejs的开发者愈来越多,基于Nodejs的后台开发也多了起来,像短信验证码.短信群发.国际短信这些需求,完全可以采用第三方接口来实现,云片就提供了这样的接口. Nodejs // 修改为您的apikey.可在官网(https://www.yunpian.com)登录后获取 var https = require('https'); var qs = require('querystring'); var apikey = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

  • JS实现用户注册时获取短信验证码和倒计时功能

    JS实现用户注册时获取短信验证码和倒计时功能

    在用户注册时,通常需要短信验证码,而且为了交互效果,也需要增加倒计时. 效果如下: <div class="user-form"> <form action="{{ path('zm_member_register') }}" method="post"> <div class="form-list"> <label class="register-label"&g

  • 基于JS实现发送短信验证码后的倒计时功能(无视页面刷新，页面关闭不进行倒计时功能)

    相关阅读: 基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭) 下面一段代码是小编给大家带来的js发送短信验证码后实现倒计时功能,代码简单易懂. 具体代码如下所示: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus

  • JS短信验证码倒计时功能的实现（没有验证码，只有倒计时）

    1.功能描述 当用户想要获取验证码时,就点击 免费获取验证码 ,然后开始倒计时,倒计时期间按钮文字为剩余时间x秒,且不可按状态,倒计时结束后,按钮更改为点击重新发送. 2.分析 必须用到定时器.按钮点击后,在定时器内做出判断.倒计时60秒,到0结束. 3.代码实现: 重点介绍:定时器在进行下一次倒计时之前,一定要清除一下,这样的话保证下一次定时器倒计时是正常的. <!DOCTYPE html> <html> <head> <meta charset="U

  • 手动实现js短信验证码输入框

    手动实现js短信验证码输入框

    前言 本文记录一下自己手动实现的一个前端常见的短信验证码输入组件,从需求到实现逐步优化的过程. 正文 1.需求分析 首先看一下效果图. 首先页面加载的时候,输入框获取焦点,当用户输入一个数字后,焦点自动跳转到第二个框,当四个框全部输入后,模拟发送提交请求,这里用一个弹框提示,输出输入的验证码内容.主流程之外的需求: 输入框内只能输入数字类型,不能输入字母,若强制输入非数字类型按下撤回键时候输入的验证码置空并且把当前焦点跳转至第一个输入框. 2.完整代码实现. 大致思路就是页面加载的时候,给第一个

  • Java实现发送手机短信语音验证功能代码实例

    这篇文章主要介绍了Java实现发送手机短信语音验证功能代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 利用第三方平台可以实现发送手机短信验证码和语音验证码的功能,本文使用框架是struts2+spring+hibernate,现就action层给出核心代码功能. public class VerifyAction extends BaseAction<VerifyRequest> { private static final long

  • Android中BroadcastReceiver实现短信关键字自动回复功能

    Android中BroadcastReceiver实现短信关键字自动回复功能

    前言:因公司业务需要,需要一台手机专门回复客户订购的套餐的短信,之前一直是人工手动回复,但比较麻烦且回复可能不及时,于是项目经理就让实现根据短信的关键字自动回复功能. 实现手机短信监听的方式有两种:一是通过ContentObserver观察者实现监听,另一种就是通过广播即BroadcastReceiver实现短信监听,文章中通过使用BroadcastReceiver实现有新短信的及时监听及包含设定的关键字时自动回复. 效果图: 清单文件添加权限: <uses-permission android

  • Android8.1 通过黑名单屏蔽系统短信和来电功能

    Android8.1 通过黑名单屏蔽系统短信和来电功能

    前言 同样的最近有个新需求,需要将8.1 设备的来电功能和短信功能都屏蔽掉,特殊产品就是特殊定制,那就开始吧. 屏蔽短信功能 还可沿用之前的6.0 处理方法, 在 SmsReceiverService.java 中 handleSmsReceived()中进行拦截分发 但是想了想这次准备搞点不一样的,我发现通讯录和之前6.0不太一样,8.1有个添加屏蔽联系人的功能,能够屏蔽指定电话和短信,也就是黑名单功能.所以此次就通过黑名单的方式进行拦截,通过下面几位老哥的详尽分析和打印日志找到修改地方 源码

  • Thinkphp实现短信验证注册功能

    Thinkphp实现短信验证注册功能

    前言 注册时经常需要用到短信验证码,本文记录一下思路和具体实现. 短信验证平台使用云片,短信验证码的生成使用thinkphp. 思路 1.用户输入手机号,请求获取短信验证码. 2.thinkphp生成短信验证码,存储,同时和其他参数一起发送请求给云片. 3.云片发送短信验证码到指定手机号. 4.用户输入短信验证码. 5.thinkphp根据验证码是否正确.验证码是否过期两个条件判断是否验证通过. 代码实现 验证接口 接口地址:https://sms.yunpian.com/v1/sms/send

  • js实现短信发送倒计时功能（正则验证）

    js实现短信发送倒计时功能（正则验证）

    本文实例为大家分享了js短信发送倒计时的具体代码,供大家参考,具体内容如下 <div class="login"> <form action="" method="post"> <div class="login-box"> <p class="pho-0 pho"> <img class="" src="img/icon_

  • Springboot实现阿里云通信短信服务有关短信验证码的发送功能

    Springboot实现阿里云通信短信服务有关短信验证码的发送功能

    前言 短信验证码是通过发送验证码到手机的一种有效的验证码系统.主要用于验证用户手机的合法性及敏感操作的身份验证. 现在市面上的短信服务平台有很多.大家在选择的时候未免会有些不好抉择.本人建议选择短信服务商应遵循以下几点: 服务商知名度高,业务流量大.(这样的平台可信度高) 服务稳定,不能经常宕机.(保证自身业务的流畅运行) 文档全面详细.(没文档怎么玩?) 最近的一个项目中,注册和修改密码时需要用到短信验证码校验手机号的功能.本人也是对比几家后,直接选择阿里云通信的短信服务.(本身项目服务器也是

  • Android自动填充短信验证码功能(demo)

    项目需求: Android开发中用户登录往会用到短信验证的功能,如果让用户先查看短信,然后再回到界面填写验证码,用户体验不是很好,有时就需要实现验证码的自动填写功能. 做法: 我以前的做法是先创建一个广播接收器,接受短信变化的广播,收到广播时,再把验证码提取出来. 那时有用户测试反馈他的手机安装了其他一些短信应用或者手机本身限制了权限的情况下,这种方式可能起不了作用,即使把优先级设高,也不能保证不会被别的应用抢先. 以前用户卸载掉第三方软件后,就没再追究了. 现在发现可以通过监听短信数据库的方式

  • Android实现自动填充短信验证码功能

    Android实现自动填充短信验证码功能

    前言 短信验证码获取并自动填写现在已经成为一个人性化App的标配了,这篇文章将实现一个短信验证码获取并自动填写的demo.其实就是读取指定号码的短信并提取出验证码,然后赋值给EditText显示. demo效果图: 读取短信 Android系统在接受到一条短信的时候会发出一条Action为android.provider.Telephony.SMS_RECEIVED的有序广播,因此我们读取短信的验证码只需要监听这个广播然后提取出短信中的验证码即可,如: /** * Created by 程龙 o

随机推荐