Question

我正在尝试学习JavaScript / jQuery，我正在尝试创建一个简单的倒计时应用程序。用户可以设置时间量，然后单击显示的值以开始倒计时。当倒计时发生时，如果用户再次点击显示的值，我想暂停倒计时（请注意，在我的代码中，我只是使用警报消息，因为我还没有完成编码暂停的部分然而）。到目前为止，一切似乎都有效。但是，当倒计时结束时，用户应该能够选择新的倒计时时间并再次单击显示以开始倒计时。但是，当我点击显示屏时，它会在开始倒计时之前多次运行警报消息。基本上，用户应该能够在计时器运行时单击显示以暂停倒计时。如果倒计时未运行，则点击显示应该只是开始一个新的倒计时。

这是我的HTML：

  <div class="value-display">
  <button class="btn" id="increase" onclick="increase()">+</button>
  <h1 id="display" onclick="startTimer()">5</h1>
  <button class="btn" id="decrease" onclick="decrease()">-</button>
  </div>

这是我的JavaScript：

var total = 5;
var counter;

function increase() {
  total += 1;
  document.getElementById("display").innerHTML = total;
}

function decrease() {
  if (total > 0) {
    total -= 1;
    document.getElementById("display").innerHTML = total;
  }
}

function startTimer() {
  counter = setInterval(timer, 1000);
}

function timer() {
  if (total === 0) {
    document.getElementById("increase").disabled = false;
    document.getElementById("decrease").disabled = false;
    clearInterval(counter);
    return total;
  } else if (total > 0) {
    total -= 1;
    document.getElementById("increase").disabled = true;
    document.getElementById("decrease").disabled = true;
    document.getElementById("display").innerHTML = total;

    $("#display").click(function() {
      alert("ok");
    })
  }
}

这是codepen：

http://codepen.io/jv1149/pen/PzqKqQ/

Answer 1

当总数也达到零时，你需要clearInterval（）。

我不会在计时器功能中定义display.click函数

您可能还希望将显示保存在var中，以便不必每次都搜索

var total = 5;
var counter;
var increase = document.getElementById("increase");
var decrease = document.getElementById("decrease");
var display = document.getElementById("display");

function increase() {
  total += 1;
  display.innerHTML = total;
}

function decrease() {
  if (total > 0) {
    total -= 1;
    display.innerHTML = total;
  }
}

function startTimer() {
  increase.disabled = true;
  decrease.disabled = true;
  counter = setInterval(timer, 1000);
}

function pauseTimer() {
 increase.disabled = false;
 decrease.disabled = false;
 clearInterval(counter);
}

$("#display").click(function() {
  if(total===0) startTimer();
  else pauseTimer();
})

function timer() {
  if (total === 0) {
    pauseTimer();
    return total;
  } else if (total > 0) {
    total -= 1;
    display.innerHTML = total;
  }
}

Answer 2

我会创建一个新变量state，它保持计时器的当前状态。例如：0 =停止，1 =暂停，2 =运行。
然后，您可以将startTimer()方法更改为changeState()，以检查计时器的当前状态，然后执行相应的功能。例如：(if state === 2) { pauseTimer(); }
从那里开始，我认为您可以完成修改代码以实现startTimer()，pauseTimer()和stopTimer()函数。

Answer 3

你的大部分工作都在运作！但是你的代码不起作用，因为......

1）您的点击功能已包含在display函数中，因此每次调用timer()函数时，它都会附加另一个事件侦听器。

2）你的js文件中也有内联事件监听器和监听器 - 它们之间相互竞争。让你的事件监听器保持在同一范围内。

以下是工作代码：http://codepen.io/anon/pen/NrqarP

<强> HTML：

<div class="value-display">
  <button class="btn" id="increase">+</button>
  <h1 id="display" onclick="startTimer()">5</h1>
  <button class="btn" id="decrease">-</button>
</div>

<强>使用Javascript：

var total = 5;
var counter;

function increase() {
  total += 1;
  document.getElementById("display").innerHTML = total;
}

function decrease() {
  if (total > 0) {
    total -= 1;
    document.getElementById("display").innerHTML = total;
  }
}

function startTimer() {
  counter = setInterval(timer, 1000);
}

function stopTimer() {
  clearInterval(counter);
}

function timer() {
  if (total === 0) {
    document.getElementById("increase").disabled = false;
    document.getElementById("decrease").disabled = false;
    clearInterval(counter);
    return total;
  } else if (total > 0) {
    total -= 1;
    document.getElementById("increase").disabled = true;
    document.getElementById("decrease").disabled = true;
    document.getElementById("display").innerHTML = total;


  }
}

/* see how I played the event listeners both 1) outside of the timer() function and 2) away from your HTML */

$("#display").click(function(e) {
  e.stopPropagation();
  alert("ok");
})

$("#increase").on("click", function() {
  increase();
})

$("#decrease").on("click", function() {
  decrease();
})

供将来参考，请阅读：https://philipwalton.com/articles/decoupling-html-css-and-javascript/

仅在计时器运行时使功能可单击

3 个答案: