输入数量控制器-优快云博客

本文介绍了一个简单的HTML、CSS和JavaScript实现的输入数量控制组件。该组件包括增加和减少按钮，能够控制用户输入的数量，并且当数量为1时，减少按钮会变为禁用状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html

<div class="account">
    <span id="num-jian" class="num-jian0"></span>
    <span>
        <input style="width: 2rem; text-align: center" type="tel" class="input-num" id="input-num" value="0" />
        </span>
    <span>KG</span>
    <span id="num-jia" class="num-jia"></span>
</div>

css

.account span,
.account input{
    color: #bdc7d0 !important;
    display: inline-block;
}
.num-jian0, .num-jian, .num-jia {
    width: 1rem;
    height: 1rem;
}
.num-jian0 {
    background: url("../image/minus0.png") no-repeat;
    background-size: 100% 100%;
}
.num-jian {
    background: url("../image/minus.png") no-repeat;
    background-size: 100% 100%;
}
.num-jia {
    background: url("../image/add.png") no-repeat;
    background-size: 100% 100%;
}

var num_jia = document.getElementById("num-jia");
var num_jian = document.getElementById("num-jian");
var input_num = document.getElementById("input-num");

num_jia.onclick = function() {
    input_num.value = parseInt(input_num.value) + 1;
    num_jian.className = "num-jian";

}
num_jian.onclick = function() {
    if(input_num.value <= 1) {

        input_num.value = 0;
        num_jian.className = "num-jian0";
    } else {
        input_num.value = parseInt(input_num.value) - 1;
    }
}

购物车+-