购物车

最新推荐文章于 2022-03-27 00:10:39 发布

暖宝宝兰宝宝

最新推荐文章于 2022-03-27 00:10:39 发布

阅读量251

点赞数

<html>
<head>
<meta charset="utf-8" />
<title> 购物车</title>
<script type="text/javascript" src="http://www.linked-f.com/js/jquery.min.js"></script>

<link rel="stylesheet" media="screen" href="../styles/basic.css"/>
<style type="text/css">
h1 {
text-align:center;
}
table {
margin:0 auto;
width:60%;
border:2px solid #aaa;
border-collapse:collapse;
}
table th, table td {
border:2px solid #aaa;
padding:5px;
}
th {
background-color:#eee;
}
</style>
<script>

//入购物车，声明的参数btn用来接收传入的this；而this就是用户正在点的按钮(DOM对象)。
function add_shoppingcart(btn) {

//eq(i)类似于[i]/get(i)，
//但是它返回的是jQuery对象。
var name =
$(btn).parent().siblings().eq(0).html();
//按钮 td5 tds td0 商品名

//先在购物车汇总中遍历所有的商品名，如果有相同的商品名就不在汇总中创建新的商品
//获取汇总中tbody下所有的行
var $trs = $("#goods tr");
//设置一个开关
var sameName = false;
//遍历他们
for(var i=0;i<$trs.length;i++) {
//获取每一行
var $tr = $trs.eq(i);
//获取该行中第1列的值(商品名/String)
var shopName = $tr.children().eq(0).html();
// tds td0 商品名
if(shopName==name){
sameName = true;
}
}

if(sameName==false){
var price =
$(btn).parent().siblings().eq(1).html();
//按钮 td5 tds td1 单价
//alert(name + "," + price);
//创建一行
var $tr =
$('<tr>'+
'<td>'+name+'</td>'+
'<td>'+price+'</td>'+
'<td align="center">'+
'<input type="button" value="-" οnclick="decrease(this);"/> '+
'<input type="text" size="3" readonly value="1"/> '+
'<input type="button" value="+" οnclick="increase(this);"/>'+
'</td>'+
'<td>'+price+'</td>'+
'<td align="center"><input type="button" value="x" οnclick="del(this);"/></td>'+
'</tr>');
//将此行追加到tbody下
$("#goods").append($tr);
sum();
}

}
//删除
function del(btn) {
$(btn).parent().parent().remove();
sum();
}
//加法
function increase(btn) {
//获取按钮的哥哥的内容(数量/String)
var amount = $(btn).prev().val();
//数量+1，再设置回文本框
$(btn).prev().val(++amount);
//获取按钮的父亲的哥哥的内容(单价)
var price = $(btn).parent().prev().html();
//计算金额=单价*数量
var mny = price*amount;
//写入到按钮的父亲的弟弟里(金额)
$(btn).parent().next().html(mny);
sum();
}
//减法
function decrease(btn) {
//获取按钮的弟弟的内容(数量/String)
var amount = $(btn).next().val();
//数量不能小于1
if(amount <= 1) {
return;
}
//数量-1，再设置回文本框
$(btn).next().val(--amount);
//获取按钮的父亲的哥哥的内容(单价)
var price = $(btn).parent().prev().html();
//计算金额=单价*数量
var mny = price*amount;
//写入到按钮的父亲的弟弟里(金额)
$(btn).parent().next().html(mny);
sum();
}
//求合计
//获取所有的行并求合计，并不是获取
//某一个按钮所在的行，因此没有参数
function sum() {
//获取tbody下所有的行
var $trs = $("#goods tr");
//遍历他们
var sum = 0;
for(var i=0;i<$trs.length;i++) {
//获取每一行
var $tr = $trs.eq(i);
//获取该行中第4列的值(金额/String)
var mny =
$tr.children().eq(3).html();
// tds td3 金额
sum += parseFloat(mny);
}
//将合计值写入合计列
$("#total").html(sum);
}
</script>
</head>

<body>

<h1>最划算</h1>
<table>
<tr>
<th>商品</th>
<th>单价(元)</th>
<th>描述</th>
<th>库存</th>
<th>好评率</th>
<th>操作</th>
</tr>
<tr>
<td>武装直升机z_10</td>
<td>200</td>
<td>很酷</td>
<td>107</td>
<td>99%</td>
<td align="center">
<input type="button" value="加入购物车" οnclick="add_shoppingcart(this);"/>
</td>
</tr>
<tr>
<td>虎式坦克</td>
<td>200</td>
<td>火力猛，装甲厚</td>
<td>178</td>
<td>100%</td>
<td align="center">
<input type="button" value="加入购物车" οnclick="add_shoppingcart(this);"/>
</td>
</tr>
<tr>
<td>单兵望远镜</td>
<td>132</td>
<td>千里眼，哪里都能看</td>
<td>134</td>
<td>88%</td>
<td align="center">
<input type="button" value="加入购物车" οnclick="add_shoppingcart(this);"/>
</td>
</tr>
<tr>
<td>T-50战斗机</td>
<td>250</td>
<td>全球部署，精确打击</td>
<td>235</td>
<td>94%</td>
<td align="center">
<input type="button" value="加入购物车" οnclick="add_shoppingcart(this);"/>
</td>
</tr>
<tr>
<td>单兵火箭筒</td>
<td>150</td>
<td>携带方便，火力强悍</td>
<td>241</td>
<td>96%</td>
<td align="center">
<input type="button" value="加入购物车" οnclick="add_shoppingcart(this);"/>
</td>
</tr>
<tr>
<td>战术手雷</td>
<td>100</td>
<td>携带方便，爆破力强</td>
<td>227</td>
<td>96%</td>
<td align="center">
<input type="button" value="加入购物车" οnclick="add_shoppingcart(this);"/>
</td>
</tr>
<tr>
<td>L-81突击步枪</td>
<td>100</td>
<td>破环力大</td>
<td>148</td>
<td>100%</td>
<td align="center">
<input type="button" value="加入购物车" οnclick="add_shoppingcart(this);"/>
</td>
</tr>
<tr>
<td>K-91狙击步枪</td>
<td>200</td>
<td>精确度高</td>
<td>201</td>
<td>95%</td>
<td align="center">
<input type="button" value="加入购物车" οnclick="add_shoppingcart(this);"/>
</td>
</tr>

<tr>
<td>防弹头盔</td>
<td>50</td>
<td>有型</td>
<td>141</td>
<td>96%</td>
<td align="center">
<input type="button" value="加入购物车" οnclick="add_shoppingcart(this);"/>
</td>
<tr>
<td>03单兵靴</td>
<td>200</td>
<td>舒适</td>
<td>163</td>
<td>100%</td>
<td align="center">
<input type="button" value="加入购物车" οnclick="add_shoppingcart(this);"/>
</td>

</table>

<h1>购物车</h1>
<table>
<thead>
<tr>
<th>商品</th>
<th>单价(元)</th>
<th>数量</th>
<th>金额(元)</th>
<th>删除</th>
</tr>
</thead>
<tbody id="goods">

</tbody>
<tfoot>
<tr>
<td colspan="3" align="right">总计</td>
<td id="total"></td>
<td></td>
</tr>
</tfoot>
</table>
<div id="footer">
<p>[最实在的军品商城]</p>
<p>版权所有(C)尚品军城 </p>
</div>
</body>