web——自己实现一个淘宝购物车页面
body, table{font-family: 微软雅黑; font-size: 10pt}
table{border-collapse: collapse; border: solid gray; border-width: 2px 0 2px 0;}
th{border: 1px solid gray; padding: 4px; background-color: #DDD;}
td{border: 1px solid gray; padding: 4px;}
tr:nth-child(2n){background-color: #f8f8f8;}
| 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;
}
|
web——自己实现一个淘宝购物车页面的更多相关文章
- 淘宝购物车页面 智能搜索框Ajax异步加载数据
如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...
- 淘宝购物车页面 PC端和移动端实战
最近花了半个月的时间,做了一个淘宝购物车页面的Demo.当然,为了能够更加深入的学习,不仅仅有PC端的固定宽度的布局,还实现了移动端在Media Query为768px以下(也就是实现了ipad,ip ...
- Vue(小案例_vue+axios仿手机app)_购物车（二模拟淘宝购物车页面，点击加减做出相应变化）
一.前言 在上篇购物车中,如果用户刷新了当前的页面,底部导航中的数据又会恢复为原来的: 1.解决刷新,购物车上数值不变 ...
- jquery仿淘宝购物车页面商品结算（附源码）
1.效果图如下: 2.源码如下: html部分: <!doctype html> <html lang="en"> <head> <met ...
- jquery模拟淘宝购物车
今天要实现的一个功能页面就是利用jquery代码模拟一个淘宝网的购物车结算页面 总体页面效果如图: 首先我们要实现的内容的需求有如下几点: 1.在购物车页面中,当选中“全选”复选框时,所有商品前的复选 ...
- 仿淘宝购物车demo---增加和减少商品数量
在上一篇博客中,小编简单的介绍了如何使用listview来实现购物车,但是仅仅是简单的实现了列表的功能,随之而来一个新的问题,买商品的时候,我们可能不止想买一件商品,想买多个,或许有因为某种原因点错了 ...
- jQuery实现淘宝购物车小组件
我爱撸码,撸码使我感到快乐! 大家好,我是Counter,本章将实现淘宝购物车小组件, 用原生js可以实现吗,当然可以,可是就是任性一回,就是想用jQuery 来实现下.HTML代码不多才4行,CSS ...
- ASP.NET之AdRotator实现淘宝浏览页面的商品随机推荐功能
如今随便上个网都能够看到淘宝.京东等各大电商平台的双十一购物狂欢宣传,从2009年開始淘宝愣是把11.11这一天打造成了全民购物狂欢节.阿里巴巴的上市更是激发了阿里人的斗志,据说他们今年的目标是100 ...
- android ------ RecyclerView 模仿淘宝购物车
电商项目中常常有购物车这个功能,做个很多项目了,都有不同的界面,选了一个来讲一下. RecyclerView 模仿淘宝购物车功能(删除选择商品,商品计算,选择, 全选反选,商品数量加减等) 看看效果图 ...
随机推荐
- virtIO之VHOST工作原理简析
2017-07-19 一.前言 之前有分析过虚拟化环境下virtIO的实现,virtIO相关于传统的虚拟IO在性能方面的确提高了不少,但是按照virtIO虚拟网卡为例,每次虚拟机接收数据包的时候,数据 ...
- Day06 DOM4J&schema介绍&xPath
day06总结 今日内容 XML解析之JAXP( SAX ) DOM4J Schema 三.XML解析器介绍 操作XML文档概述 1 如何操作XML文档 XML文档也是数据的一种,对数据的 ...
- Java系列介绍
Java系列目录 重新编写equals()方法,hashCode()方法,以及toString(),提供自定义的相等标准,以及自描述函数 Java 7新增功能 Java应用程序中System.out. ...
- PAT 1114 Family Property[并查集][难]
1114 Family Property(25 分) This time, you are supposed to help us collect the data for family-owned ...
- （2）Mac环境搭建
创建HelloWorld项目 将刚才下载的压缩包解压到你指定的文件夹里. 进入到目录cocos2d-x-3.2alpha0/tools/cocos2d-console/bin/cocos.py 打开终 ...
- 推荐一个js脚本的字体拟合模型
推荐一个js脚本的字体拟合模型 http://r3mi.github.io/poly2tri.js/ 推荐一个js脚本的字体拟合模型 http://r3mi.github.io/poly2tri. ...
- linux第七章读书笔记
Vim编辑器 Vim 仅仅通过键盘来在插入和执行命令等多种模式之间切换.这使得Vim可以不用进行菜单或者鼠标操作,并且最小化组合键的操作,对文字录入员或者程序员可以大大增强速度和效率. CHAPTER ...
- Cooperation.GTST团队第二周项目总结
项目进展 这周我们把工作主要放在了UI界面的实现上,为了让整款APP看上去能够更加高大上,我们决定采用Android 5.0开始推出的一个Material Design风格的导航控件Toolbar. ...
- 经查-- git使用报错及解决办法
git push 错误 error: failed to push some refs to 'git@github.com:charblus/ ...' 本地和远程的文件应该合并后才能上传本地的新文 ...
- Maven .m2文件夹创建
settings.xml存在于两个地方: 1.安装的地方:$M2_HOME/conf/settings.xml 2.用户的目录:${user.home}/.m2/settings.xml 前者又被叫做 ...