最近在做一个项目，用到了点击按钮实现倒计时，这个用js来实现很简单。但是遇到了一个问题

页面刷新后js重新加载导致 倒计时重新开始，或者直接初始化了

后来通过 cookie 保存来实现了js倒计时，关闭页面和强制刷新都不会停止

主要思路

通过获取当前时间 与 倒计时停止时间 之间的时间间隔来确定倒计时的数值。

具体如下：

1.首次加载页面 点击开始

1) 获取当前时间  与要倒计时的时间相加获得要 停止计时的时间

2) 用cookie保存这个停止计时的时候

3) 通过js的setInterval  进行定时刷新时间

4) 当倒计时结束后 清楚cookie中保存的结束时间

2.当第二次进入页面或刷新页面时

1)首先判断cookie中时候有结束时间

2)有取出 和 当前时间求差 如果 差值大于倒计时间隔时间 说明倒计时已结束需要重新点击 否则就将这个差值作为倒计时开始的数字

3）没有需要重新点击开始倒计时

闲话少说，上代码~~~~

<html>

<head>

<title>JS倒计时（无视刷新）</title>

<style>

.disabled {

    background: #fff;

    color: #ccc;

    border: solid 0px;

}

.disabled:hover {

     background:none;

      color: #ccc;

}

</style>

</head>

<body>

<input type="tel" placeholder="请输入手机号" name="Phone">

<a class="fasong" id="btnSend" style="cursor:pointer;">发送验证码</a>

</body>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>

<script language="javascript">

$(function () {

  //点击发送验证码

    $('body').on('click', '#btnSend', function () {

          $('body').off('click', '#btnSend');

          LockButton('#btnSend', 60);

      }) 

    //读取cookie

    if ($.cookie("djsendtime") != undefined && !isNaN($.cookie("djsendtime"))) {  //读取到了cookie值

        var djsendtime = $.cookie("djsendtime");

        var now = new Date().getTime();  //当前时间戳

        var locksecends = parseInt((djsendtime - now) / 1000);

        if (locksecends <= 0) {

            $.cookie("djsendtime", null);

        } else {

            LockButton('#btnSend', locksecends);

        }

    }

})

// 按钮倒计时

var LockButton = function (btnObjId, locksecends) {

    //1.获取当前系统时间

    //2.获取 locksecends 后的系统时间

    //3.用cookie保存到期时间

    //4.每次加载后获取cookie中保存的时间

    //5.用到期时间减去当前时间获取倒计时

    var djsendtime = $.cookie("djsendtime");

    if (djsendtime == null || djsendtime == undefined || djsendtime == 'undefined' || djsendtime == 'null') {

        var now = new Date().getTime();  //当前时间戳

        var endtime = locksecends * 1000 + now;  //结束时间戳

        $.cookie("djsendtime", endtime);  //将结束时间保存到cookie

    }

    $(btnObjId).addClass('disabled').attr('disabled', 'disabled').text('(' + locksecends + ')秒后重新获取');

    $('body').off('click', '#btnSendSMS');

    var timer = setInterval(function () {

        locksecends--;

        $(btnObjId).text('(' + locksecends + ')秒后重新获取');

        if (locksecends <= 0) {

		//倒计时结束清除cookie值

            $.cookie("djsendtime", null);

            $(btnObjId).removeClass('disabled').removeAttr('disabled').text('重新获取');

            $('body').on('click', btnObjId);

            clearInterval(timer);

        }

    }, 1000);

};

</script>

</html>

运行：　　

无论怎么刷新，倒计时都会继续不会重新开始

