html代码怎么做加减功能框，flex布局教程实例

涛哥
Html代码

您可以使用HTML、CSS和JavaScript来创建加减功能框。以下是一个简单的示例，您可以在其中添加自己的样式和功能：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>加减功能框</title>
    <style>
      /* 样式 */
      #counter {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 200px;
        height: 50px;
        border: 1px solid black;
        padding: 10px;
        font-size: 24px;
        font-weight: bold;
        text-align: center;
      }
      button {
        width: 30px;
        height: 30px;
        font-size: 24px;
        font-weight: bold;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div id="counter">
      <button id="minus">-</button>
      <span id="count">0</span>
      <button id="plus">+</button>
    </div>
    <script>
      // JavaScript
      const countSpan = document.getElementById("count");
      const minusBtn = document.getElementById("minus");
      const plusBtn = document.getElementById("plus");
      let count = 0;

      function updateCount() {
        countSpan.innerText = count;
      }

      function decrement() {
        count--;
        updateCount();
      }

      function increment() {
        count++;
        updateCount();
      }

      minusBtn.addEventListener("click", decrement);
      plusBtn.addEventListener("click", increment);
    </script>
  </body>
</html>

在上面的示例中，我们使用Flex布局来创建一个名为counter的DIV元素，该元素包含一个减号按钮、一个数字计数器和一个加号按钮。我们还定义了一些CSS样式，使计算器看起来更美观。

在JavaScript部分，我们使用DOM API来获取与按钮和计数器相关的元素，并在单击按钮时增加或减少计数器的值。我们还定义了updateCount()函数来更新计数器的显示值。

请注意，此示例仅用于说明如何实现加减功能框。您可以根据自己的需求更改样式和功能。

 
  • 计算器
  • 多功能计算器