<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head> <body>
<input type="button" id="btn" value="免费获取验证码" onclick="settime(this)" /> <script type="text/javascript">
var countdown = 60;
function settime(obj) {
if (countdown == 0) {
obj.removeAttribute("disabled");
obj.value="免费获取验证码";
countdown = 60;
return;
} else {
obj.setAttribute("disabled", true);
obj.value="重新发送(" + countdown + ")";
countdown--;
}
setTimeout(function() {
settime(obj) }
,1000)
} </script>
</body>
</html>

这个只是一种比较简单的实现方式(页面刷新就会失效,不过还有一种无视页面刷新的)

<input id="second" type="button"  value="免费获取验证码"  />
//发送验证码时添加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;
}
} }
主要逻辑代码
$(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;
}
}

参考链接:https://www.oschina.net/code/snippet_2001568_48311

发送验证码60s倒计时实现的更多相关文章

  1. 6.短信验证码60s倒计时

    短信验证码60s倒计时 html: <input type="button"  class="btn btn-primary" value="免 ...

  2. 【积累】发送验证码按钮倒计时js

    注册的时候要发送验证码,就上网研究了一下,写了一个简单点的... jsp页面: <input type="button" id="testbtn" val ...

  3. js发送验证码(倒计时)

    需求:在用户点击获取验证码后60s内不能再次获取 代码 //倒计时60秒 var countdown=60; //显示获取验证码倒计时的文本标签 var _generate_code =$(" ...

  4. 验证码60s倒计时前端效果

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

  5. Android发送验证码的倒计时button

    1 直接上图 2 原理 原理非常easy,就是把对应的倒计时逻辑等封装到一个控件中,并向外部提供接口. 3 代码 import java.util.Timer; import java.util.Ti ...

  6. jQuery实现发送验证码30s倒计时,且刷新页面时有效

    在这里讲一讲这个案例的实现思路吧(个人见解)..核心思想:为防止页面刷新时倒计时失效的解决方案是:当每次刷新一次页面时都执行一个函数 即下面讲到的 setStyle() 函数.这个函数会根据当前的 c ...

  7. jQuery实现的手机发送验证码倒计时效果代码分享

    这是一款基于jquery实现的手机发送验证码倒计时效果代码,可实现实时显示秒数倒计时的功能,还可实现对手机号码格式验证的功能,是一款常用的网站注册发送手机验证码特效代码. 效果描述:注册一个网站,当需 ...

  8. 发送验证码倒计时60s

    var wait=60; function time(o) { if (wait == 0) { o.removeClass("gray"); o.text("发送验证码 ...

  9. React实战之60s倒计时按钮(发送短信验证按钮)

    React实战之60s倒计时按钮——短信验证按钮 导入:(antd组件——Form表单) import { Button, Form, Input } from 'antd'; const FormI ...

随机推荐

  1. 刷题总结——大工程(bzoj3611)

    题目: Description 国家有一个大工程,要给一个非常大的交通网络里建一些新的通道.  我们这个国家位置非常特殊,可以看成是一个单位边权的树,城市位于顶点上.  在 2 个国家 a,b 之间建 ...

  2. 严格次小生成树[BJWC2010] (树链剖分,倍增,最小生成树)

    题目链接 Solution 有几点关键,首先,可以证明次小生成树一定是由最小生成树改变一条边而转化来. 所以需要枚举所有非最小生成树的边\((u,v)\).并且找到 \(u\) 到 \(v\) 的边中 ...

  3. [CF888G] Xor-mst (Trie 树,最小生成树)

    题目链接 Solution \(Trie\) 树 + 启发式合并. 考虑到是异或,于是按位贪心.让高位的尽量相同. 然后要计算每棵子树的代价,似乎并没有很好的方法?? 于是只能启发式合并. 对于每一个 ...

  4. P2622 关灯问题II (状态压缩,最短路)

    题目链接 Solution 这道题算是很经典的状压问题了,好题. 考虑到 \(n\) 的范围仅为 \(10\) , 那么也就是说所有状态压起来也只有 \(1024\) 种情况. 然后我们发现 \(m\ ...

  5. java面试题之synchronized和lock有什么区别

    synchronized和lock的区别: 类别 synchronized lock 存在层次 java的关键字,在jvm层面上 是一个类 锁的释放 1.以获取锁的线程执行完同步代码,释放锁 2.线程 ...

  6. 优先队列priority_queue的使用

    优先队列是队列的一种,不过它可以按照自定义的一种方式(数据的优先级)来对队列中的数据进行动态的排序. 每次的push和pop操作,队列都会动态的调整,以达到我们预期的方式来存储.例如:我们常用的操作就 ...

  7. AC日记——Milking Grid poj 2185

    Milking Grid Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 8314   Accepted: 3586 Desc ...

  8. (39)C#Ping类

    一.Ping类 引用命名空间 using System.Net.NetworkInformation 控制台版 using System; using System.Collections.Gener ...

  9. Codeforces635C XOR Equation【数学】

    题目链接: http://codeforces.com/contest/635/problem/C 题意: 给定两个数的和s及异或x,求两个数的可能情况. 分析: 我们有公式a+b=a& b∗ ...

  10. Codeforces 868F Yet Another Minimization Problem(分治+莫队优化DP)

    题目链接  Yet Another Minimization Problem 题意  给定一个序列,现在要把这个序列分成k个连续的连续子序列.求每个连续子序列价值和的最小值. 设$f[i][j]$为前 ...