JS倒计时（刷新页面不影响）的实现思路

最新推荐文章于 2022-01-06 17:56:28 发布

yuxiaoyu.

最新推荐文章于 2022-01-06 17:56:28 发布

阅读量1.7k

点赞数

文章标签： javascript 前端 php ViewUI

原文链接：http://www.cnblogs.com/yaoweijun/p/9088547.html

版权

最近在做一个项目，用到了点击按钮实现倒计时，这个用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;
}

最低0.47元/天解锁文章

yuxiaoyu.

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
JS倒计时（刷新页面不影响）的实现思路

最近在做一个项目，用到了点击按钮实现倒计时，这个用js来实现很简单。但是遇到了一个问题页面刷新后js重新加载导致倒计时重新开始，或者直接初始化了后来通过 cookie 保存来实现了js倒计时，关闭页面和强制刷新都不会停止主要思路通过获取当前时间与倒计时停止时间之间的时间间隔来确定倒计时的数值。具体如下：1.首次加载页面点击开始 1) 获取当前时...
复制链接

扫一扫