<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>淘寶購物車頁面</title>
<style type="text/css">
body {
margin:0px;
padding:0px;
font-size:12px;
line-height:20px;
color:#333;
}
ul, li, ol, h1, dl, dd {
list-style:none;
margin:0px;
padding:0px;
}
a {
color:#1965b3;
text-decoration: none;
}
a:hover {
color:#CD590C;
text-decoration:underline;
}
img {
border:0px;
vertical-align:middle;
}
#header {
height:40px;
margin:10px auto 10px auto;
width:800px;
clear:both;
}
#nav {
margin:10px auto 10px auto;
width:800px;
clear:both;
}
#navlist {
width:800px;
margin:0px auto 0px auto;
height:23px;
}
#navlist li {
float:left;
height:23px;
line-height:26px;
}
.navlist_red_left {
background-image:url(images/taobao_bg.png);
background-repeat:no-repeat;
background-position:-12px -92px;
width:3px;
}
.navlist_red {
background-color:#ff6600;
text-align:center;
font-size:14px;
font-weight:bold;
color:#FFF;
width:130px;
}
.navlist_red_arrow {
background-color:#ff6600;
background-image:url(images/taobao_bg.png);
background-repeat:no-repeat;
background-position:0px 0px;
width:13px;
}
.navlist_gray {
background-color:#e4e4e4;
text-align:center;
font-size:14px;
font-weight:bold;
width:150px;
}
.navlist_gray_arrow {
background-color:#e4e4e4;
background-image:url(images/taobao_bg.png);
background-repeat:no-repeat;
background-position:0px 0px;
width:13px;
}
.navlist_gray_right {
background-image:url(images/taobao_bg.png);
background-repeat:no-repeat;
background-position:-12px -138px;
width:3px;
}
#content {
width:800px;
margin:10px auto 5px auto;
clear:both;
}
.title_1 {
text-align:center;
width:50px;
}
.title_2 {
text-align:center;
}
.title_3 {
text-align:center;
width:80px;
}
.title_4 {
text-align:center;
width:80px;
}
.title_5 {
text-align:center;
width:100px;
}
.title_6 {
text-align:center;
width:80px;
}
.title_7 {
text-align:center;
width:60px;
}
.line {
background-color:#a7cbff;
height:3px;
}
.shopInfo {
padding-left:10px;
height:35px;
vertical-align:bottom;
}
.num_input {
border:solid 1px #666;
width:25px;
height:15px;
text-align:center;
}
.cart_td_1, .cart_td_2, .cart_td_3, .cart_td_4, .cart_td_5, .cart_td_6, .cart_td_7, .cart_td_8 {
background-color:#e2f2ff;
border-bottom:solid 1px #d1ecff;
border-top:solid 1px #d1ecff;
text-align:center;
padding:5px;
}
.cart_td_1, .cart_td_3, .cart_td_4, .cart_td_5, .cart_td_6, .cart_td_7 {
border-right:solid 1px #FFF;
}
.cart_td_3 {
text-align:left;
}
.cart_td_4 {
font-weight:bold;
}
.cart_td_7 {
font-weight:bold;
color:#fe6400;
font-size:14px;
}
.hand {
cursor:pointer;
}
.shopend {
text-align:right;
padding-right:10px;
padding-bottom:10px;
}
.yellow {
font-weight:bold;
color:#fe6400;
font-size:18px;
line-height:40px;
}
</style>
</head>
<body>
<div id="header"><img src="images/taobao_logo.gif" alt="logo" /></div>
<div id="nav">您的位置：<a href="#">首頁</a> > <a href="#">我的淘寶</a> > 我的購物車</div>
<div id="navlist">
<ul>
<li class="navlist_red_left"></li>
<li class="navlist_red">1. 查看購物車</li>
<li class="navlist_red_arrow"></li>
<li class="navlist_gray">2. 確認訂單信息</li>
<li class="navlist_gray_arrow"></li>
<li class="navlist_gray">3. 付款到支付寶</li>
<li class="navlist_gray_arrow"></li>
<li class="navlist_gray">4. 確認收貨</li>
<li class="navlist_gray_arrow"></li>
<li class="navlist_gray">5. 評價</li>
<li class="navlist_gray_right"></li>
</ul>
</div>
<div id="content">
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="shopping">
<form action="" method="post" name="myform">
<tr>
<td class="title_1"><input id="allCheckBox" type="checkbox" value="" onclick="checkAll(this.checked)" />
全選</td>
<td class="title_2" colspan="2">店鋪寶貝</td>
<td class="title_3">獲積分</td>
<td class="title_4">單價（元）</td>
<td class="title_5">數量</td>
<td class="title_6">小計（元）</td>
<td class="title_7">操作</td>
</tr>
<tr>
<td colspan="8" class="line"></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="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product1" name="product"/></td>
<td class="cart_td_2"><img src="images/taobao_cart_01.jpg" alt="shopping"/></td>
<td class="cart_td_3"><a href="#">日韓流行風時尚美眉最愛獨特米字拼圖金屬坡跟公主靴子黑色</a><br />
顏色：棕色 尺碼：37<br />
保障：<img src="images/taobao_icon_01.jpg" alt="icon" /></td>
<td class="cart_td_4">5</td>
<td class="cart_td_5">138.00</td>
<td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" onclick="changeNum('num_1','minus')" class="hand"/>
<input id="num_1" type="text" value="1" class="num_input" readonly="readonly"/>
<img src="images/taobao_adding.jpg" alt="add" onclick="changeNum('num_1','add')" class="hand"/></td>
<td class="cart_td_7"></td>
<td class="cart_td_8"><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="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product2" /></td>
<td class="cart_td_2"><img src="images/taobao_cart_02.jpg" alt="shopping"/></td>
<td class="cart_td_3"><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="cart_td_4">12</td>
<td class="cart_td_5">265.00</td>
<td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" onclick="changeNum('num_2','minus')" class="hand"/>
<input id="num_2" type="text" value="1" class="num_input" readonly="readonly"/>
<img src="images/taobao_adding.jpg" alt="add" onclick="changeNum('num_2','add')" class="hand"/></td>
<td class="cart_td_7"></td>
<td class="cart_td_8"><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="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product3" /></td>
<td class="cart_td_2"><img src="images/taobao_cart_03.jpg" alt="shopping"/></td>
<td class="cart_td_3"><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="cart_td_4">3</td>
<td class="cart_td_5">85.00</td>
<td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" onclick="changeNum('num_3','minus')" class="hand"/>
<input id="num_3" type="text" value="1" class="num_input" readonly="readonly"/>
<img src="images/taobao_adding.jpg" alt="add" onclick="changeNum('num_3','add')" class="hand"/></td>
<td class="cart_td_7"></td>
<td class="cart_td_8"><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="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product4" /></td>
<td class="cart_td_2"><img src="images/taobao_cart_04.jpg" alt="shopping"/></td>
<td class="cart_td_3"><a href="#">相宜促銷專供 大S推薦 最好用的LilyBell化妝棉</a><br />
保障：<img src="images/taobao_icon_01.jpg" alt="icon" /></td>
<td class="cart_td_4">12</td>
<td class="cart_td_5">12.00</td>
<td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" onclick="changeNum('num_4','minus')" class="hand"/>
<input id="num_4" type="text" value="2" class="num_input" readonly="readonly"/>
<img src="images/taobao_adding.jpg" alt="add" onclick="changeNum('num_4','add')" class="hand"/></td>
<td class="cart_td_7"></td>
<td class="cart_td_8"><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 colspan="5" class="shopend">商品總價（不含運費）：
<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>
</div>
<script type="text/javascript">
//改變選購商品的數量
function changeNum(numId,flag){
var num = document.getElementById(numId);
if("minus"==flag){ //表示減少數量
if(num.value > 1){
num.value = parseInt(num.value)-1;
}else{
return false;
}
}else{ //表示增加數量
num.value = parseInt(num.value)+1;
}
calcTotal();
}
/*自動計算商品的總金額和積分*/
function calcTotal(){
var score, //積分
price, //價格
number, //數量
totalScore = 0, //總積分
total = 0; //總金額
var myTableTr = document.getElementById("shopping").getElementsByTagName("tr");
if(myTableTr.length > 0){
for(var i=1; i<myTableTr.length; i++){
if(myTableTr[i].getElementsByTagName("td").length > 2){
score = myTableTr[i].getElementsByTagName("td")[3].innerHTML;
price = myTableTr[i].getElementsByTagName("td")[4].innerHTML;
number = myTableTr[i].getElementsByTagName("td")[5].getElementsByTagName("input")[0].value;
myTableTr[i].getElementsByTagName("td")[6].innerHTML = price * number;
totalScore += score * number;
total += price * number;
}
}
document.getElementById("total").innerHTML = total;
document.getElementById("integral").innerHTML = totalScore;
}
}
window.onload = calcTotal;
//全選和全不選效果
function checkAll(boolValue){
var arr = document.getElementsByName("cartCheckBox");
for(var i=0;i<arr.length;i++){
arr[i].checked = boolValue;
}
}
//刪除單行商品
function deleteRow(rowId){
//獲取當前行的索引號
var index = document.getElementById(rowId).rowIndex;
document.getElementById("shopping").deleteRow(index);
document.getElementById("shopping").deleteRow(index-1);
calcTotal();
}
//刪除選中行的商品
function deleteSelectRow(){
var checkArr = document.getElementsByName("cartCheckBox");
for(var i=checkArr.length-1; i>=0; i--){
//獲取選中行的索引號
var index = document.getElementById(checkArr[i].value).rowIndex;
if(checkArr[i].checked == true){
document.getElementById("shopping").deleteRow(index);
document.getElementById("shopping").deleteRow(index-1);
}
}
calcTotal();
}
</script>
</body>
</html>
效果圖：
個人E-mail：chaoyi[email protected]163.com