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>

<head>

<title>淘宝购物车</title>

</head>

<body >

<div id="two">您的位置：<a href="https://www.baidu.com">首页</a> > <a href="https://www.taobao.com">我的淘宝</a> > 我的购物车</div>

<ul>

<li class="list_xuanzhong">1. 查看购物车</li>

<li class="other_list">2. 确认订单信息</li>

<li class="other_list">3. 付款到支付宝</li>

</ul>

</div>

<tr >

</tr>

<tr>

</tr>

<tr>

<td colspan="8" class="shopInfo">店铺：<a href="#">纤巧百媚时尚鞋坊</a> 卖家：<a href="#">纤巧百媚</a> <img src="images/taobao_relation.jpg" alt="relation" /></td>

</tr>

<td class="n3"><a href="#">日韩流行风时尚美眉最爱独特米字拼图金属坡跟公主靴子黑色</a><br /> 保障：<img src="images/taobao_icon_01.jpg" alt="icon" /></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>

<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>

</tr>

<tr>

</tr>

<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>

</tr>

<tr >

<td colspan="8" class="shopInfo">店铺：<a href="#">红豆豆的小屋</a> 卖家：<a href="#">taobao豆豆</a> <img src="images/taobao_relation.jpg" alt="relation"/></td>

</tr>

<td class="n3"><a href="#">相宜促销专供大S推荐最好用的LilyBell化妆棉</a><br />

保障：<img src="images/taobao_icon_01.jpg" alt="icon" /></td>

</tr>

<tr>

可获积分 <label class="yellow" id="integral"></label> 点<br />

</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;

}

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 模仿淘宝购物车功能(删除选择商品,商品计算,选择, 全选反选,商品数量加减等) 看看效果图 ...

随机推荐

find the safest road---hdu1596(最短路模板求最大概率)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1596 求给定的任意两点之间的最大安全概率,概率之间是相乘的关系,所以注意初始化即可 #include& ...
jquery序列化表单以及回调函数的使用
在开发项目中.将前台的值传给后台,有时的JSP表单中的值有一两个,也有所有的值,假设这时一个个传,必然不是非常好的办法,所以使用jQuery提供的表单序列化方法,能够非常好的解决问题.同一时候能够封装 ...
Myeclipse文档注释如何提炼（导出）成自己的API帮助文档？
第一步: 源码注释规范,一定要用/** 两个*这一特殊的注释.注释上可以添加@author等特殊说明,下图是部分 javadoc 标记信息,可以根据需要选用. 第二步: 确保整个工程的项目都添加 ...
spring登录验证拦截器和根据用户角色登录
大家都知道spring的用户登录拦截器,确实省去了程序员不少的精力,下面说说我在项目中使用的感受. 德安微信管理后台是管理多个微信帐号的平台,登录到平台的用户有三个角色,游客和微信帐号管理员.超级管理 ...
CentOS 7 SSH 免密登录的方法
先决条件 3 台 CentOS 7 HOSTNAME IP ROLE server1 10.8.26.197 Master server2 10.8.26.196 Slave1 server3 10. ...
VS2010/MFC编程入门之二十九（常用控件：列表视图控件List Control 下）
上一节是关于列表视图控件List Control的上半部分,简单介绍了列表视图控件,其通知消息的处理和有关结构体的定义.本节继续讲解下半部分,包括列表视图控件的创建.CListCtrl类的主要成员函数 ...
centos远程访问mssql数据库
http://blog.path8.net/archives/5921.html http://www.jaggerwang.net/2013/03/18/centos%E4%B8%8B%E5%AE% ...
《Python网络编程基础》第四章域名系统
域名系统(DNS) 是一个分布式的数据库,它主要用来把主机名转换成IP地址.DNS以及相关系统之所以存在,主要有以下两个原因: 它们可以使人们比较容易地记住名字,如www.baidu.com. 它 ...
docker 容器目录挂载 | 进出容器
docker run --name wnginx -d -p 9001:80 -v /home/www:/usr/share/nginx/html nginx --name 别名 -d ...
Vue-cli proxyTable 解决开发环境的跨域问题
Vue-cli proxyTable 解决开发环境的跨域问题 proxyTable: { '/list': { target: 'http://api.xxxxxxxx.com', pathRewri ...

web——自己实现一个淘宝购物车页面

web——自己实现一个淘宝购物车页面的更多相关文章

随机推荐

热门专题