购物车 自动计算_html


购物车 自动计算_购物车 自动计算_02购物车 自动计算_曾祥展_03html代码

<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>


购物车 自动计算_购物车 自动计算_02购物车 自动计算_曾祥展_03CSS代码

/* 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;}


购物车 自动计算_购物车 自动计算_02购物车 自动计算_曾祥展_03JQUERY代码

<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>



购物车 自动计算_购物车 自动计算_02购物车 自动计算_曾祥展_03错误友好提示 代码

<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>



购物车 自动计算_购物车 自动计算_02购物车 自动计算_曾祥展_03错误友好提示 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;}



购物车 自动计算_购物车 自动计算_02购物车 自动计算_曾祥展_03小数计算


function test(num,flag,bit)  //参数分别是 要传入的小数"num"   舍入标准(-1,向下;0,标准;1向上)"flag"  保留小数的位数"bit" 
  {
    var n=Math.pow(10,bit);
    switch(flag)
    {
      case -1:return Math.floor(num*n)/n;break;
      case 0:return Math.round(num*n)/n;break;
      case 1:return Math.ceil(num*n)/n;
    }
  }