最近在做一个项目，用到了点击按钮实现倒计时，这个用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. vue2源码框架和流程分析

    vue整体框架和主要流程分析 之前对看过比较多关于vue源码的文章,但是对于整体框架和流程还是有些模糊,最后用chrome debug对vue的源码进行查看整理出这篇文章.... 本文对vue的整体框 ...

  2. JavaScript读取剪贴板中的表格生成图片

    原文 JavaScript读取剪贴板中的表格生成图片 演示地址 你可以访问下面的地址体验每个demo https://fairyever.github.io/excel-to-image-demo/ ...

  3. 洛谷 P5706 【深基2.例8】再分肥宅水

    题目连接: P5706 [深基2.例8]再分肥宅水 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 我提交的: 1 #include<iostream> 2 #inclu ...

  4. 在Android中区分点击和滑动操作

    转自:http://blog.csdn.net/do168/article/details/51587933 最近在写一个图片浏览安卓应用,想要弄成全屏显示,只在单击时显示工具栏和状态栏,在触摸滑动时 ...

  5. this和super的区别和应用

    A:this和super都代表什么 * this:代表当前对象的引用,谁来调用我,我就代表谁 * super:代表当前对象父类的引用B:this和super的使用区别 * a:调用成员变量  * th ...

  6. vue中判断页面滚动开始和结束

    参考链接:https://www.jianshu.com/p/adad39705ced    和  https://blog.csdn.net/weixin_44309374/article/deta ...

  7. BootstrapBlazor实战 Chart 图表使用(1)

    BootstrapBlazor组件 Chart 图表介绍 通过给定数据,绘画各种图表的组件 本文主要介绍三种图表使用:折线图,柱状图,饼图 1.新建工程 新建工程b06chart,使用 nuget.o ...

  8. 制作Unity中的单位血条

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

  9. 1.Java基础

    1.注释 单行注释 // 多行注释 /*回车 文档注释(注解)./**回车 2.标识符 (1)Java所有组成部分都需要名字,类名,变量名以及方法名都称为标识符 (2)且标识符只能以字母.$或者_ 开 ...

  10. window 的简单使用

    window 的延迟加载 js代码 window的原始用法 (缺点 : 只能使用一次) window.onload = function() { var btn = document.querySel ...