如何使用 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+ 浏览量

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告

© . All rights reserved.