Question

我有一个倒数时钟，它会改变，但是除非您刷新页面，否则它似乎并不是实时倒数。我不熟悉javascript，因此我将其复制到某个地方，然后自己进行了一些修改以适合我的需要。有什么我应该添加或格式化错误的内容导致倒计时不是实时的。

function updateTimeSpan() {
  var theSpan = document.getElementById('timeLeft');
  var d = new Date();
  var t = new Date();
  var ms;
  var s, m, h;

  // if it's after 5pm, set today to tomorrow    
  if (d.getHours() > 16) {
    d.setDate(d.getDate() + 1);
  }
  // get the next monday    
  while (d.getDay() != 1) {
    d.setDate(d.getDate() + 1);
  }
  // set the time    
  d.setHours(1665);
  d.setMinutes(33);
  d.setSeconds(27);
  // get the difference between right now and next monday    
  ms = d - t;
  // get the days between now and then    
  d = parseInt(ms / (1000 * 60 * 60 * 24));
  ms -= (d * 1000 * 60 * 60 * 24);
  // get hours    
  h = parseInt(ms / (1000 * 60 * 60));
  ms -= (h * 1000 * 60 * 60);
  // get minutes    
  m = parseInt(ms / (1000 * 60));
  ms -= (m * 1000 * 60);
  // get seconds    
  s = parseInt(ms / 1000);
  theSpan.innerHTML = d + ' DAYS | ' + h + ' HRS | ' + m + ' MINS | ' + s + ' SECS';
  setTimeout('updateTimeSpan()', 100);
}

onload = updateTimeSpan();

$(function() {

  $("h2")
    .wrapInner("<span>")

  $("h2 br")
    .before("<span class='spacer'>")
    .after("<span class='spacer'>");

});

.timer-header {
  position: absolute;
  left: 0;
  width: 100%;
}

.timer-header span {
  color: black;
  font: bold 24px/45px Montserrat, Sans-Serif;
  letter-spacing: -1px;
  font-size: 30px;
  padding: 10px;
}

.timer-header span.spacer {
  padding: 0 5px;
}

@media only screen and (max-width: 480px) {
  .timer-header span {
    color: black;
    font: bold 24px/45px Montserrat, Sans-Serif;
    font-size: 18px;
    padding: 5px;
  }
  .timer-header span.spacer {
    padding: 0 5px;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <h2 class="timer-header"><span id="timeLeft"></span></h2>
</body>

Answer 1

尝试一下

var countDownDate = new Date("Jan 5, 2020 00:00:00").getTime();


var x = setInterval(function() {

  var now = new Date().getTime();
    
  var distance = countDownDate - now;
    
  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    
  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";
    
  // If the count down is over, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);

p {
  text-align: center;
  font-size: 60px;
  margin-top: 0px;
}

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<p id="demo"></p>
</body>
</html>

Answer 2

您想在每个时间间隔更新一个值，然后为什么不使用SET GLOBAL FOREIGN_KEY_CHECKS=1;。

setInterval

计时器不倒计时

2 个答案: