如何在倒数计时器上添加Onlick

Question

我想给这个倒计时代码，一个onclick按钮。

当我点击按钮时，它会启动。

我该怎么做？

由于

var targetURL = "http://stackoverflow.com/"
var countdownfrom = 10

var currentsecond = document.getElementById('redirect').innerHTML = countdownfrom + 1

function countredirect() {
  if (currentsecond != 1) {
    currentsecond -= 1
    document.getElementById('redirect').innerHTML = currentsecond
  } else {
    window.location = targetURL
    return
  }
  setTimeout("countredirect()", 1000)
}

countredirect()

<span id="redirect"></span>

Answer 1

请尝试以下代码：

EB

Answer 2

这是一个可行的选择：

1. 您在加载时设置 innerHTML 元素的 redirect 。
2. 单击该按钮时，它每秒执行一次该功能并重置计数器。
3. 只要倒计时 > 0 减少它。
4. 如果 0 停止 interval 。

<强>代码：

＆＃13;
＆＃13;
/* ----- JavaScript ----- */
var
  interval,
  countdown = 10,
  redir = document.getElementById("redirect"),
  targetURL = "http://stackoverflow.com/",
  reset = function () {
    redir.innerHTML = countdown;
  };
  
/* Set the countdown to the redirect element. */
window.onload = reset;

/* When the button is clicked... */
document.getElementById("button").onclick = function () {
  var
    button = this,
    counter = countdown;
  
  /* Clear the interval to start anew. */
  clearInterval(interval);
  this.innerHTML = "Restart";
  
  /* The interval. */
  interval = setInterval(function () {
    if (counter) redir.innerHTML = --counter;
    else {
      clearInterval(interval);
      button.innerHTML = "Start";
    }
  }, 1000);

  /* Reset. */
  reset();
}
＆＃13;
<!----- HTML ----->
<span id = "redirect"></span>
<button id = "button">Start</button>
＆＃13;
＆＃13;
＆＃13;