添加 (+/-) 按钮编号增量器 HTML-JavaScript

在 web 应用程序的开发中，经常需要为用户提供一个标识不同项目的编号。在这种情况下，可以使用一个增量器，用户可以通过该增量器为每个项目生成独特的编号。在本文中，我们将介绍如何通过添加 (+/-) 按钮并使用 HTML 和 JavaScript，实现一个简单的编号增量器。

HTML

首先，我们需要一个容器来显示生成的编号。 我们可以使用一个 div 元素作为容器，并将一个 input 元素用于显示生成的编号。 随后，我们需要添加两个按钮，一个是 + 按钮用于增加编号，一个是 - 按钮用于减少编号。

<div>
  <input type="text" id="number" readonly>
  <button onclick="increment()">+</button>
  <button onclick="decrement()">-</button>
</div>

JavaScript

接下来，我们需要编写一个 JavaScript 函数，用于自动生成和更新编号。 我们可以创建一个全局变量 count 来存储当前编号，然后定义两个事件处理程序 increment() 和 decrement()。通过这两个事件处理程序来实现点击 + 或 - 按钮将 count 加或减 1，最后将新的编号显示在 input 元素中。

let count = 1;

function increment() {
  count++;
  document.getElementById("number").value = count;
}

function decrement() {
  if (count > 1) {
    count--;
    document.getElementById("number").value = count;
  }
}

至此，我们完成了一个简单的编号增量器。你可以将以上 HTML 和 JavaScript 代码复制到你的项目中，并按需进行修改。

Markdown 代码片段

以下是本文中完整的 HTML 和 JavaScript 代码片段。

```html
<div>
  <input type="text" id="number" readonly>
  <button onclick="increment()">+</button>
  <button onclick="decrement()">-</button>
</div>

let count = 1;

function increment() {
  count++;
  document.getElementById("number").value = count;
}

function decrement() {
  if (count > 1) {
    count--;
    document.getElementById("number").value = count;
  }
}