在这里讲一讲这个案例的实现思路吧（个人见解）。。核心思想：为防止页面刷新时倒计时失效的解决方案是：当每次刷新一次页面时都执行一个函数 即下面讲到的 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倒计时，且刷新页面时有效的更多相关文章

  1. JS倒计时（刷新页面不影响）的实现思路

    最近在做一个项目,用到了点击按钮实现倒计时,这个用js来实现很简单.但是遇到了一个问题 页面刷新后js重新加载导致 倒计时重新开始,或者直接初始化了 后来通过 cookie 保存来实现了js倒计时,关 ...

  2. 刷新页面时 select值保持不变

    刷新页面时,要使下拉菜单(select).raido保持不变,用ajax是无法实现的.我想只能通过cookies才能实现.刷新前先把select或radio的值保存在cookies中,刷新后再填回去. ...

  3. jQuery实现发送验证码倒计时60秒

    前端HMTL: <div class="form_box"> <div class="line mb40"> <div class ...

  4. jQuery手机发送验证码倒计时代码

    <!DOCTYPE> <html> <head> <meta charset="UTF-8"> <script type=&q ...

  5. 发送验证码60s倒计时实现

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

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

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

  7. 解决让刷新页面时不提示 "重试或取消”对话框

    如果刷新一个已经提交过的页面时,系统总是会提示一个 "重试或取消”的对话框.,如果是一个普通的页面,好象也无所谓,有就有,大不了多点一下.但是当我们是在子窗体中刷新父窗体时,就显得有点多余了 ...

  8. 解决vuex保存的数据刷新页面时清空

    参考文章: vuex中store保存的数据,刷新页面会清空 主要解决代码: 1.更改store文件下index文件state的定义 const store = new Vuex.Store({ sta ...

  9. js发送验证码（倒计时）

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

随机推荐

  1. linux初学者-网络桥接篇

    linux初学者-网络桥接篇 在网络的使用中,有时需要搭建网络桥来实现网络桥接.例如在一台主机上制作一台虚拟机,虚拟机是没有物理网卡的,这时虚拟机数据的发送和接收就需要通过主机上的物理网卡,需要主机的 ...

  2. python正则-re的使用

    今天在刷题的时候用到了正则,用的过程中就感觉有点不太熟练了,很久没有用正则都有点忘了.所以现在呢,我们就一起来review一下python中正则模块re的用法吧. 今天是review,所以一些基础的概 ...

  3. HTML&CSS兼容性总结

    对目前所遇见的兼容性笔记进行整理分类: 不兼容浏览器 问题概要 问题描述 解决方法 IE6,IE7  3px 并列一行的元素左侧第一个元素没浮动,第二个元素左浮动,则两个元素之间会多3像素空隙 并在一 ...

  4. spark 源码分析之二十一 -- Task的执行流程

    引言 在上两篇文章 spark 源码分析之十九 -- DAG的生成和Stage的划分 和 spark 源码分析之二十 -- Stage的提交 中剖析了Spark的DAG的生成,Stage的划分以及St ...

  5. solr使用心得

    /**   * @author  zhipeng  * @date 创建时间:2015-10-10 下午12:15:35   * @parameter     * @return    */ publ ...

  6. Kibana对数据的可视化

    基于上一篇的操作,我们已经获得了数据,接下来我们就要处理数据,因此选用了Kibana 先来介绍一下, Kibana是一个针对Elasticsearch的开源分析及可视化平台,用来搜索.查看交互存储在E ...

  7. win系统上Anaconda国内镜像配置

    清华镜像2019.6.15已恢复 中科大镜像2019.7.1停机维护后恢复 1.打开anaconda prompt 2.添加清华镜像1:https://mirrors.tuna.tsinghua.ed ...

  8. kubernetes lowB安装方式

    kubernetes离线安装包,仅需三步 基础环境 关闭防火墙 selinux $ systemctl stop firewalld && systemctl disable fire ...

  9. 定制开发kubernetes流程

    kubernetes集群三步安装 概述 本文介绍如何对kubernetes进行二次开发,仓库如何管理,git分支如何管理,怎样利用CI去编译与发布以及如何给社区贡献代码等,结合实际例子,望对大家有所帮 ...

  10. 先定一个小目标：10天自学C语言编程，教你如何改变一生

    C语言是面向过程的,而C++是面向对象的 C和C++的区别: C是一个结构化语言,它的重点在于算法和数据结构.C程序的设计首要考虑的是如何通过一个过程,对输入(或环境条件)进行运算处理得到输出(或实现 ...