尽管页面刷新，如何保持计数器倒计时？
Posted
技术标签:
【中文标题】尽管页面刷新，如何保持计数器倒计时？【英文标题】：How to keep a counter counting down despite page refreshes? 【发布时间】：2020-10-28 17:12:03 【问题描述】：我在一个网站上有一个倒计时的计数器。但是在每次页面加载时，它都会重新开始。如何让它继续倒计时而不在本地和每个人访问公共网站的设备上重新启动页面加载？目前，只要有人刷新页面，计数器就会重新启动。我需要它不要在刷新时重新启动，并在每个人的设备上显示相同的剩余时间。
<html lang="en">
<head>
<title>Coming Soon 13</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--===============================================================================================-->
<link rel="icon" type="image/png" href="images/icons/favicon.ico"/>
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="fonts/iconic/css/material-design-iconic-font.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/animate/animate.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="css/util.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<!--===============================================================================================-->
</head>
<body>
<!-- -->
<div class="simpleslide100">
<div class="simpleslide100-item bg-img1" style="background-image: url('images/bg01.jpg');"></div>
<div class="simpleslide100-item bg-img1" style="background-image: url('images/bg02.jpg');"></div>
<div class="simpleslide100-item bg-img1" style="background-image: url('images/bg03.jpg');"></div>
<div class="simpleslide100-item bg-img1" style="background-image: url('images/bg04.jpg');"></div>
</div>
<div class="flex-col-c-sb size1 overlay1 p-l-75 p-r-75 p-t-20 p-b-40 p-lr-15-sm">
<!-- -->
<div class="w-full flex-w flex-sb-m">
<div class="wrappic1 m-r-30 m-t-10 m-b-10">
<a href="#"><img src="images/icons/logo.png" ></a>
</div>
<div class="flex-w cd100 p-t-15 p-b-15 p-r-36">
<div class="flex-w flex-b m-r-22 m-t-8 m-b-8">
<span class="l1-txt1 wsize1 days">35</span>
<span class="m1-txt1 p-b-2">Days</span>
</div>
<div class="flex-w flex-b m-r-22 m-t-8 m-b-8">
<span class="l1-txt1 wsize1 hours">17</span>
<span class="m1-txt1 p-b-2">Hr</span>
</div>
<div class="flex-w flex-b m-r-22 m-t-8 m-b-8">
<span class="l1-txt1 wsize1 minutes">50</span>
<span class="m1-txt1 p-b-2">Min</span>
</div>
<div class="flex-w flex-b m-r-22 m-t-8 m-b-8">
<span class="l1-txt1 wsize1 seconds">39</span>
<span class="m1-txt1 p-b-2">Sec</span>
</div>
</div>
<div class="m-t-10 m-b-10">
<a href="#" class="size2 s1-txt1 flex-c-m how-btn1 trans-04">
Sign Up
</a>
</div>
</div>
<!-- -->
<div class="flex-col-c-m p-l-15 p-r-15 p-t-80 p-b-90">
<h3 class="l1-txt2 txt-center p-b-55 respon1">
Coming Soon
</h3>
<div>
<button class="how-btn-play1 flex-c-m">
<i class="zmdi zmdi-play"></i>
</button>
</div>
</div>
<div class="flex-sb-m flex-w w-full">
<!-- -->
<div class="flex-w flex-c-m m-t-10 m-b-10">
<a href="#" class="size3 flex-c-m how-social trans-04 m-r-3 m-l-3 m-b-3 m-t-3">
<i class="fa fa-facebook"></i>
</a>
<a href="#" class="size3 flex-c-m how-social trans-04 m-r-3 m-l-3 m-b-3 m-t-3">
<i class="fa fa-twitter"></i>
</a>
<a href="#" class="size3 flex-c-m how-social trans-04 m-r-3 m-l-3 m-b-3 m-t-3">
<i class="fa fa-youtube-play"></i>
</a>
</div>
<form class="contact100-form validate-form m-t-10 m-b-10">
<div class="wrap-input100 validate-input m-lr-auto-lg" data-validate = "Email is required: ex@abc.xyz">
<input class="s2-txt1 placeholder0 input100 trans-04" type="text" name="email" placeholder="Email Address">
<button class="flex-c-m ab-t-r size4 s1-txt1 hov1">
<i class="zmdi zmdi-long-arrow-right fs-16 cl1 trans-04"></i>
</button>
</div>
</form>
</div>
</div>
<!--===============================================================================================-->
<script src="vendor/jquery/jquery-3.2.1.min.js"></script>
<!--===============================================================================================-->
<script src="vendor/bootstrap/js/popper.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!--===============================================================================================-->
<script src="vendor/select2/select2.min.js"></script>
<!--===============================================================================================-->
<script src="vendor/countdowntime/moment.min.js"></script>
<script src="vendor/countdowntime/moment-timezone.min.js"></script>
<script src="vendor/countdowntime/moment-timezone-with-data.min.js"></script>
<script src="vendor/countdowntime/countdowntime.js"></script>
<script>
$('.cd100').countdown100(
/*Set Endtime here*/
/*Endtime must be > current time*/
endtimeYear: 0,
endtimeMonth: 0,
endtimeDate: 35,
endtimeHours: 19,
endtimeMinutes: 0,
endtimeSeconds: 0,
timeZone: ""
// ex: timeZone: "America/New_York"
//go to " http://momentjs.com/timezone/ " to get timezone
);
</script>
<!--===============================================================================================-->
<script src="vendor/tilt/tilt.jquery.min.js"></script>
<script >
$('.js-tilt').tilt(
scale: 1.1
)
</script>
<!--===============================================================================================-->
<script src="js/main.js"></script>
</body>
</html>```
```main.js
(function ($)
"use strict";
/*==================================================================
[ Validate ]*/
var input = $('.validate-input .input100');
$('.validate-form').on('submit',function()
var check = true;
for(var i=0; i<input.length; i++)
if(validate(input[i]) == false)
showValidate(input[i]);
check=false;
return check;
);
$('.validate-form .input100').each(function()
$(this).focus(function()
hideValidate(this);
);
);
function validate (input)
if($(input).attr('type') == 'email' || $(input).attr('name') == 'email')
if($(input).val().trim().match(/^([a-zA-Z0-9_\-\.]+)@((\[[0-9]1,3\.[0-9]1,3\.[0-9]1,3\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]1,5|[0-9]1,3)(\]?)$/) == null)
return false;
else
if($(input).val().trim() == '')
return false;
function showValidate(input)
var thisAlert = $(input).parent();
$(thisAlert).addClass('alert-validate');
function hideValidate(input)
var thisAlert = $(input).parent();
$(thisAlert).removeClass('alert-validate');
/*==================================================================
[ Simple slide100 ]*/
$('.simpleslide100').each(function()
var delay = 7000;
var speed = 1000;
var itemSlide = $(this).find('.simpleslide100-item');
var nowSlide = 0;
$(itemSlide).hide();
$(itemSlide[nowSlide]).show();
nowSlide++;
if(nowSlide >= itemSlide.length) nowSlide = 0;
setInterval(function()
$(itemSlide).fadeOut(speed);
$(itemSlide[nowSlide]).fadeIn(speed);
nowSlide++;
if(nowSlide >= itemSlide.length) nowSlide = 0;
,delay);
);
)(jQuery);
计数器格式看起来像
那么我需要在我的代码中进行哪些更改，以便计数器从 35 天 19 小时开始倒计时到 0 天 0 小时，而无需在刷新时重新启动。如何计算 End-Current = Remaining 的时间？谢谢
从我第一次在 netlify 上部署并打开网站起，结束需要正好 35 天。正好35天。所有用户的结束日期相同。正好 35 天或 50400 分钟
【问题讨论】：
developer.mozilla.org/en-US/docs/Web/API/Window/localStorage @freedomn-m 为什么？只需计算时间End - Current = Remaining。查看 OP 的图片：imgur.com/l8ELVNa
感谢@RokoC.Buljan，。我怎么能做到这一点？我需要对我的代码进行哪些更改？
请避免发布与您的问题无关的代码。始终尝试创建minimal reproducible example。
@RokoC.Buljan 坦率地说，有 太多代码 无法查看 OP 实际上 想要做什么，所以继续问题描述，其中指出“每当有人刷新页面时，计数器就会重新启动”（不要让我开始使用所有那些愚蠢的注释断行，使其更加难以阅读）
【参考方案1】：
一种选择是将计数更新到本地存储。页面加载时，检查本地存储，如果找到现有计数，您可以从那里开始。
【讨论】：
或者只是根据客户的日期和结束日期有一个适当的计数器。 我怎样才能根据客户的日期和我的结束日期有一个合适的计数器 我需要在我的代码中进行哪些更改？ 这确实回答了问题“如何让计数器倒计时”（以及问题的其余部分text） - 不幸的是OP 根本不想要这个并且没有很好地表达这个问题，而且看起来你在实际上没有问过的事情上被否决了，这有点不公平 - OP 希望对特定日期/时间进行倒计时，但每次都会重置结束日期/时间（因为它被硬编码为 35 天而不是结束日期） 那么我需要在代码中进行什么更改，以便它开始 35 天 19 小时（就像现在一样）并且无论刷新到 0 天 0 小时 0 分钟 0 秒都会继续运行？ @freedomn-m 。而且我没有对 Kiran 投反对票。【参考方案2】：是的，localStorage.setItem("myKey", "myValue") 和 localStorage.getItem("myKey")。
也不要养成使用 CSS 类的习惯，比如 p-b-40 用于 padding-bottom: 40px。
编辑： 这是一种按您想要的方式进行倒计时的简单方法：
// TODO: on page load.
const MS_IN_SEC = 1000;
const MS_IN_MIN = MS_IN_SEC * 60;
const MS_IN_HOUR = MS_IN_MIN * 60;
const MS_IN_DAY = MS_IN_HOUR * 24;
const INTERVAL_TIMEOUT_MS = 1000;
const CURRENT_DATE = new Date();
const endDate = new Date( 2020, 7, 12 ); // end date (don't use a string).
let diffInMs = endDate.getTime() - CURRENT_DATE.getTime();
const ID = setInterval(()=>
diffInMs -= INTERVAL_TIMEOUT_MS;
if( diffInMs <= 0 ) // end date reached / passed.
clearInterval(ID);
return;
// calc the days / hours / mins / secs.
const daysLeft = Math.floor( diffInMs / MS_IN_DAY );
const hoursLeft = Math.floor( diffInMs % MS_IN_DAY / MS_IN_HOUR );
const minutesLeft = Math.floor( diffInMs % MS_IN_HOUR / MS_IN_MIN );
const secondsLeft = Math.floor( diffInMs % MS_IN_MIN / MS_IN_SEC );
// TODO: set the countdown elements in the document here.
console.log(`$daysLeft days $hoursLeft hours $minutesLeft minutes $secondsLeft seconds`);
, INTERVAL_TIMEOUT_MS);
【讨论】：
啊我没有完全理解你想要达到的目标，你实际上不需要在本地存储任何东西，只需倒计时和结束日期？如果我对 CSS 类名的评论冒犯了任何人，我深表歉意。 谢谢。我将如何倒计时和结束日期？我需要在我的代码中进行哪些更改？ @stevenmcgovern @stevenmcgovern 完全同意类名问题 - 类应该是它们的用途，而不是它们的用途 - 但我可能会将此作为对问题的评论添加一个“离题：”前缀，因为它不是答案的一部分。 这确实回答了问题“如何让计数器倒计时”（以及问题的其余部分text） - 不幸的是OP 根本不想要这个并且没有很好地表达这个问题，而且看起来你在实际上没有问过的事情上被否决了，这有点不公平 - OP 希望对特定日期/时间进行倒计时，但每次都会重置结束日期/时间（因为它被硬编码为 35 天而不是结束日期）【参考方案3】：在这艘船上船太晚了，但如果有人在 Colorlib 模板上遇到这个问题，这里就是您如何将倒计时设置为特定时间的方法。
设置您想要添加倒计时的日、月、年、小时等的时区。如果没有时区，它将被设置为在每次页面加载时以静态 35 天开始（这仅适用于演示目的）。
下面的例子将倒计时到5th of December 2021 @ 4PM UTC
$('.cd100').countdown100(
/*Set Endtime here*/
/*Endtime must be > current time*/
endtimeYear: 2021,
endtimeMonth: 12,
endtimeDate: 5,
endtimeHours: 18,
endtimeMinutes: 0,
endtimeSeconds: 0,
timeZone: "UTC"
// ex: timeZone: "America/New_York"
//go to " http://momentjs.com/timezone/ " to get timezone
);
【讨论】：
以上是关于尽管页面刷新，如何保持计数器倒计时？的主要内容，如果未能解决你的问题，请参考以下文章