ECSHOP 商品詳情頁購買數量 添加加減按鈕

<input name="number" type="text" id="number" value="1" size="4" onblur="changePrice()" style="border:1px solid #ccc; "/>


修改爲


<span class="goods_cut" _src="p_w_picpaths/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="p_w_picpaths/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; 
}