如何限制 JavaScript 中按钮的点击次数？

Question

我需要显示按钮 Hour、big font 0:0 中的 2 个数字和一个按钮 Minute。

第一个数字代表小时，第二个数字代表分钟。

每当用户单击 Hour 按钮时，第一个数字会增加 1，因此它会 like 0, 1, 2, 3, …, 23.

如果小时数是 23 并且用户单击小时按钮，则数字回到 0.

同样，每当用户点击“分钟”按钮时，第二个数字增加1，所以它就像 0, 1, 2, 3, …, 59。如果分钟数是 59 并且用户单击了分钟按钮然后数字回到 0.

这是我到目前为止所做的。

<table>
<tr>
<td>
  <button onclick="displaycount()">Hour </button>
</td>
<td>
  <p id="carrier"> 0 </p>
</td>
<td>
  :
</td>
<td>
  <p id="carrier2"> 0 </p>
</td>
<td>
  <button onclick="displaycount2()">Minute </button>
</td>


</tr>
</table>

<script>
var count =(function() {
var counter = 0;
return function() {return counter +=1;}
})();

var count2 =(function() {
var counter = 0;
return function() {return counter +=1;}
})();

function displaycount(){
document.getElementById("carrier").innerHTML = count();
}

function displaycount2(){
document.getElementById("carrier2").innerHTML = count2();
}
</script>

Answer 1

您可以使用模数 (%) 将小时和分钟的计数器重置为 0：

var count = (function() {
    var counter = 0;
    return function() {
      return counter = (counter + 1) % 24;
    }
  })();

var count2 = (function() {
  var counter = 0;
  return function() {
    return counter = (counter + 1) % 60;
  }
})();

function displaycount() {
  document.getElementById("carrier").innerHTML = count();
}

function displaycount2() {
  document.getElementById("carrier2").innerHTML = count2();
}

<table>
  <tr>
    <td>
      <button onclick="displaycount()">Hour </button>
    </td>
    <td>
      <p id="carrier"> 0 </p>
    </td>
    <td>
      :
    </td>
    <td>
      <p id="carrier2"> 0 </p>
    </td>
    <td>
      <button onclick="displaycount2()">Minute </button>
    </td>


  </tr>
</table>

如何限制 JavaScript 中按钮的点击次数？

How do I limit the number of clicks on a button in JavaScript?

javascript

click

onclick

button

limit