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

相关阅读:

基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)

下面一段代码是小编给大家带来的js发送短信验证码后实现倒计时功能,代码简单易懂。

具体代码如下所示:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.js"></script>
<script src="http://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<!-- <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>-->
</head>
<body>
<input id="phonenum" type="text" value="18518181818"/>
<input id="second" type="button" value="免费获取验证码" />
</body>
<script>
//发送验证码时添加cookie
function addCookie(name,value,expiresHours){
//判断是否设置过期时间,0代表关闭浏览器时失效
if(expiresHours>0){
var date=new Date();
date.setTime(date.getTime()+expiresHours*1000);
$.cookie(name, escape(value), {expires: date});
}else{
$.cookie(name, escape(value));
}
}
//修改cookie的值
function editCookie(name,value,expiresHours){
if(expiresHours>0){
var date=new Date();
date.setTime(date.getTime()+expiresHours*1000); //单位是毫秒
$.cookie(name, escape(value), {expires: date});
} else{
$.cookie(name, escape(value));
}
}
//根据名字获取cookie的值
function getCookieValue(name){
return $.cookie(name);
}
$(function(){
$("#second").click(function (){
sendCode($("#second"));
});
v = getCookieValue("secondsremained");//获取cookie值
if(v>0){
settime($("#second"));//开始倒计时
}
})
//发送验证码
function sendCode(obj){
var phonenum = $("#phonenum").val();
var result = isPhoneNum();
if(result){
// doPostBack('${base}/login/getCode.htm',backFunc1,{"phonenum":phonenum});
addCookie("secondsremained",60,60);//添加cookie记录,有效时间60s
settime(obj);//开始倒计时
}
}
//开始倒计时
var countdown;
function settime(obj) {
countdown=getCookieValue("secondsremained");
if (countdown == 0) {
obj.removeAttr("disabled");
obj.val("免费获取验证码");
return;
} else {
obj.attr("disabled", true);
obj.val("重新发送(" + countdown + ")");
countdown--;
editCookie("secondsremained",countdown,countdown+1);
}
setTimeout(function() { settime(obj) },1000) //每1000毫秒执行一次
}
//校验手机号是否合法
function isPhoneNum(){
var phonenum = $("#phonenum").val();
var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
if(!myreg.test(phonenum)){
alert('请输入有效的手机号码!');
return false;
}else{
return true;
}
}
</script>
</html>

以上所述是小编给大家介绍的基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

时间: 2016-08-30

微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能

微信小程序+WEB使用JS实现注册[60s]倒计时功能开发步骤: 1.效果图: 2.页面仅仅利用了JS的相关功能,包含:wxml.js.wxss 2.1wxml页面代码: <text>绑定手机</text> <form bindsubmit="bindMobile"> <view class="form_group"> <text>手 机:</text> <input type="

js发送短信倒计时的简单实现方法

如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <meta charset="utf-8"> &l

JavaScript实现短信倒计时60s

废话不多说了,直接给大家贴代码了,具体代码如下所示: $(function(){ //获取验证码 var getCode = document.getElementById('getCode'); var wait = 60; function time(btn){ if (wait===0) { btn.removeAttribute("disabled"); btn.innerHTML = "获取验证码"; wait = 60; }else{ btn.setAt

js实现5秒倒计时重新发送短信功能

本文实例讲述了js实现倒计时重新发送短信验证码功能的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js-手机发送短信倒计时</title> <style> button{ width: 100px; height: 30px; border: none

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

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

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

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

Android自定义Chronometer实现短信验证码秒表倒计时功能

本文实例为大家分享了Chronometer实现倒计时功能,Android提供了实现按照秒计时的API,供大家参考,具体内容如下 一.自定义ChronometerView 继续自TextView 主要原理:先设置一个基准倒计时时间mBaseSeconds,内置handler 每隔1s发送一个空消息,mRemainSeconds--,同时刷新界面视图,回调给外部调用者,只到为零.外部调用者可通过start()/pause()/stop()来控制计时器的工作状态. 可以app中发送短信验证码的场景为例

jquery实现表单获取短信验证码代码

效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery表单获取短信验证码代码</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script&g

JS获取短信验证码倒计时的实现代码

废话不多说了,直接给大家贴代码了,具体代码如下所示: $(function() { var phone_num = /^1\d{10}$/; var flag = 1; //短信发送时标志位 $(".getcode").click(function() { if($("#phone").val() == "") { alert("请输入电话号码!"); return false; }; if(!phone_num.test($

Android获取短信验证码的实现方法

先给大家展示下效果图,如果感觉不错,请参考实现思路详解 Android开发中关于短息验证码的设计层出不穷,越来越多的应用为了更好的提高软件的安全性,开始使用通过服务器向用户发送验证码的方式,来保护用户个人信息的安全性.无论是用户注册时的信息验证还是当用户发出找回密码请求时的短信验证,他们的工作原理大致上是一致的,因为项目的需要研究了一下关于这方面的知识,本篇我将带领大家一起实现这一当下流行的设计方案. 众所周知,短信验证需要服务器端生成一个验证码,然后发送到用户输入的手机上,这个过程需要服务器主

Android开发之获取短信验证码后按钮背景变化并且出现倒计时

目前越来越多的app在注册或是进行对应操作时,要求获取短信验证码,在点击了获取短信验证码的按钮后,就是出现倒计时,比如倒计时120S,在倒计时期间内,按钮背景变化并且出现倒计时,当倒计时结束后,如果你没有获取到验证码,可以再次点击. 代码如下所示: VerCodeTimer mVerCodeTimer=(Button) findViewById(R.id.login_get_ver_code); private class VerCodeTimer extends CountDownTimer

JavaScript获取短信验证码(周期性)

本文实例为大家分享了js周期性获取短信验证码的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <input type="text"/> <input type=

Android自动获取短信验证码功能

先给大家展示下效果图,如果大家感觉不错,请参考实现代码. 1.自定义监听类 /** * 短信监听器,用于自动填充验证码 */ public class SMSContentObserver extends ContentObserver { public final String SMS_URI_INBOX = "content://sms/inbox";//收信箱 private Activity activity = null; private String smsContent

Android如何通过手机自动获取短信验证码

本文实例为大家分享了Android实现手机自动获取短信验证码功能,供大家参考,具体内容如下 1.短信监听广播 2.读取短信内容 3.截取短信内容[可以 reg截取] 4.填写至相应控件 PS:DevStore测试没有获取到验证码 源码片段 public class MainActivity extends Activity { private BroadcastReceiver smsReceiver; private IntentFilter filter2; private Handler

Android手机号注册、绑定手机号获取短信验证码实例

本文写了一个常见的功能--手机app中注册或绑定手机号的获取验证码的功能,也就是短信验证功能 具体效果就是,你在注册界面填写手机号,点击获取验证码按钮,---然后会收到验证短信,填入验证码后点击注册按钮,如果验证正确就可以跳转到另外一个界面 1.首先大家需要在mob官网注册一个账号,mob是一个免费的短信验证平台 2.在mob.com后台创建应用 3.下载对应的sdk 4.将sdk作为一个library导入到你的项目中 5.现在就可以在你的项目中编写代码使用mob提供的这个功能了 具体代码如下: