<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>购物车</title>
<link type="text/css" rel="stylesheet" href="css/goods.css" target="_blank" rel="external nofollow" />
</head>
<body>
<!--商品显示区域-->
<div>
<!--商品-->
<div class="good">
<img src="image/1.jpg" id="img1"/>
<label id="lb1">vans</label>
<label>￥</label>
<label>595</label>
<div class="ordnum">数量:<input type="number" id="num1"/></div>
<button class="addbtn" id="add1" onclick="addGood(this)">加入购物车</button>
<input type="hidden" value="good1" id="hid1"/>
</div>
<div class="good">
<img src="image/2.jpg" id="img2"/>
<label id="lb2">Onitsuka Tiger</label>
<label>￥</label>
<label>550</label>
<div class="ordnum">数量:<input type="number" id="num2"/></div>
<button class="addbtn" id="add2" onclick="addGood(this)">加入购物车</button>
<input type="hidden" value="good2" id="hid2"/>
</div>
<div class="good">
<img src="image/3.jpg" id="img3"/>
<label id="lb3">allStar</label>
<label>￥</label>
<label>1000</label>
<div class="ordnum">数量:<input type="number" id="num3"/></div>
<button class="addbtn" id="add3" onclick="addGood(this)">加入购物车</button>
<input type="hidden" value="good3" id="hid3"/>
</div>
<div class="good">
<img src="image/4.jpg" id="img4"/>
<label id="lb4">Yeezy</label>
<label>￥</label>
<label>6999</label>
<div class="ordnum">数量:<input type="number" id="num4"/></div>
<button class="addbtn" id="add4" onclick="addGood(this)">加入购物车</button>
<input type="hidden" value="good4" id="hid4"/>
</div>
</div>
<table id="tb1">
<thread>
<tr>
<td>选择</td>
<td>商品</td>
<td>数量</td>
<td>价格</td>
<td>操作</td>
</tr>
</thread>
</table>
<button id="delSelected">删除</button>
<button id="moneyAll">计算总价格：</button>
<table id="tbmoney">0</table>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
function addGood(obj){
var btnid = $(obj).attr("id");
var index = btnid.substring(3,btnid.length);
//var src = $("#img"+index).attr("src");
var src = $(obj).prev().prev().prev().prev().prev("img").attr("src");
//var title = $("#lb"+index).html();
var title = $(obj).prev().prev().prev().prev("label").html();
//var num = $("#num"+index).val();
var num = parseInt($(obj).prev().children("input").val());
var i=1;
if(isNaN(num)){
num=i;
}
var money = parseInt($(obj).prev().prev("label").html());
//var goodid = $("#hid"+index).val();
var goodid = $(obj).next("input").val();
if(check(goodid)){
update(goodid,parseInt(num),money);
}else{
add(src,title,num,money,goodid);
}
}
function update(goodid,num,money){
var str="input[type='checkbox'][value='"+goodid+"']";
var trx=$(str).parent().parent();
var oldnum=parseInt($(trx).find("input[type='number']").val());
$(trx).find("input[type='number']").val(oldnum+num);
var oldmoney =parseInt($(trx).find("input[type='text']").val());
$(trx).find("input[type='text']").val(oldmoney+money*num);
}
//判断函数
function check(goodid){
var chkList=$("input[type='checkbox']");
var i;
for(i=0; i < chkList.length; i++){
if(goodid ==chkList[i].value){
return true;
}
}
return false;
}
function add(src,title,num,money,goodid){
var moneyAdd = money*num;
var nodeStr = "<tr>"
+ "<td><input type='checkbox' value='"+goodid+"'></td>"
+ "<td><img class='imgtd' src='"+src+"'>"+title+"</td>"
+ "<td><input type='number' onclick='checkNum(this)' value='"+ num +"'></td>"
+ "<td><input type='text' value='"+moneyAdd+"' readonly='readonly'></td>"
+ "<td><button onclick='delGood(this)'>x</button></td>"
+"</tr>"
$("#tb1").append(nodeStr);
}
//单行删除 动态绑定
function delGood(obj){
$(obj).parent().parent().remove();
}
//监测购物车物品数量为0时，自动删除本行
function checkNum(obj){
var num=parseInt($(obj).val());
if(num<1){
delGood(obj);
}
}
$("#delSelected").click(function(){
$("input[type='checkbox']:checked").parents("tr").remove();
});
$("#moneyAll").click(function(e) {
var moneyAll = parseInt($("input[type='text']:eq(0)").val())
+ parseInt($("input[type='text']:eq(1)").val())
+ parseInt($("input[type='text']:eq(2)").val())
+ parseInt($("input[type='text']:eq(3)").val());
console.log("a"+moneyAll);
$("#tbmoney").html()=moneyAll;
});
</script>
</body>
</html>
![Android移动应用开发之服务一、服务的创建二、服务的生命周期三、服务的启动方式四、服务的通信[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)