css实现数字加减框 |css window.width

HTML结构如下所示：
<div class="counter">
<span class="minus">-</span>
<input type="number" class="input" value="0">
<span class="plus">+</span>
</div>
CSS样式如下所示：
.counter {
display: flex;
justify-content: center;
align-items: center;
width: 180px;
height: 40px;
border: solid 1px #ccc;
}
.minus,
.plus {
font-size: 20px;
font-weight: bold;
cursor: pointer;
}
.minus {
margin-right: 10px;
}
.input {
width: 50px;
height: 100%;
text-align: center;
font-size: 18px;
border: none;
outline: none;
}

这里大家使用了flex布局，让加减框居中显示。同时，通过CSS样式来控制加减框的大小、边框样式等。

接下来，大家需要使用JavaScript来实现数字加减的功能。

JavaScript代码如下所示：
const input = document.querySelector('.input');
const minusBtn = document.querySelector('.minus');
const plusBtn = document.querySelector('.plus');
let value = 0;//初始化计数器的值为0
minusBtn.addEventListener('click', () =>{
if (value >0) {
value--;
}
input.value = value;
});
plusBtn.addEventListener('click', () =>{
value++;
input.value = value;
});

代码中，大家首先获取到HTML页面中的input、minus、plus元素，然后通过JavaScript代码给它们添加了点击事件。

最后，大家将实现好的CSS和JavaScript通过引入外部文件的方式添加到HTML页面中，即可实现数字加减框的效果了。