[1].[代码] 这是页面上的发送验证码按钮 跳至 [1] [2] [3]
<input id="second" type="button" value="免费获取验证码" />
[2].[代码] js对cookie的操作 跳至 [1] [2] [3]

//发送验证码时添加cookie
function addCookie(name,value,expiresHours){
var cookieString=name+"="+escape(value);
//判断是否设置过期时间,0代表关闭浏览器时失效
if(expiresHours>0){
var date=new Date();
date.setTime(date.getTime()+expiresHours*1000);
cookieString=cookieString+";expires=" + date.toUTCString();
}
document.cookie=cookieString;
}
//修改cookie的值
function editCookie(name,value,expiresHours){
var cookieString=name+"="+escape(value);
if(expiresHours>0){
var date=new Date();
date.setTime(date.getTime()+expiresHours*1000); //单位是毫秒
cookieString=cookieString+";expires=" + date.toGMTString();
}
document.cookie=cookieString;
}
//根据名字获取cookie的值
function getCookieValue(name){
var strCookie=document.cookie;
var arrCookie=strCookie.split("; ");
for(var i=0;i<arrCookie.length;i++){
var arr=arrCookie[i].split("=");
if(arr[0]==name){
return unescape(arr[1]);
break;
}else{
return "";
break;
}
}

}
[3].[代码] 主要逻辑代码 跳至 [1] [2] [3]

$(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);//开始倒计时
}
}
//将手机利用ajax提交到后台的发短信接口
function doPostBack(url,backFunc,queryParam) {
$.ajax({
async : false,
cache : false,
type : 'POST',
url : url,// 请求的action路径
data:queryParam,
error : function() {// 请求失败处理函数
},
success : backFunc
});
}
function backFunc1(data){
var d = $.parseJSON(data);
if(!d.success){
alert(d.msg);
}else{//返回验证码
alert("模拟验证码:"+d.msg);
$("#code").val(d.msg);
}
}
//开始倒计时
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;
}
}

js实现发送短信验证码后的倒计时功能(无视页面刷新)的更多相关文章

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

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. jQuery实现发送短信验证码后60秒倒计时

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...

  3. Yii2发送短信验证码完全解决方案

    概述 在做项目的时候,需要用到短信发送验证码功能.不能不说Yii2的牛逼,很容易就搞定了.下面我整理一下具体功能和流程,分享给大家. 主要功能 通过Yii2 rules验证手机号 通过js验证是否为手 ...

  4. day101:MoFang:模型构造器ModelSchema&注册功能之手机号唯一验证/保存用户注册信息/发送短信验证码

    目录 1.模型构造器:ModelSchema 1.SQLAlchemySchema 2.SQLAlchemyAutoSchema 2.注册功能基本实现 1.关于手机号码的唯一性验证 2.保存用户注册信 ...

  5. 超实用的JavaScript代码段 Item4 --发送短信验证码

    发送短信验证码 实现点击“发送验证码”按钮后,按钮依次显示为“59秒后重试”.“58秒后重试”…直至倒计时至0秒时再恢复显示为“发送验证码”.在倒计时期间按钮为禁用状态 . 第一步.获取按钮.绑定事件 ...

  6. 微信小程序发送短信验证码完整实例

    微信小程序注册完整实例,发送短信验证码,带60秒倒计时功能,无需服务器端.效果图: 代码: index.wxml <!--index.wxml--> <view class=&quo ...

  7. android发送短信验证码并自动获取验证码填充文本框

    android注册发送短信验证码并自动获取短信,截取数字验证码填充文本框. 一.接入短信平台 首先需要选择短信平台接入,这里使用的是榛子云短信平台(http://smsow.zhenzikj.com) ...

  8. java 阿里云接口实现发送短信验证码

    此刻自己做的小项目中,需要用到手机发送短信验证码实现注册功能,于是就去阿里云注册了账号,并实现随机发送验证码的功能 第一步:在阿里云官网登录注册   已有支付宝或淘宝的账号可以直接登录,最后需要实名认 ...

  9. 阿里云短信服务发送短信验证码(JAVA开发此功能)

    开发此功能需注册阿里云账号,并开通短信服务(免费开通) 充值后,不会影响业务的正常使用!(因为发送验证类短信:1-10万范围的短信是0.045元/条).开发测试使用,充2块钱测试足够了 可参考阿里云官 ...

随机推荐

  1. iphone H5 input type="search" 不显示搜索 解决办法

    H5 input type="search" 不显示搜索 解决办法 H5 input type="search" 不显示搜索 解决方法 在IOS(ipad iP ...

  2. C# 非模式窗体show()和模式窗体showdialog()的区别(转)

    对话框不是模式就是无模式的.模式对话框,在可以继续操作应用程序的其他部分之前,必须被关闭(隐藏或卸载).例如,如果一个对话框,在可以切换到其它窗 体或对话框之前要求先单击“确定”或“取消”,则它就是模 ...

  3. Nodejs中cluster模块的多进程共享数据问题

    Nodejs中cluster模块的多进程共享数据问题 前述 nodejs在v0.6.x之后增加了一个模块cluster用于实现多进程,利用child_process模块来创建和管理进程,增加程序在多核 ...

  4. javascrit2.0完全参考手册(第二版) 第1章第1节 在XHTML文档中增加javascript

    通常,向文档中增加script脚本使用<script>元素,在HTML中增加脚本的方式有4中: (1)放到<script></script>块中: (2)<s ...

  5. 【Go语言】面向对象扩展——接口

    简单地说 Interface是一组Method的组合,可以通过Interface来定义对象的一组行为.如果某个对象实现了某个接口的所有方法,就表示它实现了该借口,无需显式地在该类型上添加接口说明. I ...

  6. First day in 阿里

    周五上午10点半的飞机,为了便宜选了CA的空客320的飞机,结果体验很差.飞机涂了层风骚的粉紫色,机内较旧,也很小,经过所谓的头等舱简直惨不忍睹.对比起去年飞去北京乘的波音真是没法比,波音上每个人都有 ...

  7. 使用C#向ACCESS中插入数据(仅供参考)

    1.创建并打开一个OleDbConnection对象 string strConn = " Provider = Microsoft.Jet.OLEDB.4.0 ; Data Source ...

  8. [LintCode] Submatrix Sum 子矩阵之和

    Given an integer matrix, find a submatrix where the sum of numbers is zero. Your code should return ...

  9. 学习使用vim,熟悉Linux

    随着对vim一步一步的熟悉,对Linux的资料查阅,在加上今天阅读了王垠的文章,更加的觉得学习vim是正确的选择.抛弃Windows思维,进入Linux的世界,才发现是思维上的转变,如学习英语一样,是 ...

  10. css3很酷的加载动画多款

    在线实例:http://www.admin10000.com/document/3601.html 源码:https://github.com/tobiasahlin/SpinKit