效果图
image.png
截取部分代码
html
数量 |
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; } } |
css样式
.gmcp_cp_tr04_std01 {
padding-top:5%;
}
.btn-numbox {
overflow: hidden;
}
.btn-numbox li {
float: left;
}
.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;
text-align: center;
color:#333;
cursor: pointer;
border: 1px solid #e6e6e6;
width: 28px;
height: 28px;
line-height: 28px;
font-size: 18px;
}
.btn-numbox .count .input-num {
width: 58px;
color: #333;
border-left: 0;
border-right: 0;
}