您可以使用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()函数来更新计数器的显示值。
请注意，此示例仅用于说明如何实现加减功能框。您可以根据自己的需求更改样式和功能。
评论