js实现手机验证码发送
来源:互联网 发布:ecmall多用户商城源码 编辑:程序博客网 时间:2024/05/16 03:56
1.通过ajax手机验证码发送实例
2.为了方便用了jquery需要测试时请先导入jquery包
html部分代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="jquery.js" type="text/javascript"></script></head><body>手机号码:<input type="text" name="phone" id="phone"><input id="btnSendCode" type="button" value="发送验证码" onclick="sendMessage()" /><p id='timeshort'></p></body><script type="text/javascript">/*-------------------------------------------*/var after ='';var InterValObj; //timer变量,控制时间var count = 60; //间隔函数,1秒执行var curCount = 60;//当前剩余秒数var exp =new Date();var time;time = exp.getTime();//获取cookie值function getCookie(name){var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");if(arr=document.cookie.match(reg))return unescape(arr[2]);elsereturn null;}//这是有设定过期时间的使用示例: //s20是代表20秒 //h是指小时,如12小时则是:h12 //d是天数,30天则:d30 //设置cookiefunction setCookie(name,value,time){ var strsec = getsec(time); var exp = new Date(); exp.setTime(exp.getTime() + strsec*1); document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); } function getsec(str){ // alert(str); var str1=str.substring(1,str.length)*1; var str2=str.substring(0,1); if (str2=="s") { return str1*1000; } else if (str2=="h") { return str1*60*60*1000; } else if (str2=="d") { return str1*24*60*60*1000; } } function sendMessage() {if(getCookie('after')>time && document.cookie.indexOf('after=') != -1){$('#timeshort').html('请不要在60秒内重复获取验证码');}else{$('#timeshort').html('');}trySend();//调用一次 }function trySend() { if(getCookie('after')<time || document.cookie.indexOf('after=') == -1 || getCookie('after')==null){ //测试时先注释掉ajax请求代码,否则会不成 $.ajax({ url: "你要请求的路径", type: "get", dataType: "json", data: {'需要传的参数'}, success: function (data) { if (data.code == 0) { alert('发送成功'); } else { alert(data.msg); } }, error: function () { } });setCookie("after",time+60*1000,"s60");setCookie("phone",$('#phone').val(),"s60");curCount = count;//设置button效果,开始计时$("#btnSendCode").attr("disabled", "true");$("#btnSendCode").val(curCount + "秒后重新获取");InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器,1秒执行一次}}//timer处理函数function SetRemainTime() {if (curCount == 0) { window.clearInterval(InterValObj);//停止计时器$("#btnSendCode").removeAttr("disabled");//启用按钮$("#btnSendCode").val("重新发送验证码");// code = ""; //清除验证码。如果不清除,过时间后,输入收到的验证码依然有效 } else {curCount--;$("#btnSendCode").val(curCount + "秒后重新获取");}}</script></body></html>
阅读全文
1 0
- js实现手机验证码发送
- js jq手机验证码发送
- 用户登录,实现发送手机验证码。
- java实现手机发送验证码
- java实现发送手机验证码
- Java实现发送手机验证码
- 发送手机验证码的js代码、手机号合法验证
- js实现发送验证码倒计时
- JS实现发送验证码进行倒计时
- 发送手机验证码倒计时
- 给手机发送验证码
- java发送手机验证码
- js实现按钮重新发送验证码倒计时效果
- 利用原生Js方法实现发送验证码倒计时
- js实现发送短信验证码后60秒倒计时
- java调接口实现发送手机短信验证码功能,手机验证码,接口调用
- java调接口实现发送手机短信验证码功能,手机验证码,接口调用
- java调接口实现发送手机短信验证码功能,手机验证码,接口调用
- 关于spring mvc 时间转换
- 下载并读取PDF文本内容
- Python-sklearn机器学习的第一个样例(2)
- BZOJ-3229 合并石子变态版
- TFLearn MNIST
- js实现手机验证码发送
- SylixOS线程私有数据浅析
- jQuery的document ready与 onload事件——你真的思考过吗?
- android 使用贝塞尔曲线实现“波浪”效果思路解析
- 微信小程序 image组件的mode属性 以及 图片出现横向滚动轴
- Kotlin VS Java:基本语法差异
- 去除关键字封装函数
- C++笔记(一)
- eclipse 环境配置源码查看