最近在做一个项目，用到了点击按钮实现倒计时，这个用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. 前端系列——快速理解babel6配置过程

    繁琐的配置? 你能快速读懂babel的官方文档吗? 你能根据官方文档快速配置好babelrc吗? 你能明白自己需要哪些插件吗? 没有搞明白这3个问题,请往下看. 快速理解babel 6 来看一张让人颤 ...

  2. Pascal的旅行

    [问题描述] 一块的nxn游戏板上填充着整数,每个方格上为一个非负整数.目标是沿着从左上角到右下角的任何合法路径行进,方格中的整数决定离开该位置的距离有多大,所有步骤必须向右或向下.请注意,0是一个死 ...

  3. JavaScript脚本延迟加载的方式有哪些？

    延迟加载就是等页面加载完成之后再加载 JavaScript 文件. js 延迟加载有助于提高页面加载速度. 一般有以下几种方式: defer 属性: 给 js 脚本添加 defer 属性,这个属性会让 ...

  4. springboot+mybatis实现数据分页(三种方式)

    项目准备 1.创建用户表 2.使用spring初始化向导快速创建项目,勾选mybatis,web,jdbc,driver 添加lombok插件 <?xml version="1.0&q ...

  5. MongoDB 提供的工具

    MongoDB 提供的工具 官网 https://www.mongodb.com/ 工具 MongoDB 提供了一些工具,: MongoDB Compass: MongoDB数据库可视化工具(类似PL ...

  6. 制作Unity中的单位血条

    本文章用于记录Unity的学习过程,如有疑问,欢迎交流. 1.血条的显示 在Unity场景中创建空物体,然后新建两个Image(图片),当然只用一个也行,一个作为填充来显示血量,一个作为血条的外框. ...

  7. 『忘了再学』Shell基础 — 9、Bash中的特殊符号（一）

    目录 1.双单引号 2.双引号 3.$符号 4.反引号 5.$()符号 6.#符号 7.\符号 1.双单引号 '':单引号.在单引号中所有的特殊符号,如$和"`"(反引号)都没有特 ...

  8. 前端性能优化之js,css调用优化

    规则1:减少HTTP请求     把多个JS请求合并为一个JS请求,把多个CSS请求合并为一个CSS请求.从而减少从客户端向服务器端的请求数.     规则3:添加Expires头     用http ...

  9. 使用 HTML5 input 类型提升移动端输入体验(转翻译)

    在过去的几年里,在移动设备上浏览网页已变得难以置信的受欢迎. 但是这些设备上的浏览体验,有时遗留很多的有待改进.当涉及到填写表单时,这一点尤为明显.幸运的是,HTML5规范引入了许多新input类型, ...

  10. vue 实现高德坐标转GPS坐标

    vue 实现高德坐标转GPS坐标 首先介绍一下常见的几种地图的坐标类型: WGS-84:这是一个国际标准,也就是GPS坐标(Google Earth.或者GPS模块采集的都是这个类型). GCJ-02 ...