页面重新加载时的Javascript倒计时问题

Question

I found this script for countdown (Javascript). 我发现这个脚本倒计时（Javascript）。 Everything works very well. 一切都很好。 When "date" is finished I'm displaying message which removes whole countdown timer. 当“日期”结束时，我正在显示消除整个倒数计时器的消息。

The problem is when I refresh page countdown timer appears for let's say sec and then msg appears as it should be. 问题是，当我刷新页面倒数计时器出现时，让我们说秒，然后msg出现应该是。

My question is can I do something to avoid this? 我的问题是我能做些什么来避免这种情况吗？

My code is here: 我的代码在这里：

 var deadline = new Date("mar 6, 2019 09:12:25").getTime(); var x = setInterval(function() { var now = new Date().getTime(); var t = deadline - now; var days = Math.floor(t / (1000 * 60 * 60 * 24)); var hours = Math.floor((t % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((t % (1000 * 60)) / 1000); document.getElementById("day").innerHTML = days; document.getElementById("hour").innerHTML = hours; document.getElementById("minute").innerHTML = minutes; document.getElementById("second").innerHTML = seconds; if (t < 0) { clearInterval(x); document.getElementById("clockdiv").innerHTML = "<p class='Msg'>Msg after!</p>"; document.getElementById("day").innerHTML = "0"; document.getElementById("hour").innerHTML = "0"; document.getElementById("minute").innerHTML = "0"; document.getElementById("second").innerHTML = "0"; } }, 1000);

 body { text-align: center; background: #373737; font-family: sans-serif; font-weight: 100; } h1 { color: #396; font-weight: 100; font-size: 40px; margin: 40px 0px 20px; } .Msg { font-size: 18px; color: #fff } #clockdiv { font-family: sans-serif; color: #000000; display: inline-block; font-weight: 100; text-align: center; font-size: 30px; } #clockdiv>div { padding: 10px; border-radius: 5px; background: #f9a936; display: inline-block; } #clockdiv div>span { padding: 15px; border-radius: 5px; background: #e95a2c; display: inline-block; } .smalltext { padding-top: 5px; font-size: 16px; }

 <!DOCTYPE html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="style.css"> </head> <body> <!--[if lt IE 7]> <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p> <![endif]--> <div class="text-center"> <div id="clockdiv"> <div> <span class="days" id="day"></span> <div class="smalltext">Days</div> </div> <div> <span class="hours" id="hour"></span> <div class="smalltext">Hours</div> </div> <div> <span class="minutes" id="minute"></span> <div class="smalltext">Minutes</div> </div> <div> <span class="seconds" id="second"></span> <div class="smalltext">Seconds</div> </div> </div> </div> <script src="main.js" async defer></script> </body> </html>

https://jsfiddle.net/n0967ocs/2/ https://jsfiddle.net/n0967ocs/2/

Answer 1

There are 2 issues you need to face with: 您需要面对两个问题：

The first delay in the setInterval function. setInterval函数中的第一个延迟。
The delay between the content is visible and the javascript is execution. 内容之间的延迟是可见的，javascript是执行。

The solutions: 解决方案：

Run the function also immediately (Following this answer ) 立即运行该功能（遵循此答案）
Hide #clockdiv by default it only when the view is actually ready. 默认情况下隐藏#clockdiv仅在视图实际就绪时。

Also, fill the counter elements only if need (wrapped it with if (t > 0) { ) 此外，仅在需要时填充计数器元素（用if (t > 0) {包裹它）

 var deadline = new Date("mar 6, 2019 09:12:25").getTime(); var x = setInterval(function check() { var now = new Date().getTime(); var t = deadline - now; if (t > 0) { var days = Math.floor(t / (1000 * 60 * 60 * 24)); var hours = Math.floor((t % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((t % (1000 * 60)) / 1000); document.getElementById("day").innerHTML = days; document.getElementById("hour").innerHTML = hours; document.getElementById("minute").innerHTML = minutes; document.getElementById("second").innerHTML = seconds; } else { clearInterval(x); document.getElementById("clockdiv").innerHTML = "<p class='Msg'>Msg after!</p>"; // you can't access those elements because you already override them in the line above //document.getElementById("day").innerHTML = "0"; //document.getElementById("hour").innerHTML = "0"; //document.getElementById("minute").innerHTML = "0"; //document.getElementById("second").innerHTML = "0"; } document.getElementById('clockdiv').style.display = 'inline-block'; return check; }(), 1000);

 body { text-align: center; background: #373737; font-family: sans-serif; font-weight: 100; } h1 { color: #396; font-weight: 100; font-size: 40px; margin: 40px 0px 20px; } .Msg { font-size: 18px; color: #fff } #clockdiv { font-family: sans-serif; color: #000000; display: inline-block; font-weight: 100; text-align: center; font-size: 30px; /*add this to hide by default*/ visibility: none; } #clockdiv>div { padding: 10px; border-radius: 5px; background: #f9a936; display: inline-block; } #clockdiv div>span { padding: 15px; border-radius: 5px; background: #e95a2c; display: inline-block; } .smalltext { padding-top: 5px; font-size: 16px; }

 <!DOCTYPE html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="style.css"> </head> <body> <!--[if lt IE 7]> <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p> <![endif]--> <div class="text-center"> <div id="clockdiv"> <div> <span class="days" id="day"></span> <div class="smalltext">Days</div> </div> <div> <span class="hours" id="hour"></span> <div class="smalltext">Hours</div> </div> <div> <span class="minutes" id="minute"></span> <div class="smalltext">Minutes</div> </div> <div> <span class="seconds" id="second"></span> <div class="smalltext">Seconds</div> </div> </div> </div> <script src="main.js" async defer></script> </body> </html>

https://jsfiddle.net/moshfeu/g6dvaLej/9/ https://jsfiddle.net/moshfeu/g6dvaLej/9/

Answer 2

I think your problem is here: 我认为你的问题在这里：

var deadline = new Date("mar 6, 2019 09:12:25").getTime();

the deadline is earlier than now, and the "Msg after" is showing. 截止日期早于现在，并显示“Msg after”。 So you can modify the deadline, and countdown timer will show. 所以你可以修改截止日期，倒计时器会显示。 If you just want the current deadline time, you should check the setInterval function, it excutes after 1s. 如果你只想要当前的截止时间，你应该检查setInterval函数，它会在1s之后执行。

页面重新加载时的Javascript倒计时问题

问题描述

2 个解决方案

解决方案1
3 已采纳 2019-03-06 08:42:46

解决方案2
0 2019-03-06 08:56:39

页面重新加载时的Javascript倒计时问题

问题描述

2 个解决方案

解决方案1 3 已采纳 2019-03-06 08:42:46

解决方案2 0 2019-03-06 08:56:39

解决方案1
3 已采纳 2019-03-06 08:42:46

解决方案2
0 2019-03-06 08:56:39