你的分享就是我们的动力 ---﹥

js实现购物车功能代码

时间:2011-10-28 09:43来源:www.chengxuyuans.com 点击:

 

html代码

<ul class="flow_order">
<li>
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="goodslist">
<tbody><tr class="oltd_odd">
<th width="239" style="border:none;" align="left"> 商品名称</th>
<th width="87" style="border:none;" align="center">商品数量</th>
<th width="59" style="border:none;" align="center">&nbsp;</th>
<th width="110" style="border:none;" align="center"> 商品单价</th>
<th width="56" style="border:none;" align="center">&nbsp;</th>
<th width="109" style="border:none;" align="center"> 商品总价 </th>
</tr>
<tr>
<td width="239" align="left"><a href="#" target="_blank" title="产品名称">产品名称...</a></td>
<td align="center"><input style="text-align:center;font-size:16px;" type="text" name="t_num" id="t_num" onkeyup="CheckGroupBuyNum(this)" class="inputs flow_num" value="1"></td>
<td align="center">×</td>
<td align="center"><font id="GoodsPrice">4.9</font></td>
<td align="center">=</td>
<td align="center" style="font-size:16px"><font id="GoodsAmount">4.9</font></td>
</tr>
<tr>
<td align="left" colspan="2">配送费用</td>

<td align="center">&nbsp;</td>
<td align="center">&nbsp;</td>
<td align="center">&nbsp;</td>
<td align="center" style="font-size:16px"><font id="ShippingFee">5</font></td>
</tr>
<tr>
<td align="left"><span><b>应付总额</b></span></td>
<td align="center">&nbsp;</td>
<td align="center">&nbsp;</td>
<td align="center">&nbsp;</td>
<td align="center"><span>=</span></td>
<td align="center" style="font-size:16px"><span><b><span id="TotalAmount">9.9</span></b></span></td>
</tr>
</tbody></table>
</li>
</ul>

 

CSS代码
/* CSS 购物车 */
input,img,select
{vertical-align:middle;}
.flow_order
{ font-size:14px; }
.flow_order th
{ height:20px;padding:10px;}
.flow_order td
{ height:20px; padding:10px;font-family:Arial, Helvetica, sans-serif;}
.flow_order td span
{color:#C90809;}
.flow_num
{ width:55px;}
.inputs
{ border:1px solid #ffc569; background-color:#fff; height:23px; line-height:23px; padding:0 5px;margin-right:10px;}

 

JQUERY代码
<script type="text/javascript">

/* 检测输入商品数量 */
var Tools = new Object();
Tools.isNumber
= function(B) {
var A = /^[\d|\.|,]+$/;
return A.test(B)
};

function CheckGroupBuyNum(obj)
{
var N = obj.value;
if(!Tools.isNumber(N) ||isNaN(N))
{
$(
"#MetionDivNum").addClass('navtip_on');
$(
".navtip_dl").show();
$(
"#MetionDivNum>dl>dd").html('请输入正确的购买数量');
return false;
}
else{
if(N != parseInt(N))
{
$(
"#MetionDivNum").addClass('navtip_on');
$(
".navtip_dl").show();
$(
"#MetionDivNum>dl>dd").html('请输入正确的购买数量');
return false;
}
else{
$(
"#MetionDivNum").removeClass('navtip_on');
$(
".navtip_dl").hide();

var num= parseInt(N);
var sum=num*parseFloat($("#GoodsPrice").text());
$(
"#GoodsAmount").html(sum.toFixed(2));
var total=sum+parseFloat($("#ShippingFee").text());

$(
"#TotalAmount").html(total.toFixed(2));
}
}
}
</script>

 

错误友好提示 代码
<div id="navbox" ></div>
<div class="navtip" id="MetionDivNum">
<dl class="navtip_dl" style="display: none; ">
<dt>关闭</dt>
<dd>抱歉,数量有限,您最多只能购买2件。</dd>
</dl>
</div>
<script type="text/javascript">
$(
".navtip_dl").show();
$(
"#MetionDivNum").addClass('navtip_on');
$(
"#MetionDivNum>dl>dd").html('测试');
//导航栏下提示框关闭操作
$('.navtip_dl').find('dt').click(function(){
$(
'.navtip').removeClass('navtip_on');
$(
'.navtip_dl').hide();
});
</script>

 

错误友好提示 CSS代码
/* CSS navtip */
#navbox
{ margin: 0px auto; width: 100%;height:41px; border-top:1px solid #e9666c;background:url(nav_bg.gif) repeat-x;background-color:#bd110c; }

.navtip
{margin: 0px auto; width: 100%;height:11px;background:url(nav_bg.gif) repeat-x 0 -41px;}
.navtip_on
{ height:38px; line-height:38px; border-top:2px solid #f66c05;border-bottom:2px solid #f66c05; background-color:#ffd7a2; background-image:none;}
.navtip_dl
{margin: 0px auto; width: 920px; color:#f66c05; font-size:14px; padding:0 15px;}
.navtip_dl dt
{ float:right; width:44px;background:url(close.gif) no-repeat 29px 10px; cursor:pointer; color:#c90809;}
.navtip_dl dd
{float:left;background:url(stop.gif) no-repeat 0 11px; padding-left:20px;}

转载注明地址:http://www.chengxuyuans.com/javascript/29212.html