CSS中的上下箭头加1减1可以用于网页中的一些数字调节功能,比如数量选择等。下面是一个基础的示例: <div class= quantity > <span
CSS中的上下箭头加1减1可以用于网页中的一些数字调节功能,比如数量选择等。下面是一个基础的示例:
<div class="quantity"> <span class="minus">-</span> <input type="text" class="number" value="1"> <span class="plus">+</span> </div>
上面的代码中,用到了一个div容器和三个子元素,分别是一个减号span元素、一个input输入框和一个加号span元素。下面是CSS样式的实现:
.quantity { position: relative; display: inline-block; } .quantity .minus, .quantity .plus { position: absolute; display: block; width: 20px; height: 20px; text-align: center; font-size: 18px; cursor: pointer; top: 0; } .quantity .minus { left: 0; } .quantity .plus { right: 0; } .number { width: 50px; height: 20px; font-size: 16px; text-align: center; }
上面的CSS代码中,我们给父级容器设置了相对定位,然后给子元素设置了绝对定位并居中。其中减号元素的left设置了0,加号元素的right设置了0,分别使得它们在左右两端。最后要注意的是输入框的样式,需要设置宽高和字体大小等。
有了这个基础的结构和样式,我们可以通过JavaScript来实现数字的自增和自减:
var quantityEl = document.querySelector(".quantity"); var minusEl = quantityEl.querySelector(".minus"); var numberEl = quantityEl.querySelector(".number"); var plusEl = quantityEl.querySelector(".plus"); var num = 1; minusEl.addEventListener("click", function() { if(num > 1) { num--; numberEl.value = num; } }); plusEl.addEventListener("click", function() { num++; numberEl.value = num; });
上面的JavaScript代码中,我们通过querySelector获取相关的元素,然后定义一个num变量用来保存当前的数字数量。在减号和加号元素上分别添加一个事件监听器,获取当前的数字,然后自增或者自减,并将数字更新到输入框中。
至此,我们就实现了一个基于CSS和JavaScript的上下箭头加1减1的功能。通过合理的布局和样式,我们可以让这个功能看起来更加美观和实用。
粉丝
0
关注
0
收藏
0