最近在做一个项目，用到了点击按钮实现倒计时，这个用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. CSS - 定位属性position使用详解（static、relative、fixed、absolute）

    position 属性介绍 (1)position 属性自 CSS2 起就有了,该属性规定元素的定位类型.所有主流浏览器都支持 position 属性. (2)position 的可选值有四个:sta ...

  2. ES6-11学习笔记--Generator

    基本使用 function后面加个*号 function* foo() { for (let i = 0; i < 3; i++) { yield i; // yield不能作为构造函数去使用, ...

  3. ES6-11学习笔记--类与继承

    ES5 中的类与继承: 类的定义: function People(name, age) { // this指向当前实例化对象 console.log(this); // 实例属性 this.name ...

  4. java中如何按一定的格式输出时间， 必须给出例子

    题目2: 按一定的格式输出时间 import java.util.*;import java.text.SimpleDateFormat;public class Test {    public s ...

  5. Qt 实现配置 OpenCV 环境，并实现打开图片与调用摄像头

    一.说明 所用QT版本:5.9.1 电脑配置:win10,64位系统 调用的是编译好的:OpenCV-MinGW-Build-4.1.0(稍后放链接) 在大学期间,由于项目需求需要用到QT+openc ...

  6. redis的基础命令操作

    文章目录 前言 一.字符串类型 二.哈希类型 三.列表类型 四.集合类型 五.有序集合类型 六.通过命令 前言 redis的数据结构 redis存储的是key,value格式的数据,其中的key是字符 ...

  7. 如何使用Android可视化埋点

    Android可视化埋点是Android全埋点的增强.开发者可以将App界面同步至DTM界面,并在DTM界面通过可视化点击的方式添加埋点事件.目前Android可视化埋点包含两种埋点方式:普通可视化埋 ...

  8. 2021.11.10 P5231 [JSOI2012]玄武密码（AC自动机）

    2021.11.10 P5231 [JSOI2012]玄武密码(AC自动机) https://www.luogu.com.cn/problem/P5231 题意: 给出字符串S和若干T,求S与每个T的 ...

  9. 不太一样的Go Web框架—编程范式

    项目地址:https://github.com/Codexiaoyi/linweb 这是一个系列文章: 不太一样的Go Web框架-总览 不太一样的Go Web框架-编程范式 前言 上文说过,linw ...

  10. Ubuntu 20.0.4 安装 NVIDIA N卡 驱动 画面撕裂 解决方法

    电脑 联想 Y7000 系统 Ubuntu 20.0.4 显卡 NVIDIA 1050TI 以下操作需要管理员权限 编辑文件,如果没有新建一个 /lib/modprobe.d/nvidia-graph ...