| HTML： <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>淘宝购物车</title>
<style type="text/css">@import url("css/myCar.css");</style>
<script type="text/javascript" src="js/myCar.js"></script>
</head>
<body >
<div id="header"><img src="images/taobao_logo.gif" alt="logo"></div>
<div id="two">您的位置：<a href="https://www.baidu.com">首页</a> > <a href="https://www.taobao.com">我的淘宝</a> > 我的购物车</div>
<div id="list">
<ul>
<li class="xuanzhong_arraw"></li>
<li class="list_xuanzhong">1. 查看购物车</li>
<li class="other_arraw"></li>
<li class="other_list">2. 确认订单信息</li>
<li class="other_arraw"></li>
<li class="other_list">3. 付款到支付宝</li>
<li class="other_arraw"></li>
<li class="other_list">4. 确认收货</li>
<li class="other_arraw"></li>
<li class="other_list">5. 评价</li>
</ul>
</div>
<div id="content">
<table id="shopping" width="100%" border="0" cellspacing="0" cellpadding="0" >
<form id="myform" action="" method="post">
<tr >
<td class="form1"><input id="allCheckBox" type="checkbox" value="" onclick="selectAll()"/>全选</td>
<td class="form2" colspan="2">店铺宝贝</td>
<td class="form3">获得积分</td>
<td class="form4">单价(元)</td>
<td class="form5">数量</td>
<td class="form6">小计(元)</td>
<td class="form7">操作</td>
</tr>
<tr>
<td class="line" colspan="8"></td>
</tr>
<tr>
<td colspan="8" class="shopInfo">店铺：<a href="#">纤巧百媚时尚鞋坊</a> 卖家：<a href="#">纤巧百媚</a> <img src="images/taobao_relation.jpg" alt="relation" /></td>
</tr>
<tr id="product1">
<td class="n1"><input name="checkBox" type="checkbox" value="product1" onclick="slectSingle()"/></td>
<td class="n2"><img src="images/taobao_cart_01.jpg" alt="shopping"/></td>
<td class="n3"><a href="#">日韩流行风时尚美眉最爱独特米字拼图金属坡跟公主靴子黑色</a><br /> 保障：<img src="images/taobao_icon_01.jpg" alt="icon" /></td>
<td class="n4">5</td>
<td class="n5">138.00</td>
<td class="n6"><img class="hand" src="images/taobao_minus.jpg" alt="minus" onclick="changeNum('num_1','minus')"/> <input id="num_1" type="text" value="1" class="num_input" readonly="readonly"/> <img class="hand" src="images/taobao_adding.jpg" alt="add" onclick="changeNum('num_1','add')" /></td>
<td class="n7"></td>
<td class="n8"><a href="javascript:deleteRow('product1');">删除</a></td>
</tr>
<tr>
<td colspan="8" class="shopInfo">店铺：<a href="#">香港我的美丽日记</a> 卖家：<a href="#">lokemick2009</a> <img src="images/taobao_relation.jpg" alt="relation" /></td>
</tr>
<tr id="product2">
<td class="n1"><input name="checkBox" type="checkbox" value="product2" onclick="slectSingle()"/></td>
<td class="n2"><img src="images/taobao_cart_02.jpg" alt="shopping"/></td>
<td class="n3"><a href="#">chanel/香奈尔/香奈尔炫亮魅力唇膏3.5g</a><br /> 保障：<img src="images/taobao_icon_01.jpg" alt="icon" /><img src="images/taobao_icon_02.jpg" alt="icon" /></td>
<td class="n4">12</td>
<td class="n5">265.00</td>
<td class="n6"><img class="hand" src="images/taobao_minus.jpg" alt="minus" onclick="changeNum('num_2','minus')"/> <input id="num_2" type="text" value="1" class="num_input" readonly="readonly"/> <img class="hand" src="images/taobao_adding.jpg" onclick="changeNum('num_2','add')" /></td>
<td class="n7"></td>
<td class="n8"><a href="javascript:deleteRow('product2');">删除</a></td>
</tr>
<tr>
<td colspan="8" class="shopInfo">店铺：<a href="#">实体经营</a> 卖家：<a href="#">林颜店铺</a> <img src="images/taobao_relation.jpg" alt="relation" /></td>
</tr>
<tr id="product3">
<td class="n1"><input name="checkBox" type="checkbox" value="product3" onclick="slectSingle()"/></td>
<td class="n2"><img src="images/taobao_cart_03.jpg" alt="shopping"/></td>
<td class="n3"><a href="#">蝶妆海晳蓝清滢粉底液10#（象牙白）</a><br /> 保障：<img src="images/taobao_icon_01.jpg" alt="icon" /><img src="images/taobao_icon_02.jpg" alt="icon" /></td>
<td class="n4">3</td>
<td class="n5">85.00</td>
<td class="n6"><img class="hand" src="images/taobao_minus.jpg" alt="minus" onclick="changeNum('num_3','minus')"/> <input id="num_3" type="text" value="1" class="num_input" readonly="readonly"/> <img class="hand" src="images/taobao_adding.jpg" onclick="changeNum('num_3','add')" /></td>
<td class="n7"></td>
<td class="n8"><a href="javascript:deleteRow('product3');">删除</a></td>
</tr>
<tr >
<td colspan="8" class="shopInfo">店铺：<a href="#">红豆豆的小屋</a> 卖家：<a href="#">taobao豆豆</a> <img src="images/taobao_relation.jpg" alt="relation"/></td>
</tr>
<tr id="product4">
<td class="n1"><input name="checkBox" type="checkbox" value="product4" onclick="slectSingle()" /></td>
<td class="n2"><img src="images/taobao_cart_04.jpg" alt="shopping"/></td>
<td class="n3"><a href="#">相宜促销专供 大S推荐 最好用的LilyBell化妆棉</a><br />
保障：<img src="images/taobao_icon_01.jpg" alt="icon" /></td>
<td class="n4">12</td>
<td class="n5">12.00</td>
<td class="n6"><img class"=hand" src="images/taobao_minus.jpg" alt="minus" onclick="changeNum('num_4','minus')" /> <input id="num_4" type="text" value="2" class="num_input" readonly="readonly"/> <img class="hand" src="images/taobao_adding.jpg" alt="add" onclick="changeNum('num_4','add')" /></td>
<td class="n7"></td>
<td class="n8"><a href="javascript:deleteRow('product4');">删除</a></td>
</tr>
<tr>
<td colspan="3"><a href="javascript:deleteSelectRow()"><img src="images/taobao_del.jpg" alt="delete"/></a></td>
<td class="shopend" colspan="5" >商品总价（不含运费）：<label id="total" class="yellow"></label> 元<br />
可获积分 <label class="yellow" id="integral"></label> 点<br />
<input name=" " type="image" src="images/taobao_subtn.jpg" /></td>
</tr>
</form>
</table>
</body>
</html>
|
| myCar.js: function totalprice(){
var price=0;
var num=0;
var jifen=0;
var date_table=document.getElementById("shopping"); //form不行，必须要table;table先画出表格，表格里在加入form
var tr=date_table.getElementsByTagName("tr");
for (var i=1;i<tr.length ;++i )
{
if(tr[i].getElementsByTagName("td").length>2&&
tr[i].getElementsByTagName("td")[0].getElementsByTagName("input")[0].checked)
//tr[i].getElementsByTagName("td")[0].firstChild.checked)
{
jifen1=tr[i].getElementsByTagName("td")[3].innerHTML;
price1=tr[i].getElementsByTagName("td")[4].innerHTML;
num1=tr[i].getElementsByTagName("td")[5].getElementsByTagName("input")[0].value;
jifen+=jifen1*num1;
price+=price1*num1;
tr[i].getElementsByTagName("td")[6].innerHTML=price1*num1;
}
}
document.getElementById("total").innerHTML=price;
document.getElementById("integral").innerHTML=jifen;
}
window.onload=totalprice; //自动调用
function selectAll(){
var selectall=document.getElementById("allCheckBox"); //这里找的是"allCheckBox",而不是allCheckBox
var checkbox=document.getElementsByName("checkBox");
if(true==selectall.checked){
for(var i=0;i<checkbox.length;++i){
checkbox[i].checked=true;
totalprice();
}
}
else{
for(var i=0;i<checkbox.length;++i){
if(checkbox[i].checked)
{
checkbox[i].checked=!(checkbox[i].checked);
totalprice();
}
}
}
}
function slectSingle(){ //注意
var selected=document.getElementsByName("checkBox");
totalprice();
var flag=0;
for (var i=0;i< selected.length; ++i)
{
if(false==selected[i].checked)
{
flag=1;
break;
}
}
if(0==flag)
document.getElementById("allCheckBox").checked=true;
else
document.getElementById("allCheckBox").checked=false;
}
function changeNum(num_1,flag){
var click_obj=document.getElementById(num_1);
var value=click_obj.value; //其实得到的是文本1
if("add"==flag)
{
//value+=1; //这里当做字符串来处理,结果11
value=parseInt(value)+1;
click_obj.value=value;
totalprice();
}
else
{
if(click_obj.value<=1)
{
alert("products' number can not less than 1");
//alert("商品数量不能小于等于1");
return;
}
else
{
value=parseInt(value)-1;
click_obj.value=value;
totalprice();
}
}
}
function deleteRow(rowId) //重点,网页传参,getElementById就不能引号起来
//不带引号标识变量 ，带引号是一个值;如果是数字，需要var temp=数字，然后test(temp);
//所以网页传ID要加引号，因为我们这边只要那个值，而不要对象；不然这边拿到的是对象；
{
//var delrow=rowId.rowIndex; //网页不加引号；
var delrow=document.getElementById(rowId).rowIndex;
document.getElementById("shopping").deleteRow(delrow);
document.getElementById("shopping").deleteRow(delrow-1)
totalprice();
}
function deleteSelectRow(){
var oInput=document.getElementsByName("checkBox");
var index;
for (var i= oInput.length-1;i>0;i-- )
{
if(oInput[i].checked==true)
{
index=document.getElementById(oInput[i].value).rowIndex; /*获取选中行的索引号*/
document.getElementById("shopping").deleteRow(index);
document.getElementById("shopping").deleteRow(index-1);
}
}
totalprice();
}
|
| myCar.css: body{
margin:5px;
padding:0px;
font-size:12px;
line-height:20px;
color:#333;
}
div{
margin:10px auto 10px auto; //这里一定要设置，才能让div居中的时候所有元素一起居中
width:800px;
}
#header{
height:40px;
width:800px;
padding:10px;
}
a{
text-decoration:none;
color:#1965b3;
}
a:hover{
text-decoration: underline;
color: green;
}
ul,li{
list-style:none;
margin:0px;
padding:0px;
}
img{
border:0px;
vertical-align :middle;
}
#list{
margin:margin:5px 5px;
width:800px;
clear:both;
}
#list li{
float:left;
height:23px;
margin:10px auto 10px auto;
line-height:26px;
}
li.oxuanzhong_arraw{
background-image:url(../images/taobao_bg.png);
background-repeat:no-repeat;
background-position:-12px -92px;
width:3px;
}
li.list_xuanzhong{
background-color:#ff6600;
text-align:center;
font-size:14px;
font-weight:bold;
color:#FFF;
width:130px;
}
li.other_arraw{
background-color:#ff6600;
background-image:url(../images/taobao_bg.png);
background-repeat:no-repeat;
background-position:0px 0px;
width:13px;
}
li.other_list{
background-color:#e4e4e4;
text-align:center;
font-size:14px;
font-weight:bold;
width:150px;
}
#content{
width:800px;
clear:both;
}
tr,td{
text-align:left;
}
td.line{
background-color:#a7cbff;
height: 5px;
}
td.shopInfo{
padding-left:10px;
height:23px;
vertical-align:bottom;
text-align:left;
}
#content{
width:800px;
clear:both;
}
input.num_input{
border:solid 1px #666;
width:15px;
height:15px;
}
td.n1,td.n2,td.n3,td.n4,td.n5,td.n6,td.n7,td.n8{
background-color:#e2f2ff;
border-bottom:solid 1px #d1ecff;
border-top:solid 1px #d1ecff;
text-align:center;
padding:5px;
}
td.n1,td.n3,td.n4,td.n5,td.n6,td.n7,td.n8{
border-right:solid 1px #FFF;
}
img.hand{
cursor:pointer;
}
td.shopend{
text-align:right;
padding-right:10px;
padding-bottom:10px;
}
td.yellow{
font-weight:bold;
color:#fe6400;
font-size:18px;
line-height:40px;
}
|
