jquery text文本框商品數量增加或商品數量減少



124 494 165



特效描述:文本框 商品數量增加 商品數量減少,jquery text文本框設置左右增加和減少按鈕,通過點擊按鈕text文本框商品數量增加,或text文本框商品數量減少。

代碼結構

1. 引入JS

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/payfor.js"></script>

2. HTML代碼

<style type="text/css">
*{margin:0;padding:0;}
a,img{border:0;text-decoration:none;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋體";}
/* p_number */
.p_number{border:solid 1px #ddd;padding:10px 0 0 10px;width:480px;height:80px;margin:40px auto;}	
.p_number .f_l{float:left;}
.p_number .add_chose{width:105px;}
.p_number .add_chose a{float:left;margin:5px 0 0 0;display:block;width:15px;height:15px;line-height:99em;overflow:hidden;background:url(images/reduce-add.gif) no-repeat;}
.p_number .add_chose a.reduce{background-position:0 0;}
.p_number .add_chose a.reduce:hover{background-position:0 -16px;}
.p_number .add_chose a.add{background-position:-16px 0;}
.p_number .add_chose a.add:hover{background-position:-16px -16px;}
.p_number .add_chose .text{float:left;margin:0 5px;display:inline;border:solid 1px #ccc;padding:4px 3px 4px 8px;width:40px;line-height:18px;font-size:14px;color:#990000;font-weight:800;}
.p_number .buy{line-height:2em;}
.p_number .buy .total-font{font-family:Arial;font-size:26px;}
.p_number .buy .jifen{margin-left:20px;color:#ACACAC;}
.p_number .buy .jifen b{margin:0 3px;}
</style>
	<div class="p_number">
		<div style="height:36px;font-size:16px;">商品單價:<strong id="price_item_1">¥350.00</strong></div>
		<div class="f_l add_chose">
			<a class="reduce" onClick="setAmount.reduce('#qty_item_1')" href="javascript:void(0)">-</a>
			<input type="text" name="qty_item_1" value="1" id="qty_item_1" onKeyUp="setAmount.modify('#qty_item_1')" class="text" />
			<a class="add" onClick="setAmount.add('#qty_item_1')" href="javascript:void(0)">+</a>
		</div>
		<div class="f_l buy">
			總價:<span class="total-font" id="total_item_1">¥89.00</span>
			<input type="hidden" name="total_price" id="total_price" value="" />
			<span class="jifen">購買商品可獲得:<b id="total_points">18</b>積分</span>
		</div>
	</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動切換 滾動條切換 滑動選項卡 滑動切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 切換按鈕 表單 表單美化 表單插件 表單美化插件 文本框 text文本框 文字切換 文字選項卡
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子