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

随机推荐

Day19 客户关系系统实战
day19 今日内容 Service事务客户关系管理系统 Service事务在Service中使用ThreadLocal来完成事务,为将来学习Spring事务打基础! 1 DAO中的事务 ...
mysql 数据操作单表查询 group by 聚合函数
强调: 如果我们用unique的字段作为分组的依据,则每一条记录自成一组,这种分组没有意义多条记录之间的某个字段值相同,该字段通常用来作为分组的依据如果按照每个字段都是唯一的进行分组,意味着按照这 ...
Spring Boot 全局异常配置
Spring Boot 全局异常配置,处理异常控制器需要和发生异常的方法在一个类中.使用 ControllerAdvice 注解 package com.li.controller; import o ...
samba文件共享服务配置(multiuser机制)二（共两节）
smb客户端的multiuser挂载技术 --管理员只需要作一次挂载 --客户端在访问挂载点时,若需要不同权限,可临时切换新的共享用户[无需重新挂载] 实现方式 --挂载smb共享时启用multius ...
学习Mysql的记录贴记录的内容是指令的试用
前言:操作系统是WIn7 64位旗舰版 ,Mysql的版本是mysql-5.7.10-winx64 是社区版就是所谓的最后的免费版本. 下载后解压然后配置my.ini文件. ××××××× ...
Excel error 64-bit version of SSIS
问题是在windows server 2008 64位的计划任务执行 ssis 的错误 ,ssis你们带有读取excel 日期 2015/3/17 11:50:34日志作业历史记录 (SSIS_U ...
Action<>和Func<> 区别
其实他们两个都是委托[代理]的简写形式. 一.[action<>]指定那些只有输入参数,没有返回值的委托 Delegate的代码: public delegate void myDeleg ...
Java实现动态规划法求解0/1背包问题
摘要: 使用动态规划法求解0/1背包问题. 难度: 初级 0/1背包问题的动态规划法求解,前人之述备矣,这里所做的工作,不过是自己根据理解实现了一遍,主要目的还是锻炼思维和编程能力,同时,也是为了增进 ...
【运维技术】slc pm 启动不了，异常排除问题记录
问题描述 slc pm 启动的时候报错如下: [root@iZuf61qpjpeuqc5mjo4kn8Z lixiang-scf-web]# slc pm strong-remoting deprec ...
loj2163 / bzoj2212 / P3521 [POI2011]ROT-Tree Rotations（线段树合并）
P3521 [POI2011]ROT-Tree Rotations loj2163 [POI2011]ROT-Tree Rotations(数据加强) (loj的数据套了个fread优化才过...) ...

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

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

随机推荐

热门专题