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

随机推荐

【Python】通过python代码实现demo_test环境的登录，通过csv/txt/excel文件批量添加课程并开启课程操作--（刚开始项目页面模块元素这种鸟被称作pageobject 等这些搞完然后把你的定位器、数据和脚本在分离就是传说中那个叫数据驱动的鸟）
一.1.通过csv文件批量导入数据 1 from selenium import webdriver from time import ctime,sleep import csv #循环读取每一行每 ...
国内比特币bitcoin交易平台
火币网: www.huobi.com 比特币中国: www.btcchina.com okcoin: www.okcoin.cn 中国比特币: www.chbtc.com 比特币交易 ...
用Python实现的数据结构与算法：队列
一.概述队列(Queue)是一种先进先出(FIFO)的线性数据结构,插入操作在队尾(rear)进行,删除操作在队首(front)进行. 二.ADT 队列ADT(抽象数据类型)一般提供以下接口: Qu ...
POJ3233:Matrix Power Series(矩阵快速幂+二分）
http://poj.org/problem?id=3233 题目大意:给定矩阵A,求A + A^2 + A^3 + … + A^k的结果(两个矩阵相加就是对应位置分别相加).输出的数据mod m.k ...
Linux光标移动异常
刚刚安装完毕CentOS7.5,进行基础优化来着,发现我的光标具有如下神奇的故障. 无法移动到头部? 刚开始还以为是ISO镜像的问题,后校验了阿里云官网镜像的MD5值,和本地镜像MD5对比之后, 发现 ...
深入理解Nginx
nginx概述 nginx是一款自由的.开源的.高性能的HTTP服务器和反向代理服务器:同时也是一个IMAP.POP3.SMTP代理服务器:nginx可以作为一个HTTP服务器进行网站的发布处理,另外 ...
本地blast的安装
1 下载程序在ftp://ftp.ncbi.nlm.nih.gov/blast/executables/blast+/LATEST/下载 ncbi-blast-2.2.25+-x64-linux.t ...
sql server 将时间中的时分秒改为00:00:00
select convert(varchar(10),getdate(),120
ACM ICPC, Damascus University Collegiate Programming Contest(2018) Solution
A:Martadella Stikes Again 水. #include <bits/stdc++.h> using namespace std; #define ll long lon ...
20155334 2016-2017-2 《Java程序设计》第七周学习总结
20155334 2016-2017-2 <Java程序设计>第七周学习总结教材学习内容总结第十二章:Lambda 认识Lammbda语法 Lambda去可以重复,符合DRY原则,而且 ...

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

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

随机推荐

热门专题