当前位置:首页 > 日记 > 正文

js在发送验证码后实现倒计时功能。

js在发送验证码后实现倒计时功能。
以前只共享js实现倒计时功能,后来发现测试,刷新或关闭页面后倒计时不能使用。网上找不到合适的解决方案,所以我写到,这是优化版的,可以满足刷新或打开页面后倒计时仍能使用。

特别说明:
cookie的有效时间最初是在60秒内创建的。也就是说,如果你在20次的倒计时,after.20秒然后关闭页面打开,没有倒计时;但是如果你关闭网页倒数20,如果你再打开20秒的页面,有一个倒计时显示。

HTML代码

js到cookie的操作

添加cookie /发送验证代码时
功能addcookie(名称,价值,expireshours){
无功cookiestring =姓名+=+逃跑(价值);
确定是否设置了过期时间,0代表关闭浏览器失败
如果(expireshours > 0){
日期=新日期();
Date.setTime(date.gettime()+ expireshours×1000);
cookiestring = cookiestring +;到期=+ date.toutcstring();
}
饼干= cookiestring文件;
}
修改cookie的值
功能editcookie(名称,价值,expireshours){
无功cookiestring =姓名+=+逃跑(价值);
如果(expireshours > 0){
日期=新日期();
Date.setTime(日期,时间)(+ expireshours×1000); / /毫秒
cookiestring = cookiestring +;到期=+ date.togmtstring();
}
饼干= cookiestring文件;
}
根据名称获取cookie的值
功能getcookievalue(name){
无功strcookie = document.cookie;
无功arrcookie = strcookie.split(;);
对于(var i = 0;i < arrcookie.length;i++){
var arr = arrcookie {我}。分裂(=);
如果(ARR { 0 } = =名字){
返回unescape(ARR { 1 });
打破;
其他{ }
返回;
打破;
}
}

}
主要的逻辑代码
$(函数(){())
$(#二)。Click(function(){)
sendcode($(#二));
});
V = getcookievalue(secondsremained / /);得到cookie的值
如果(v > 0){
时间($(#二)); / /倒计时
}
})
发送验证代码
功能sendcode(obj){
var = $(# phoneNum phoneNum )瓦迩();
VaR结果= isphonenum();
如果(结果){
dopostback($ {基} / /获得按键的ASCII码登录.htm,backfunc1,{phoneNum :phoneNum });
addcookie(secondsremained,60,60); / /添加cookie记录,年代的有效时间
时间(obj); / /倒计时
}
}
使用ajax手机/短信界面提交后台。
功能dopostback(URL,backfunc,queryparam){
$ ajax({
异步:假,
缓存:false,
类型:'post,
URL:动作路径请求
数据:queryparam,
错误:(函数)请求失败处理函数
},
成功:backfunc
});
}
功能backfunc1(数据){
var a美元。parseJSON(数据);
如果(!d.success){
警报(d.msg);
}其他返回验证代码
警报(模拟验证码:+ d.msg);
$(#代码),瓦迩(d.msg);
}
}
启动倒计时
无功倒计时;
Function setTime (obj) {
倒计时= getcookievalue(secondsremained );
如果(倒计时= 0){
Obj.removeAttr(禁用);
obj.val(免费获取验证码);
返回;
{人}
Obj.attr(残疾人
obj.val(重新发送(+倒计时+ ));
倒计时—;
editcookie(secondsremained
}
setTimeout(function(时间){(obj)},1000) / /执行一次每1000毫秒
}
检查移动电话号码的合法性
功能isphonenum(){
var = $(# phoneNum phoneNum )瓦迩();
无功myreg = / ^(((0-9 13 { } { 1 })|(0-9 15 { } { 1 })|(0-9 18 { } { 1 }) / D { 8 }));
如果(!myreg.test(phoneNum)){
警报(请输入一个有效的手机号码!);
返回false;
其他{ }
返回true;
}
}
以上是本文的全部内容,希望大家能喜欢。

相关文章

公告滚动效果的jQuery实现

公告滚动效果的jQuery实现

滚动效果,公告,电脑软件,jQuery,滚动效果非常好,代码非常简单,而且这里没有更多的浪费。 复制代码代码如下所示: 样式文件: { * 保证金:0; 填充:0; } {。scrollnews 宽度:100%; 身高:20px; 溢出:隐藏; 背景:# ffffff; 边境:0px固体# aaaaaa; } s…

用ps设计感恩母亲节海报的教程

用ps设计感恩母亲节海报的教程

教程,母亲节,海报,电脑软件,ps,本教程主要使用PS图象处理软件设计一个感恩母亲节海报教程 本教程主要使用PS图象处理软件设计感恩母亲节字体海报教程。本教程的主要部分是字体设计,只有字体的效果做得很好,然后排版效果出来,和你最喜欢的朋友…

AI固定模式和创建模式填充

AI固定模式和创建模式填充

模式,填充,电脑软件,AI,本教程将向朋友介绍如何修复模式并创建模式填充方法。这个教程很好。值得学习。推荐朋友一起学习。 在创建一个模式填充时,请讨论AI固定模式填充和一些注意细节。 以上是ai如何修复模式和创建模式填充处理方法的介绍,…

如何在ps中画虚线

如何在ps中画虚线

虚线,如何在,电脑软件,ps,ps里面如何为新手画点虚线,肯定不是很熟悉吧,下面的小编介绍给大家,一起去看看吧。 首先介绍一下哈萨克斯坦:PS、Adobe PS图象处理软件的简称,是由Adobe公司开发并发行的图像处理软件,图片编辑工作可以进行effectively.p…

PS图象处理软件将从池塘边的一个美

PS图象处理软件将从池塘边的一个美

橙黄色,图象,一个美丽,处理软件,池塘边,图像带有绿色,它可以直接放入绿色橙色的颜色是初步的,然后到高光有点淡蓝色,深蓝色紫色,添加一点层次感可以增强。 图像带有绿色,它可以直接放入绿色橙色的颜色是初步的,然后到高光有点淡蓝色,深蓝色紫色,添…

PHPExcel内存泄漏问题的求解方法

PHPExcel内存泄漏问题的求解方法

方法,内存泄漏,电脑软件,PHPExcel,使用PHPExcel生成Excel文件,内存消耗。有时,一个循环可以将大量数据分割成多个小Excel文档,以避免内存耗尽。 然而,循环引用的存在(最新版本的1.6.5 PHPExcel似乎仍然要解决这个问题),如果对phpexcel_writer_exc…

PowerPoint还可以制作3D效果效果PP

PowerPoint还可以制作3D效果效果PP

教程,3D,还可以,效果,高级,想做一个简单的3D课件,但是害怕专业的3D软件吗不用担心,PowerPoint也能解决紧急需要,只要熟练运用三维设置功能,它也能完成逼真的3D效果课件。 制作三维立体图 首先,插入一个平面自选择的图形,如矩形、圆形等,然后单击…

Javascript中的四个用法

Javascript中的四个用法

电脑软件,Javascript,这 当函数被执行时,它总是指向调用函数的对象。 在Javascript语言精华的书中,这一场景分为四类,它们都是简单的: 对象指向调用对象。 没有对象被调用到全局对象。 使用新结构指向一个新对象 通过应用、调用或绑定改变这个…

PS图象处理软件合作创建一个幻想式

PS图象处理软件合作创建一个幻想式

图象,创建一个,处理软件,海报,幻想,对于顾客的两款新秋新产品,顾客们都想带着幻想走,想表现出与大自然的精神。我个人认为一切都是自然的精神,鹿更优雅和气质,这更符合女人,所以这是一个大胆的尝试。 对于顾客的两款新秋新产品,顾客们都想带着幻…

PS制作水波效果逼真。

PS制作水波效果逼真。

水波,逼真,效果,电脑软件,PS,本教程是向朋友介绍PS创建现实水波效果的方法。这个教程很好。我建议像你这样的朋友可以和教程一起学习。 可以说是一种制作非常基础的PS制作技术,他的应用非常广泛,有很多先进的效果,在波浪阴影下,他的制作也特别…

酷快乐个性签名快乐个性签名

酷快乐个性签名快乐个性签名

个性签名,快乐,电脑软件,QQ签名都有,更高兴的是在幸福的时刻有一个快乐的个性签名。 没有人能影响我的情绪。 我不温柔体贴,但我不能给你任何人。 活着,现实的生活 不能陪你到未来,请把他阻止在那个地方。 你太骄傲了,为什么不脱下衣服炫耀呢 爱…

CorelDRAW细画矢量图世界杯

CorelDRAW细画矢量图世界杯

矢量图,世界杯,电脑软件,CorelDRAW,本教程介绍朋友世界杯地图使用CorelDraw细画矢量,教程做出来的世界杯真的很漂亮,不是很难,建议喜欢的朋友可以跟着教程一起学习吧 本教程介绍朋友世界杯地图CorelDRAW细画矢量,很好的教程,推荐给爱,朋友可以跟…