可见的Javascript倒计时器

Question

我正在尝试构建一个javascript倒计时器。

我需要一个可见的计时器，让它在完成时显示一个按钮。

任何人都可以帮我构建它吗？

Answer 1

您可以使用setInterval执行此操作。

这是一个基本的演示。

var secondsRemaining = 3;

function updateTime() {
  $("#secs").text(secondsRemaining);
}

updateTime();

var i = setInterval(function() {
  secondsRemaining -= 1;
  if (secondsRemaining > 0){
    updateTime();
  } else {
    clearInterval(i);
    $("#secs").html("<button id='myButton'>Click me!</button>")
  }
}, 1000);

$("#secs").on("click", "#myButton", function(){
  alert("Hello!");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="secs"></div>

如果你想了解更多关于它是如何工作的，这是一个相当不错的教程：http://www.sitepoint.com/build-javascript-countdown-timer-no-dependencies/