如何在点击按钮时增加和减少数值？

在前端开发中，可以通过以下步骤实现在点击按钮时增加和减少数值：

首先，在HTML中创建一个按钮和一个用于显示数值的元素，可以使用<button>和<span>标签来实现，给它们分别设置一个唯一的ID，例如：

<button id="increaseBtn">增加</button>
<button id="decreaseBtn">减少</button>
<span id="value">0</span>

接下来，在JavaScript中获取按钮和数值元素的引用，并为按钮添加点击事件监听器，当按钮被点击时执行相应的操作。可以使用addEventListener方法来实现，例如：

var increaseBtn = document.getElementById("increaseBtn");
var decreaseBtn = document.getElementById("decreaseBtn");
var valueElement = document.getElementById("value");

increaseBtn.addEventListener("click", function() {
  var currentValue = parseInt(valueElement.innerText);
  valueElement.innerText = currentValue + 1;
});

decreaseBtn.addEventListener("click", function() {
  var currentValue = parseInt(valueElement.innerText);
  valueElement.innerText = currentValue - 1;
});

最后，可以通过CSS样式来美化按钮和数值元素的外观，例如：

button {
  padding: 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  cursor: pointer;
}

span {
  font-size: 24px;
  font-weight: bold;
}

这样，当增加按钮被点击时，数值会增加1；当减少按钮被点击时，数值会减少1。点击按钮时，数值会在页面上实时更新显示。

这是一个简单的实现方式，可以根据具体需求进行扩展和优化。在实际开发中，可以使用各种前端框架（如React、Vue.js）来简化代码编写和管理状态，以及添加更多交互效果和动画。