jQuery实现发送验证码30s倒计时，且刷新页面时有效
在这里讲一讲这个案例的实现思路吧（个人见解）。。核心思想：为防止页面刷新时倒计时失效的解决方案是：当每次刷新一次页面时都执行一个函数 即下面讲到的 setStyle() 函数。这个函数会根据当前的 cookie 值判断 是否处于倒计时阶段 ，因为 cookie 值不会随着 网页的刷新而改变。
最后面已附上全部代码可直接复制下来借鉴一下。
1、本案例用到了 jQuery，第一步：页面引入 jQuery。
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
2、第二步：HTML 部分，为演示方便 只需一个按钮即可。
<button id="btn">获取</button>
3、第三步：js 代码部分。该部分 是采用操作 cookie 来实现 刷新页面 倒计时不失效。
①点击按钮设置 cookie 、显示倒计时时间以及禁用按钮
$('#btn').click(function(){
$('#btn').text('倒计时30s'); // 倒计时
$('#btn').prop('disabled',true); //禁用按钮
$(document)[0].cookie = 'ckey='+30; // 设置 cokie
});
②获取当前 cookie 值
function getCookie(){
// 获取全部的 cookie
var cookie = $(document)[0].cookie;
// 获取 cookie 项 (数组)
var citem = cookie.split(';');
// 过滤数组 获得 键为 ckey 的项
var ckey = citem.filter(function(item){
return item.split('=')[0].trim()=='ckey';
});
// 获得 时间 cval
cval = ckey[0].split('=')[1];
return cval;
}
③防止页面刷新时倒计时失效。解决方案是 每刷新一次页面都要获取当前的 cookie 值 ，如果值不为零的话一直是禁用状态
function setStyle(){
var cval = getCookie();
if(cval>1){
$('#btn').text('倒计时'+cval+'s');
$('#btn').prop('disabled',true);
console.log('hahah')
}else{
$('#btn').text('获取验证码');
$('#btn').prop('disabled',false);
}
}
setStyle();
④定时器实现倒计时
setInterval(function(){
setCookie();
console.log(1);
},1000)
function setCookie(){
var cval = getCookie();
if(cval>1){
$(document)[0].cookie = 'ckey='+(cval-1);
$('#btn').text('倒计时'+(cval-1)+'s');
$('#btn').prop('disabled',true);
}else if(cval==1){
$('#btn').text('获取验证码');
$('#btn').prop('disabled',false);
$(document)[0].cookie = 'ckey='+0;
}
}
4、完整代码 直接复制 即可使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<input type="text">
<button id="btn">获取</button>
<script>
$('#btn').click(function(){
$('#btn').text('倒计时30s');
$('#btn').prop('disabled',true);
// 设置 cookie 值
$(document)[0].cookie = 'ckey='+30;
console.log('cookie 设置完毕'); });
function setStyle(){
var cval = getCookie();
if(cval>1){
$('#btn').text('倒计时'+cval+'s');
$('#btn').prop('disabled',true);
console.log('hahah')
}else{
$('#btn').text('获取验证码');
$('#btn').prop('disabled',false);
}
}
setStyle(); id = setInterval(function(){
setCookie();
console.log(1);
},1000) function setCookie(){
var cval = getCookie();
if(cval>1){
$(document)[0].cookie = 'ckey='+(cval-1);
$('#btn').text('倒计时'+(cval-1)+'s');
$('#btn').prop('disabled',true);
}else if(cval==1){
$('#btn').text('获取验证码');
$('#btn').prop('disabled',false);
$(document)[0].cookie = 'ckey='+0;
// clearInterval(id);
}
}
function getCookie(){
// 获取全部的 cookie
var cookie = $(document)[0].cookie;
// 获取 cookie 项 (数组)
var citem = cookie.split(';');
// 过滤数组 获得 键为 ckey 的项
var ckey = citem.filter(function(item){
return item.split('=')[0].trim()=='ckey';
});
// 获得 时间 cval
cval = ckey[0].split('=')[1];
return cval;
}
</script>
</body>
</html>
jQuery实现发送验证码30s倒计时，且刷新页面时有效的更多相关文章
- JS倒计时（刷新页面不影响）的实现思路
最近在做一个项目,用到了点击按钮实现倒计时,这个用js来实现很简单.但是遇到了一个问题 页面刷新后js重新加载导致 倒计时重新开始,或者直接初始化了 后来通过 cookie 保存来实现了js倒计时,关 ...
- 刷新页面时 select值保持不变
刷新页面时,要使下拉菜单(select).raido保持不变,用ajax是无法实现的.我想只能通过cookies才能实现.刷新前先把select或radio的值保存在cookies中,刷新后再填回去. ...
- jQuery实现发送验证码倒计时60秒
前端HMTL: <div class="form_box"> <div class="line mb40"> <div class ...
- jQuery手机发送验证码倒计时代码
<!DOCTYPE> <html> <head> <meta charset="UTF-8"> <script type=&q ...
- 发送验证码60s倒计时实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 【积累】发送验证码按钮倒计时js
注册的时候要发送验证码,就上网研究了一下,写了一个简单点的... jsp页面: <input type="button" id="testbtn" val ...
- 解决让刷新页面时不提示 "重试或取消”对话框
如果刷新一个已经提交过的页面时,系统总是会提示一个 "重试或取消”的对话框.,如果是一个普通的页面,好象也无所谓,有就有,大不了多点一下.但是当我们是在子窗体中刷新父窗体时,就显得有点多余了 ...
- 解决vuex保存的数据刷新页面时清空
参考文章: vuex中store保存的数据,刷新页面会清空 主要解决代码: 1.更改store文件下index文件state的定义 const store = new Vuex.Store({ sta ...
- js发送验证码（倒计时）
需求:在用户点击获取验证码后60s内不能再次获取 代码 //倒计时60秒 var countdown=60; //显示获取验证码倒计时的文本标签 var _generate_code =$(" ...
随机推荐
- webstorm mac 版破解
一.打开终端,输入: sudo vim /etc/hosts 回车后输入密码,编辑 hosts 文件,如图: 二.进入编辑模式(按 i 键),在最后一行添加如下代码: 0.0.0.0 account. ...
- mongodb数据库常用操作的整理
这是个人在项目中抽取的代码,自己写的utils的通用模块,使用的框架是tronado,包括了数据库的认证,以及增删改查排序,如有特别需要可以联系我或者自己扩展,刚学python不久,仅供参考,例子如下 ...
- ssm框架下的文件上传和文件下载
最近在做一个ssm的项目,遇到了添加附件和下载的功能,在网上查了很多资料,发现很多都不好用,经过摸索,发现了一套简便的方法,和大家分享一下. 1.在自己已经构建好的maven web项目中 pom. ...
- 遇见Python集合类型
Python目前有两种内置集合类型,set和frozenset. Ⅰ.两者区别 set是可变的,没有哈希值,其内容可以使用add()和remove()这样的方法来改变,所以不能被用作字典的键或其他集合 ...
- 2019.7 佳木斯培训A层
day1题目及题解 day2题目及题解 day3题目及题解 day4题目及题解 day5题目及题解
- 基于SpringBoot从零构建博客网站 - 集成editor.md开发发布文章功能
发布文章功能里面最重要的就是需要集成富文本编辑器,目前富文本编辑器有很多,例如ueditor,CKEditor.editor.md等.这里守望博客里面是集成的editor.md,因为editor.md ...
- GStreamer流媒体知识介绍
GStreamer框架 1.GStreamer是什么? 众所周知,Microsoft's Windows和Apple's MacOS对多媒体设备.多媒体创作.播放和实时处理等方面都有很好的支持,而Li ...
- Button 使用详解
极力推荐文章:欢迎收藏 Android 干货分享 阅读五分钟,每日十点,和您一起终身学习,这里是程序员Android 本篇文章主要介绍 Android 开发中的部分知识点,通过阅读本篇文章,您将收获以 ...
- Rootkit与后门隐藏技术
目录 简介 linux虚拟文件系统VFS rootkit的功能 隐藏文件 基本方法 高级方法 系统调用流程 hook sys_getdents sys_getdents的调用树 最底层的方法 隐藏进程 ...
- （一）c#Winform自定义控件-基类控件
前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章. 开源地址:https://gitee.com/kwwwvagaa/net_winform_custom_control ...