html商品加减按钮php,html+css+js 购物车数字加减按钮

效果图

image.png

截取部分代码

html

数量

- + (库存: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.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;

}