Javascript倒计时器不会使用clearInterval()暂停

时间:2018-06-05 21:44:33

标签: javascript function

想知道你们是否可以帮助我......

我试图在Javascript中制作一个简单的,长达一小时的倒数计时器。我可以把它开始,但是我在暂停时遇到了麻烦。我已经使用clearTimeout()跟踪了这里的示例,youtube和codepen,但我似乎无法让它工作。提前谢谢。

倒计时时钟



var t;

var count = 3600;

function cddisplay() {
  // displays time in span
  document.getElementById('timeLeft').innerHTML = Math.round(count / 60);

};

function countdown() {
  // starts countdown
  cddisplay();
  if (count == 0) {
    // time is up
    alert("Another day closer!");
    var url = "https://www.twitter.com/";
    var windowName = "new window";
    window.open(url, windowName, "height=200,width=200");
    return;
  } else {
    count--;
    t = setTimeout("countdown()", 1000);
  }
  return;
};

function cdpause() {
  // pauses countdown
  clearTimeout(t);
};

function hideButton() {
  // Greys out button
  document.getElementById("startButton").className = "btn btn-primary disabled";
  document.getElementById("startLine").innerHTML = "Kick some bum!";
}

console.log(count);

.hidden {
  display: none;
}

#title {
  font-family: Arial, Helvetica, sans-serif;
}

h2 {
  font-family: Helvetica;
}

<!doctype html>
<html>

<head>
  <title>100 Days Buddy</title>
  <script src="script.js"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="style.css">

</head>

<body>
  <div class="jumbotron">
    <div class="container text-center">
      <h1 class="" id="title">100 Days Buddy</h1>
      <h2 class="small"> Start your daily hour, then tweet your progress!</h2>
      <h3 id="startLine">Click Start to begin your hour</h3>
      <input class="btn btn-primary" id="startButton" type="button" value="Start" onclick="countdown(); hideButton();">

      <input class="btn btn-secondary" type="button" value="Pause" onclick="cdpause()">

      <h2>Time left: <span id="timeLeft"></span> minutes.</h2>
    </div>


  </div>
</body>

</html>
&#13;
&#13;
&#13;

0 个答案:

没有答案