Question

我发现此脚本用于倒计时（Javascript）。一切都很好。当“日期”完成时，我正在显示一条消息，其中删除了整个倒计时计时器。

问题是，当我刷新页面倒数计时器出现几秒钟（例如sec），然后出现味精时。

我的问题是我可以采取一些措施来避免这种情况吗？

我的代码在这里：

kSomeString

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;
}

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

Answer 1

您需要面对两个问题：

setInterval函数中的第一个延迟。
可见内容之间的延迟，而javascript正在执行。

解决方案：

也立即运行该功能（遵循answer）
默认情况下，仅当视图实际就绪时才隐藏#clockdiv。

此外，仅在需要时填充计数器元素（用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/

Answer 2

我认为您的问题在这里：

Instant

截止日期早于现在，并且显示“ Msg after”。因此您可以修改截止日期，并显示倒数计时器。 如果只需要当前的截止时间，则应检查setInterval函数，该函数会在1秒后执行。

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

2 个答案: