<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：chaoyi77@163.com
相关推荐
在本项目中，"jQuery淘宝购物车页面商品结算"是一个典型的电商网站功能的实现，主要目的是让学生或开发者学习如何利用jQuery技术构建一个类似淘宝购物车的结算系统。在这个过程中，我们将涉及HTML结构、CSS样式以及...
在本项目"jQuery淘宝购物车页面商品结算代码.zip"中，我们主要探讨的是如何使用JavaScript的jQuery库来实现一个类似于淘宝购物车的商品结算功能。这个功能通常包括选择商品、更改商品数量、计算总价以及显示结算信息...
实现效果： 原生js仿淘宝购物车页面，通过原生js实现淘宝购物车的效果，点击加减，数量的变化以及总价的变化，非常适合一些电商网站或者大型商城，php中文网推荐下载！
原生JavaScript淘宝购物车页面模板特效是一个典型的前端开发示例，它主要展示了如何利用JavaScript实现一个功能完善的购物车系统。这个项目可能包含HTML结构、CSS样式以及JavaScript逻辑，旨在帮助开发者学习和理解...
在构建一个原生JavaScript实现的淘宝购物车页面时，我们需要关注以下几个关键知识点： 1. **DOM操作**：原生JS中的DOM（文档对象模型）操作是页面动态交互的基础。我们需要用`document.getElementById`, `document....
【淘宝购物车页面源码分析】 在这个实验中，我们探讨的是淘宝购物车页面的源代码，这对于我们理解电商网站的设计原理、前端开发技术以及交互体验的优化等方面具有重要的学习价值。淘宝作为中国最大的在线购物平台之...
【标题】：“多年以前的淘宝购物车页面.zip”是一个压缩包文件，其中包含了早期版本的淘宝网购物车页面的相关代码和资源。这个压缩包可能是为了回顾、研究或者教学目的而提供的，让我们有机会了解淘宝购物车功能的...
以上是实现"淘宝购物车页面效果"所需的主要技术点，通过合理组织HTML结构，精细设计CSS样式，以及编写JavaScript代码来处理用户交互和业务逻辑，可以构建出一个功能完备且用户体验良好的购物车页面。
在本项目中，“原生JS淘宝购物车页面.zip”是一个包含使用纯JavaScript（原生JS）编写的示例代码，用于实现类似淘宝购物车功能的Web页面。这个压缩包可能包含HTML、CSS和JavaScript文件，展示了如何利用JavaScript来...
原生JavaScript淘宝购物车页面是一个基于纯JavaScript实现的电商应用示例，主要涵盖了前端开发中的常见技术与设计模式。在创建这样一个页面时，开发者需要掌握以下几个核心知识点： 1. **DOM操作**：JavaScript是...
本项目“仿照淘宝购物车前端页面设计”旨在训练开发者如何创建一个类似淘宝购物车的功能性页面，提供用户友好的体验。下面将详细讨论这个项目中涉及的关键知识点。 1. HTML 结构设计： - 商品列表：使用`<ul>`或`...
【淘宝购物车界面HTML】是一个典型的前端开发案例，主要展示了如何使用HTML5和JavaScript技术来构建一个具有实际功能的电商购物车页面。这个项目涵盖了多种关键的前端知识点，包括HTML结构设计、CSS样式布局以及...
在本项目中，我们主要探讨的是如何利用Python编程语言实现淘宝购物车的秒杀与自动结算功能。这个项目对于那些想要自动化购物过程，特别是在抢购活动中快速下单的用户来说非常实用。以下是对该项目的详细解释： 1. *...
这个压缩包主要展示了如何使用原型工具 Axure 来创建逼真的淘宝购物车页面和相关功能。下面我们将深入探讨相关知识点： 1. **Axure 原型设计**：Axure 是一款广泛使用的原型设计工具，它允许设计师通过拖拽组件、...
在HTML实现仿淘宝购物车功能的过程中，我们主要关注以下几个核心知识点： 1. **HTML结构**：首先，构建购物车页面的HTML结构至关重要。这通常包括商品列表、购物车图标、商品选择框、数量调整器、总价显示等元素。...
本示例中，我们探讨的主题是“原生JS实现的淘宝购物车页面模板特效”，它涉及到JavaScript的基础知识，DOM操作，事件处理，以及一些基本的计算逻辑。下面我们将深入解析这个主题。 首先，"原生JS"意味着不依赖任何...
原生JS淘宝购物车页面模板是一个基于JavaScript实现的前端项目，它主要用于展示如何利用JavaScript来构建类似淘宝购物车的功能。这个模板通常包含HTML结构、CSS样式以及JavaScript代码，旨在帮助开发者学习和理解...
在本项目中，"淘宝页面最新版（HTML+CSS）.zip" 提供了一个学习和实践HTML和CSS的实例，特别适用于初学者了解如何将这两种技术结合以构建一个实际的网页——这里是淘宝网的首页。这个压缩包包含了必要的HTML文件和...
本资源"jQuery淘宝直播底部购物车代码.zip"提供了一个实现淘宝直播底部购物车功能的示例，适用于网页开发人员想要在自己的电商平台上添加类似互动效果时参考。 该代码的核心功能是当用户点击购物车图标时，会弹出一...