如何使用 JavaScript 遞增一個或多個計數器？

在本教程中，我們將學習如何使用 JavaScript 遞增一個或多個計數器。

在 JavaScript 中，我們可以透過不同的方法遞增一個或多個計數器，在本教程中，我們將瞭解其中的一些方法：

  • 使用迴圈迭代
  • 使用事件
  • 使用 setInterval() 方法

使用迴圈迭代遞增計數器

可以使用迴圈迭代輕鬆遞增計數器。在 JavaScript 中，我們有多個迴圈，例如“for”迴圈和“while”迴圈。我們可以使用其中任何一個來遞增計數器的值。首先，我們需要為計數器變數設定一個限制；否則，計數器的值將無限遞增。然後，我們需要設定一個迴圈來不斷遞增計數器。

使用者可以按照以下語法使用 JavaScript 中的迴圈迭代來遞增計數器。

語法

//counter variable
let counter = 0;
let limit = 10;
while (counter < limit) {
   //incrementing the counter
   counter = counter + 1;
   // console.log(counter);
}

在上述語法中，“counter”是值從 0 開始的變數。“limit”變數是計數器變數值的限制。

示例

在下面的示例中，我們使用迴圈迭代遞增了一個計數器的值。對於每次計數器值更改，我們都會在網頁上輸出計數器的值。使用者可以類似地使用多個計數器。我們使用了按鈕點選事件來啟動計數器值的遞增。

<html>
<body>
   <h3> Increment one or more counters with JavaScript using <i> Loop
   iteration </i> </h3>
   <button onclick = "start()"> Start Increment The Counter </button>
   <div id = "root" style = "margin-top: 10px;"> </div>
   <script>
      const root = document.getElementById('root')
      //counter variable
      let counter = 0
      // limit of the counter variable's value
      const limit = 10
      function start(){
         root.innerHTML = '<b>Counter values are listed below:</b> <br/><br/>'
         //loop iteration to increment the counter
         while (counter < limit) {
            counter = counter + 1
            root.innerHTML += 'Counter value became: ' + counter + '<br />'
         }
      }
   </script>
</body>
</html>

使用事件遞增計數器

可以使用 HTML 事件遞增計數器。在 JavaScript 中，我們有多個事件來執行可以負責遞增計數器的函式。我們可以使用事件遞增多個計數器。在本例中，我們將使用按鈕點選事件遞增兩個計數器的值。

使用者可以按照以下語法使用 JavaScript 中的事件來遞增計數器。

語法

//HTML element that has the onclick attribute
<button onclick = "increment()"> Increment Counter </button>
//counter variable
let counter = 0;
//click event handler function
function increment(){
   counter = counter + 1
}

在上述語法中，“counter”是值從 0 開始的計數器變數。“increment”是負責遞增計數器值的函式。

示例

在下面的示例中，我們為每次計數器值更改使用事件遞增了多個計數器的值。我們使用了兩個按鈕點選事件來遞增兩個計數器的值。

<html>
<body>
   <h3>Increment one or more counters with JavaScript using
   <i>Events</i></h3>
   <button onclick = "increment1()"> Increment Counter 1 </button>
   <button onclick = "increment2()"> Increment Counter 2 </button>
   <div id = "root1" style="margin-top: 10px;"> Counter 1 value: 0
   </div>
   <div id = "root2" style="margin-top: 10px;"> Counter 2 value: 0
   </div>
   <script>
      const root1 = document.getElementById('root1')
      const root2 = document.getElementById('root2')
      //counter variables
      let counter1 = 0
      let counter2 = 0
      function increment1(){
         counter1 = counter1 + 1
         root1.innerHTML = "Counter 1 value: " + counter1
      }
      function increment2(){
         counter2 = counter2 + 1
         root2.innerHTML = "Counter 2 value: " + counter2
      }
   </script>
</body>
</html>

使用 setInterval() 方法遞增計數器

在某些情況下，可能需要在特定時間間隔遞增計數器，在這種情況下，使用 setInterval() 方法遞增計數器非常有用。在引數中，setInterval 方法採用一個函式和一個以毫秒為單位的時間間隔值。setInterval() 方法在給定時間間隔後執行該函式。

使用者可以按照以下語法使用 JavaScript 的 setInterval() 方法來遞增計數器。

語法

//counter variable
let counter = 0;
//setInterval method
setInterval(() => {
   counter = counter + 1
   console.log(counter);
}, 1000);

在上述語法中，“counter”是值從 0 開始的變數。我們將一個箭頭函式傳遞給 setInterval() 方法，該函式將每隔 1000 毫秒間隔執行一次，遞增計數器的值。

示例

在下面的示例中，我們使用 setInterval() 方法遞增了一個計數器的值。每隔 1000 毫秒或 1 秒，計數器將遞增。

<html>
<body>
   <h3>Increment one or more counters with JavaScript using
   <i>setInterval()</i> method </h3>
   <div id="root" style="margin-top: 10px;">Counter value: 0</div>
   <script>
      const root = document.getElementById('root')
      //counter variables
      let counter = 0
      setInterval(() => {
         counter = counter + 1
         root.innerHTML = 'Counter value: ' + counter
      }, 1000);
   </script>
</body>
</html>

在本教程中，我們學習了三種使用 JavaScript 遞增一個或多個計數器的方法。我們使用迴圈迭代、事件和 setInterval() 方法來遞增計數器。使用者可以根據自己的需求使用任何一種方法來遞增計數器。

更新於： 2022年10月12日

13K+ 瀏覽量

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告