用Cookie来实现计时器(发送手机验证码、邮箱)
2015-09-09 14:53
465 查看
当我们在一个网站上注册时,要根据手机号码来获取验证码,而验证码中包括一个时间计数器。我们用普通的Js时间时间计数时就会出现当我们刷新页面的时候验证码计数器部消失了。所以这里我们想到了用Js来操作Cookie信息来实现保存时间计数器。具体实现如下代码:
Html中嵌入一个时间计数器
<div class="widget-content" id="demo1">
Js代码
<script type="text/javascript">
function times(){
var time = getCookie("time");
if(time == null){
time = 60;
}
time--;
setCookie("time", time);
//设置页面样式
$("#demo1").html(time+"秒后重新获取");
//过1秒递归调用times()函数
var funcs = setTimeout("times()", 1000);
if ( time <= 0 ){
//删除Cookie中的值
delCookie("time");
//删除递归调用函数
clearTimeout(funcs);
$("#demo1").html("重新发送");
}
}
//设计Cookie的值
function setCookie(name,value){
var Days = 30;
var exp = new Date();
exp.setTime(exp.getTime() + Days*24*60*60*1000);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
//获取Cookie的值
function getCookie(name){
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg))
return unescape(arr[2]);
else
return null;
}
//删除Cookie中的值
function delCookie(name){
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval=getCookie(name);
if(cval!=null)
document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}
Html中嵌入一个时间计数器
<div class="widget-content" id="demo1">
<span style="white-space:pre"> </span><input type="button" value="获取验证码" onclick="times()"> </div>
Js代码
<script type="text/javascript">
function times(){
var time = getCookie("time");
if(time == null){
time = 60;
}
time--;
setCookie("time", time);
//设置页面样式
$("#demo1").html(time+"秒后重新获取");
//过1秒递归调用times()函数
var funcs = setTimeout("times()", 1000);
if ( time <= 0 ){
//删除Cookie中的值
delCookie("time");
//删除递归调用函数
clearTimeout(funcs);
$("#demo1").html("重新发送");
}
}
//设计Cookie的值
function setCookie(name,value){
var Days = 30;
var exp = new Date();
exp.setTime(exp.getTime() + Days*24*60*60*1000);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
//获取Cookie的值
function getCookie(name){
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg))
return unescape(arr[2]);
else
return null;
}
//删除Cookie中的值
function delCookie(name){
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval=getCookie(name);
if(cval!=null)
document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}
相关文章推荐
- cookie的secure属性详解
- 浏览器 cookie 限制
- 浅谈COOKIE和SESSION区别
- 深入解析Session是否必须依赖Cookie
- 新手菜鸟必读:session与cookie的区别
- php实现通过cookie换肤的方法
- C#中Cookie之存储对象
- ASP.NET Cookie 操作实现
- php中cookie的作用域
- 写入cookie的JavaScript代码库 cookieLibrary.js
- ie7下利用ajax跨域盗取cookie的解决办法
- js 通过cookie实现刷新不变化树形菜单
- 详谈javascript中的cookie
- 不要在cookie中使用特殊字符的原因分析
- cookie在javascript中的使用技巧以及隐私在服务器端的设置
- 二级域名Cookie问题的解决方法
- 关于二级域名下使用一级域名下的COOKIE的问题
- 浅析Cookie中的Path与domain
- cookie中的path与domain属性详解