最近在做一个项目，用到了点击按钮实现倒计时，这个用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 — 贝塞尔曲线(cubic-bezier)

    欢迎移步我的博客阅读:<实用的 CSS - 贝塞尔曲线(cubic-bezier)> 前言 在了解 cubic-bezier 之前,你需要对 CSS3 中的动画效果有所认识,它是 anim ...

  2. 《深入理解ES6》笔记—— JavaScript中的类class（9）

    ES5中的近类结构 ES5以及之前的版本,没有类的概念,但是聪明的JavaScript开发者,为了实现面向对象,创建了特殊的近类结构. ES5中创建类的方法:新建一个构造函数,定义一个方法并且赋值给构 ...

  3. 前端每日实战：116# 视频演示如何用 CSS 和原生 JS 开发一个监控网络连接状态的页面

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/oPjWvw 可交互视频 此视频是可 ...

  4. mysql获取表的列名

    DESC test4 SHOW COLUMNS FROM test4 SELECT COLUMN_NAME  FROM information_schema.columns WHERE table_n ...

  5. java中请给一个Abstract类实现接口的实例！

    2.Abstract类实现接口 马克-to-win:如果实现某接口的类是abstract类,则它可以不实现该接口所有的方法.但其非abstract的子类中必须拥有所有抽象方法的实在的方法体:(当然它a ...

  6. 大数据学习之路之sqoop导入

    按照网上的代码导入 hadoop(十九)-Sqoop数据清洗 - 简书 (jianshu.com) ./sqoop import --connect "jdbc:mysql://192.16 ...

  7. 一个抽取百度定位的教程（下载百度地图Demo+配置+抽取）

    效果展示 已经下载Demo的可以直接到第五步,已经配置好的并可以运行的可以直接到第七步. 1.在浏览器搜索 " 百度定位API ",点击下面这个链接 2.翻到最下面找到并点击 &q ...

  8. potoshop cs6安装配置16错误解决办法（win10系统）

    问题截图如下: 解决方法: 右击图标选择属性:选择兼容性-->兼容模式-->以管理员身份运行-->应用 然后就可以打开了!

  9. 用反射实现JavaBean和Map之间的转换

    学习内容: 需求 由于JavaBean结构与Map类似,我们可以把JavaBean与Map进行转换 代码如下: package com.yy; import java.beans.BeanInfo; ...

  10. kafka快速入门到精通

    目录 1. 消息队列两种模式 1.1 消息队列作用 1.2 点对点模式(一对一,消费者主动拉取数据,消息收到后消息删除) 1.3 发布/订阅模式(一对多,消费数据之后不会删除消息) 1.4 kafka ...