<!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. 自定义AlertView(Swift)

    MyAlertView.swift // Pop Up Styles enum MyAlertViewStyle: Int { case success case error case notice ...

  2. 【bzoj2563】阿狸和桃子的游戏 贪心

    题目描述 阿狸和桃子正在玩一个游戏,游戏是在一个带权图G=(V, E)上进行的,设节点权值为w(v),边权为c(e).游戏规则是这样的:1. 阿狸和桃子轮流将图中的顶点染色,阿狸会将顶点染成红色,桃子 ...

  3. P1260 工程规划 (差分约束)

    题目链接 Solution 差分约束. 差分约束似乎精髓就两句话: 当我们把不等式整理成 \(d[a]+w<=d[b]\) 时,我们求最长路. 整理成 \(d[a]+w>=d[b]\) 时 ...

  4. hdu 4932 BestCoder Round #4 1002

    这题真是丧心病狂,引来今天的hack狂潮~ Miaomiao's Geometry Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65 ...

  5. Perl语言入门--2--perl的运算符

    一.算数运算符 **:是幂 结果不能超过数的范围 当指数为小数时 底数不能为负数 %:取余数  两边的操作数为整数,如果不是则要截取,把所有的小数部分去掉 注意:当一个字符串参加运算,需要转化为整数时 ...

  6. C#实现键盘钩子

    前言: 因为项目中需要使用到快捷键,所以上网找资料了解关于快捷键的实现技术,于是有了键盘钩子的使用学习.在网上了解到,键盘钩子其实只是很多种钩子中的其中一种.所谓钩子:请看下面关于钩子的描述(来自百度 ...

  7. Yii CActiveForm 客户端验证(enableClientValidation)和自定义验证

    使用Yii的CActiveForm默认使用服务器端模型(model)的rules规则验证数据. 但这会导致无谓的请求提交,比较好的方式是为了用户体验在客户端也验证,而为了安全性,在服务器端和数据库也做 ...

  8. AC日记——【模板】线段树 1 洛谷 P3372

    题目描述 如题,已知一个数列,你需要进行下面两种操作: 1.将某区间每一个数加上x 2.求出某区间每一个数的和 输入输出格式 输入格式: 第一行包含两个整数N.M,分别表示该数列数字的个数和操作的总个 ...

  9. ASP.NET Core 依赖注入基本用法

    ASP.NET Core 依赖注入 ASP.NET Core从框架层对依赖注入提供支持.也就是说,如果你不了解依赖注入,将很难适应 ASP.NET Core的开发模式.本文将介绍依赖注入的基本概念,并 ...

  10. 洛谷——P1216 [USACO1.5]数字三角形 Number Triangles

    P1216 [USACO1.5]数字三角形 Number Triangles 题目描述 观察下面的数字金字塔. 写一个程序来查找从最高点到底部任意处结束的路径,使路径经过数字的和最大.每一步可以走到左 ...