CSS中的数量加减按钮在网页设计中经常会用到,那么怎么来实现呢?代码如下: HTML部分: <div class= num-wrap > <button cl
CSS中的数量加减按钮在网页设计中经常会用到,那么怎么来实现呢?
代码如下: HTML部分: <div class="num-wrap"> <button class="minus">-</button> <input type="number" class="num-input" value="1"> <button class="plus">+</button> </div> CSS部分: .num-wrap { display: flex; align-items: center; } .num-input { padding: 5px; width: 30px; text-align: center; } .minus, .plus { width: 25px; height: 25px; background-color: #ccc; border: none; border-radius: 2px; cursor: pointer; } JS部分: (function() { var input = document.querySelector('.num-input'); var plusBtn = document.querySelector('.plus'); var minusBtn = document.querySelector('.minus'); plusBtn.addEventListener('click', function() { input.value++; }); minusBtn.addEventListener('click', function() { if (input.value > 1) { input.value--; } }); })();
以上便是一个简单的CSS数量加减按钮的实现方法,其中HTML部分使用了按钮和输入框的结合,CSS部分设置了按钮和输入框的样式,JS部分则是监听按钮的点击事件来改变数量。
粉丝
0
关注
0
收藏
0