JS倒计时（刷新页面不影响）的实现思路的更多相关文章

  1. JS定时刷新页面及跳转页面

    JS定时刷新页面及跳转页面 Javascript 返回上一页1. Javascript 返回上一页 history.go(-1), 返回两个页面: history.go(-2); 2. history ...

  2. 页面的div中有滚动条，js实现刷新页面后回到记录时滚动条的位置

    当div中绑定数据,给它一个属性overflow-y: scroll,添加长度大小,使其能够出现滚动条:每次刷新的时候滚动条总是会出现在最上方,这使我很头疼,经过查阅网上资料,返现两种方法可行.如下: ...

  3. js自动刷新页面代码

    <script language="JavaScript">function myrefresh(){window.location.reload();}setTime ...

  4. javascript(js)自动刷新页面的实现方法总结

    自动刷新页面的实现方法总结: 1) <meta http-equiv="refresh"content="10;url=跳转的页面"> 10表示间隔 ...

  5. JS自动刷新页面一次

    <script type="text/javascript"> //刷新页面 if(location.href.indexOf("refresh=1" ...

  6. js 如何刷新页面

    Javascript刷新页面的几种方法(未测试):1 history.go(0)2 location.reload()3 location=location4 location.assign(loca ...

  7. js倒计时，页面刷新时，不会从头计时

    最近不忙,瞎鼓捣...哈哈 这里利用了H5的本地存储 localStorage,取秒数直接用了php的time()方法,就懒得用js取了. 把第一次访问页面时的时间存在客户端,然后再刷新的时候,比较用 ...

  8. js倒计时防页面刷新

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 160301、js倒计时，页面上显示时间

    js: //倒计时 var countdown=60,t; function settime(){ if (countdown == 0) { $("#validateBtn"). ...

随机推荐

  1. 小程序开发之一（使用fly进行http封装）

    原文地址:http://callmesoul.cn 下载fly js文件 fly小程序文档 /api/config.js 配置,主要配置全局的host url和request拦截和request拦截 ...

  2. java中当static块和构造函数同时出现，顺序是？

    静态块先于构造函数执行 class Student {    int age;    String name;    static int count;    public Student() {   ...

  3. Java中switch语句+例题输出当前月份

    学习目标: 掌握switch的使用 学习内容: 1.switch语法 <font color=#000000 size=3> switch(表达式) { case 常量1: 语句体1; b ...

  4. 带UI的小初高数学学习软件—艰难地用C++（QT库）实现的过程

    从互相了解对方的代码思路然后确定用C++编写,到用win32写界面时变得摇摆不定的考虑着要不要改变语言,再到用QT写完界面后发现短信接口一般都不提供C++,最后到QT打包出来的可执行文件在别的设备上无 ...

  5. [ Vim ] 自动重载文件

    https://www.cnblogs.com/yeungchie/ 手动重载 :e 或者 :! 自动重载 set autoread 一般情况下,vim 切换缓冲区或者重新聚焦的时候会触发重载. 如果 ...

  6. LC-24

    [24. 两两交换链表中的节点](https://leetcode-cn.com/problems/swap-nodes-in-pairs/) 给你一个链表,两两交换其中相邻的节点,并返回交换后链表的 ...

  7. python循环与基本数据类型内置方法

    今天又是充满希望的一天呢 一.python循环 1.wuile与else连用 当while没有被关键'break'主动结束的情况下 正常结束循环体代码之后会执行else的子代码 "" ...

  8. 从电路到UI系列之一——常见显示控制接口的认识

    引入 我之前有两方面的使用屏幕的案例.在做的模块上需要用到屏幕来显示的时候,全是SPI屏幕,并口屏幕和IIC屏幕.在研究了驱动(或者是绘图函数更加合适)之后,我发现其实他们就是直接写显存,这个显存在面 ...

  9. node服务器搭建流程

    1,创建一个空文件夹,用来存放项目. 2,在空文件夹中,在cmd命令提示符中输入npm init  初始化一个服务器项目. 设置的属性信息:    name : 项目名称(小括号中是默认的,文件夹名相 ...

  10. Divide by Zero 2021 and Codeforces Round #714 (Div. 2) B. AND Sequences思维，位运算 难度1400

    题目链接: Problem - B - Codeforces 题目 Example input 4 3 1 1 1 5 1 2 3 4 5 5 0 2 0 3 0 4 1 3 5 1 output 6 ...