ECSHOP 商品详情页购买数量 添加加减按钮
2015-04-27 13:11
337 查看
<input name="number" type="text" id="number" value="1" size="4" onblur="changePrice()" style="border:1px solid #ccc; "/>
修改为
<span class="goods_cut"
_src="images/plus1.gif"
alt="减少" width="15" height="15" /></span>
<input name="number" type="text" id="number" value="1" size="4" onblur="changePrice()" style="border:1px solid #ccc; "/>
<span class="goods_add"
_src="images/plus2.gif"
alt="增加" width="15" height="15" /></span>
再添加js脚本
复制代码
<script language="javascript" type="text/javascript">
function goods_cut(){
var num_val=document.getElementById('number');
var new_num=num_val.value;
var Num = parseInt(new_num);
if(Num>1)Num=Num-1;
num_val.value=Num;
}
function goods_add(){
var num_val=document.getElementById('number');
var new_num=num_val.value;
var Num = parseInt(new_num);
Num=Num+1;
num_val.value=Num;
}
</script>
复制代码
再添加CSS样式
复制代码
/*--------------商品详情页增加减少-------------*/
.goods_gds {
height:35px;
display:block;
overflow:hidden;
}
.goods_font {
display:block;
float:left;
height:15px;
margin:8px 3px 0;
font-size:12px;
}
.goods_cut {
border:0 none;
cursor:pointer;
display:block;
float:left;
font-size:0;
height:15px;
line-height:0;
margin:8px 3px 0;
width:15px;
padding-right:0px;
_padding-right:0px;
}
input.goodsBuyBox,input.number {
border:1px solid #DDDDDD;
float:left;
font-size:10px;
height:18px;
line-height:18px;
margin:5px 5px 5px 5px;
padding:0;
text-align:center;
}
.goods_add {
border:0 none;
cursor:pointer;
display:block;
float:left;
font-size:0;
height:15px;
line-height:0;
margin:8px 3px 0;
width:15px;
}
.goods_number_tit{
display: block;
background:none;
text-align:left;
padding-left:5px;
}
修改为
<span class="goods_cut"
_src="images/plus1.gif"
alt="减少" width="15" height="15" /></span>
<input name="number" type="text" id="number" value="1" size="4" onblur="changePrice()" style="border:1px solid #ccc; "/>
<span class="goods_add"
_src="images/plus2.gif"
alt="增加" width="15" height="15" /></span>
再添加js脚本
复制代码
<script language="javascript" type="text/javascript">
function goods_cut(){
var num_val=document.getElementById('number');
var new_num=num_val.value;
var Num = parseInt(new_num);
if(Num>1)Num=Num-1;
num_val.value=Num;
}
function goods_add(){
var num_val=document.getElementById('number');
var new_num=num_val.value;
var Num = parseInt(new_num);
Num=Num+1;
num_val.value=Num;
}
</script>
复制代码
再添加CSS样式
复制代码
/*--------------商品详情页增加减少-------------*/
.goods_gds {
height:35px;
display:block;
overflow:hidden;
}
.goods_font {
display:block;
float:left;
height:15px;
margin:8px 3px 0;
font-size:12px;
}
.goods_cut {
border:0 none;
cursor:pointer;
display:block;
float:left;
font-size:0;
height:15px;
line-height:0;
margin:8px 3px 0;
width:15px;
padding-right:0px;
_padding-right:0px;
}
input.goodsBuyBox,input.number {
border:1px solid #DDDDDD;
float:left;
font-size:10px;
height:18px;
line-height:18px;
margin:5px 5px 5px 5px;
padding:0;
text-align:center;
}
.goods_add {
border:0 none;
cursor:pointer;
display:block;
float:left;
font-size:0;
height:15px;
line-height:0;
margin:8px 3px 0;
width:15px;
}
.goods_number_tit{
display: block;
background:none;
text-align:left;
padding-left:5px;
}
相关文章推荐
- ECSHOP 商品详情页 购物车页 添加购买数量加减按钮
- ECSHOP 商品详情页购买数量 添加加减按钮 实用版
- ECSHOP 商品详情页 购物车页 添加购买数量加减按钮
- ECSHOP 商品详情页 购物车页 添加购买数量加减按
- ECSHOP商品购买数量增加加减按钮插件(包含购物车商品数量增加减少,自动更新)
- 怎么样给ECShop购物车添加购买数量加减按钮
- ECSHOP产品详情页修改商品购买数量并实时更新商品总价的实现与优化
- ecshop优化2-商品页购买数量加减按钮ecshop购物车页加减按钮
- 最近遇到一个类似淘宝购买商品加减数量然后还得实时更新数据到服务器的问题
- angular添加 修改 总计 数量按钮加减
- HTML angular购物车:加减按钮改变数量+全选+低于1时提示删除商品+计算所有商品总价+清空购物车+单独删除+输入内容小于1时,自动变为1+反选
- jQuery实现商城中要购买商品数量的加减
- Android自定义商品购买数量加减控件
- HTML angular购物车:加减按钮改变数量+全选+低于1时提示删除商品+计算所有商品总价+清空购物车+单独删除+输入内容小于1时,自动变为1+反选
- ecshop每个商品添加去淘宝购买链接
- ecshop二次开发——商品列表页显示重量、货号、购买数量
- angularJS商品添加数量加减
- ecshop的相关配件中添加购买的按钮
- ecshop添加“浏览过此商品的人还购买了”功能
- 购物车商品数量加减