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

随机推荐

Java API操作HA方式下的Hadoop
通过java api连接Hadoop集群时,如果集群支持HA方式,那么可以通过如下方式设置来自动切换到活动的master节点上.其中,ClusterName 是可以任意指定的,跟集群配置无关,dfs. ...
PAT 1043 Is It a Binary Search Tree[二叉树][难]
1043 Is It a Binary Search Tree(25 分) A Binary Search Tree (BST) is recursively defined as a binary ...
js事件处理-整理
 <!DOCTYPE html> <html> <hea ...
Java基础知识陷阱(十)
本文发表于本人博客. 上个星期由于时间比较紧所以未能继续写下去,今天再接再厉,专心 + 坚持这样离目标就越来越近了!废话少说说正题,今天我们还是来说说java中比较基础的知识,大家知道编写java程序 ...
Mail.Ru Cup 2018 Round 2 Solution
A. Metro Solved. 题意: 有两条铁轨,都是单向的,一条是从左往右,一条是从右往左,Bob要从第一条轨道的第一个位置出发,Alice的位置处于第s个位置,有火车会行驶在铁轨上,一共有n个 ...
jqGrid有关问题小知识点
为每一行添加查看按钮并且调整行高 gridComplete:function(taskDatas){ //在此事件中循环为每一行添加修改和删除链接 $( ".autotip&quo ...
python webdriver 登录163邮箱发邮件加附件，外加数据和程序分离，配置文件的方式
配置文件:UiObjectMapSendMap.ini用来存放配置信息 GetOptionSendMail.py 用来读取配信息 #encoding=utf-8from selenium.webdri ...
SQL学习笔记七之MySQL视图、触发器、事务、存储过程、函数
阅读目录一视图二触发器三事务四存储过程五函数六流程控制一视图视图是一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需使用[名 ...
P1174 打砖块
P1174 打砖块普通分组背包:50pts 题解说的啥????(大雾) 看了半天 $s[0/1][i][j]$表示第$i$列用$j$发子弹,最后一发是1/否0打在该列上的价值 $f[0/1][i][ ...
IPv4数据报格式
网络层的分组为数据报,数据报为首部和数据两部分组成,如下图所示. 首部的长度是以4个字节为单位,长度可以是20-60字节,这跟首部的HLEN字段有关. 版本: 这个4位字段定义了IP协议的版本,目前主 ...

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

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

随机推荐

热门专题