之前在写商品详情页时，需要写一个数字加减框，如下图
因为自己嫌麻烦，就去看其他网站是怎么写的，想直接拿来用，后来看来看去觉得写得很麻烦，
于是决定自己写，附上HTML+CSS+JS代码，一条龙一站式贴心服务2333
HTML
<ul class="btn-numbox">
<li><span class="number">数量</span></li>
<li>
<ul class="count">
<li><span id="num-jian" class="num-jian">-</span></li>
<li><input type="text" class="input-num" id="input-num" value="0" /></li>
<li><span id="num-jia" class="num-jia">+</span></li>
</ul>
</li>
<li><span class="kucun">（库存:54）</span></li>
</ul>
CSS
* {
margin:;
padding:;
border:;
outline: 0
}
ul,
li {
list-style: none;
}
a {
text-decoration: none;
}
a:hover {
cursor: pointer;
text-decoration: none;
}
a:link {
text-decoration: none;
}
img {
vertical-align: middle;
}
.btn-numbox {
overflow: hidden;
margin-top: 20px;
}
.btn-numbox li {
float: left;
}
.btn-numbox li .number,
.kucun {
display: inline-block;
font-size: 12px;
color: #808080;
vertical-align: sub;
}
.btn-numbox .count {
overflow: hidden;
margin: 0 16px 0 -20px;
}
.btn-numbox .count .num-jian,
.input-num,
.num-jia {
display: inline-block;
width: 28px;
height: 28px;
line-height: 28px;
text-align: center;
font-size: 18px;
color: #999;
cursor: pointer;
border: 1px solid #e6e6e6;
}
.btn-numbox .count .input-num {
width: 58px;
height: 26px;
color: #333;
border-left:;
border-right:;
}
JS
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.onclick = function() {
if(input_num.value <= 0) {
input_num.value = 0;
} else {
input_num.value = parseInt(input_num.value) - 1;
}
}
嫌复制代码麻烦的小伙伴也可以到我的github下载：https://github.com/tujingyu/car-number-box
注：如果你在跟后台同事对接口的时候，遇到点击加减按钮，值无法传到后台的情况，可以改成下面这种方式
//数字加减框
$("body").on("click",".num-jian",function (m) {
var obj = $(this).closest("ul").find(".input-num");
if (obj.val() <= 0) {
obj.val(0);
} else {
obj.val(parseInt(obj.val()) - 1);
}
obj.change();
});
$("body").on("click",".num-jia",function (m) {
var obj = $(this).closest("ul").find(".input-num");
obj.val(parseInt(obj.val()) + 1);
obj.change();
});