javascript项目实战之原生js模拟淘宝购物车
通过JavaScript实现类似与淘宝的购物车效果，包括商品的单选、全选、删除、修改数量、价格计算、数目计算、预览等功能的实现。实现的效果图：
相应的代码：
shoppingCart.html
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>JavaScript实现购物车项目实战</title>
<link rel="stylesheet" type="text/css" href="./css/shoppingCart.css">
<script type="text/javascript" src="./js/shoppingCart.js"></script>
</head>
<body>
<table id="cartTable">
<thead>
<tr class="order_content">
<th><input class="check_all check" type="checkbox"></input> 全选</th>
<th>商品</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr class="order_content">
<td class="check"><input class = "check_one check" type="checkbox"></input></td>
<td class="goods"><img src="./imgs/apple6s.png"><span>Iphone 6S</span></td>
<td class="price">5099.88</td>
<td class="count">
<span class="reduce">-</span>
<input class="count_input" type="text" value="1"></input>
<span class="add">+</span>
</td>
<td class="subtotle">5099.88</td>
<td class="operation"><span class="delete">删除<span></td>
</tr>
<tr class="order_content">
<td class="check"><input class = "check_one check" type="checkbox"></input></td>
<td class="goods"><img src="./imgs/macbook.png"><span>MacBook Air</span></td>
<td class="price">1099.99</td>
<td class="count">
<span class="reduce">-</span>
<input class="count_input" type="text" value="1"></input>
<span class="add">+</span>
</td>
<td class="subtotle">1099.99</td>
<td class="operation"><span class="delete">删除<span></td>
</tr>
<tr class="order_content">
<td class="check"><input class = "check_one check" type="checkbox"></input></td>
<td class="goods"><img src="./imgs/ipadmini.png"><span>Ipad mini2 银16g WLAN7.9英寸</span></td>
<td class="price">6599.00</td>
<td class="count">
<span class="reduce">-</span>
<input class="count_input" type="text" value="1"></input>
<span class="add">+</span>
</td>
<td class="subtotle">6599.00</td>
<td class="operation"><span class="delete">删除<span></td>
</tr>
<tr>
<td class="check"><input class = "check_one check" type="checkbox"></input></td>
<td class="goods"><img src="./imgs/applewatch.png"><span>IWatch EXTS Min</span></td>
<td class="price">9998.68</td>
<td class="count">
<span class="reduce">-</span>
<input class="count_input" type="text" value="1"></input>
<span class="add">+</span>
</td>
<td class="subtotle">9998.68</td>
<td class="operation"><span class="delete">删除<span></td>
</tr>
</tbody>
</table>
<div class="slected view">
<div id="selectedViewList" class="clearfix">
<!-- <div><img src="./imgs/applewatch.png"><span>取消选择</span></div> -->
</div>
<span class="arrow">.<span>.</span></span>
</div>
<div id = "footer" class="footer">
<label class="fl select_all" ><input class="check_all check" type="checkbox"> 全选</input></label>
<a class="fl delete_all" id="deleteAll" href="javascript:;">删除</a>
<div class="fr closing">结算</div>
<div class="fr selected_totle">合计：￥ <span id="priceTotle">0.00</span> </div>
<div class="fr selectAll" id="selected">已购商品
<span id = "selectTotle">0</span>件
<span class="arow up">+++</span>
<span class="arow down">---</span>
</div>
</div>
</body>
</html>shoppingCart.js
window.onload = function(){
//低版本的IE浏览器不支持getElementByClassName方法，考虑兼容性,重写方法。
if (!document.getElementByClassName) {
document.getElementByClassName =function(cls){
var ret = [];
var clsElments = document.getElementsByTagName('*');
for (var i = 0, len = clsElments.length; i < len; i++) {
//考虑一个标签有多个class的情况,这里用正则表达式会好一点
if (clsElments[i].className == cls
|| (clsElments[i].className.indexOf(cls + " ") >= 0)
|| (clsElments[i].className.indexOf(" " + cls + " ") >= 0)
|| (clsElments[i].className.indexOf(" " + cls) >= 0))
{
ret.push(clsElments[i]);
}
}
return ret;
}
}
var cartTable = document.getElementById("cartTable");
var tr = cartTable.children[1].rows; //table标签特有的属性，rows可以获得表格元素的所有tr行。
var checkInput = document.getElementByClassName('check');//获得所有的单选框
var checkAllInput = document.getElementByClassName('check_all');//获得所有的单选框
var priceTotle = document.getElementById("priceTotle");//总价
var selectTotle = document.getElementById("selectTotle");//已选商品
var selected = document.getElementById("selected");
var footer = document.getElementById("footer");//底部标签
var selectedViewList = document.getElementById("selectedViewList");//底部标签
var deleteAll = document.getElementById("deleteAll");
//计算总价格和数量
function getTotle(){
var selectNum = 0;//数量
var priceNum = 0;//价格
var HTMLstr = ""; //缩略图的字符串拼接
for (var i = 0,len = tr.length; i < len; i++) {
if (tr[i].getElementsByTagName("input")[0].checked) {
tr[i].className ="on";
selectNum += parseInt(tr[i].getElementsByTagName("input")[1].value);
priceNum += parseFloat(tr[i].cells[4].innerHTML);
//拼接字符串显示已经选择的商品
HTMLstr += '<div><img src="'+ tr[i].getElementsByTagName('img')[0].src +'"><span class ="del" index ="'+ i +'">取消选择</span></div>';
}
else{
tr[i].className = "";
}
}
selectTotle.innerHTML = selectNum;
priceTotle.innerHTML = priceNum.toFixed(2);//保留两位小数
selectedViewList.innerHTML = HTMLstr;
}
//计算小计价格
function getSubTotle(tr){
var tds = tr.cells;
var price = parseFloat(tds[2].innerHTML);
var num = parseInt(tr.getElementsByTagName("input")[1].value);
var subTotle = parseFloat(price * num).toFixed(2);
tds[4].innerHTML = subTotle;
}
//复选框绑定单击事件
for (var i = 0, len = checkInput.length; i < len; i++){
checkInput[i].onclick =function (){
//判断全选按钮，变更
if (this.className == "check_all check") {
for (var j = 0; j < len; j++){
checkInput[j].checked = this.checked;
}
}
if (this.checked == false) {
for (var k = 0,len2 = checkAllInput.length; k < len2; k++){
checkAllInput[k].checked = false;
}
}
getTotle();
}
}
//控制底部标签的显示
selected.onclick = function(){
if (footer.className == "footer") {
footer.className == "footer show";
} else {
footer.className == "footer";
}
}
//图片缩略图的取消选择按钮功能,e为事件对象
selectedViewList.onclick = function(e){
//兼容低版本的IE
/* if (e){
e = e;
}else{
e = window.event;
} */
var e = e || window.event;
var el = e.srcElement;
if (el.className == "del") {
var index = el.getAttribute("index");
var input = tr[index].getElementsByTagName("input")[0];
input.checked = false;
input.onclick();
}
}
//实现加减、删除操作。同样用事件代理的方法实现
for (var i = 0, len3 = tr.length; i < len3; i++){
tr[i].onclick = function(e){
var e = e || window.event;
var el = e.srcElement;
var clsName = el.className;
var input = this.getElementsByTagName("input")[1];
var inputValue = parseInt(input.value);
var reduce = this.getElementsByTagName("span")[1];
switch (clsName){
case "add":
/*parseInt(inputValue) ++;*/
input.value = inputValue + 1;
reduce.innerHTML ="-";
getSubTotle(this);
break;
case "reduce":
if(inputValue >= 1){
input.value = inputValue - 1;
}else{
reduce.innerHTML ="";
}
getSubTotle(this);
break;
case "delete":
var conf = confirm("确定删除这个商品？");
if (conf) {
this.parentNode.removeChild(this);
}
break;
default:
break;
}
getTotle();
}
//处理从手动输入商品数量
tr[i].getElementsByTagName("input")[1].onkeyup = function(){
var val = this.value;
var tr = this.parentNode.parentNode;
if (isNaN(val) || val < 0 ) {
val = 1;
}
this.value = val;
getSubTotle(tr);
}
}
//全选删除
deleteAll.onclick = function(){
if (selectTotle.innerHTML !="0") {
var conf = confirm("确定删除这些商品？");
if (conf) {
for (var i = 0, len = tr.length; i < len; i++) {
var input = tr[i].getElementsByTagName("input")[0];
if(input.checked){
tr[i].parentNode.removeChild(tr[i]);
}
}
}
}
}
}
//取消选择--采用事件代理---放到父元素上。shoppingCart.css
.count_input{
width: 39px;
height: 15px;
line-height: 15px;
border: 1px solid #aaa;
color: #343434;
text-align: center;
padding: 4px 0;
background-color: #fff;
}
span.add, span.reduce{
height: 23px;
width: 27px;
border: 1px solid #e5e5e5;
background: #f0f0f0;
line-height: 23px;
color: #444;
}
.closing{
display: inline-block;
width: 120px;
height: 50px;
line-height: 50px;
background: #f40;
text-align: center;
font-family: 'Microsoft Yahei';
font-size: 20px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
border-radius: 2px;
text-decoration: none;
cursor: pointer;
}
.fr{
float: right;
}
.selected_totle, .selectAll, .select_all, .delete_all{
margin-top: 15px;
}
.footer{
height: 50px;
background: #e5e5e5;
font-family: 'Microsoft Yahei';
}
#selectTotle, #priceTotle,.subtotle {
color: #f40;
font-weight: 700;
font-size: 18px;
font-family: tohoma,arial;
padding: 5px;
}
版权声明：本文为小平果原创文章，转载请注明：http://blog.csdn.net/i10630226
javascript项目实战之原生js模拟淘宝购物车的更多相关文章
- 原生js仿淘宝手机购买选项代码
这是一款基于原生js实现仿淘宝手机信息购买选项效果源码,界面整体效果仿照淘宝购物选项设计,点击不同选项还可实时显示不同的价格计算结果,界面简洁大方.美观实用.可兼容目前最新的各类主流浏览器. 在线演示 ...
- jquery模拟淘宝购物车
今天要实现的一个功能页面就是利用jquery代码模拟一个淘宝网的购物车结算页面 总体页面效果如图: 首先我们要实现的内容的需求有如下几点: 1.在购物车页面中,当选中“全选”复选框时,所有商品前的复选 ...
- Vue(小案例_vue+axios仿手机app)_购物车（二模拟淘宝购物车页面，点击加减做出相应变化）
一.前言 在上篇购物车中,如果用户刷新了当前的页面,底部导航中的数据又会恢复为原来的: 1.解决刷新,购物车上数值不变 ...
- 原生JS实现淘宝无缝轮播
<!DOCTYPE html ><html><head><meta http-equiv="Content-Type" content=& ...
- 用jQuery模拟淘宝购物车
首先我们要实现的内容的需求有如下几点: 1.在购物车页面中,当选中"全选"复选框时,所有商品前的复选框被选中,否则所有商品的复选框取消选中. 2.当所有商品前的复选框选中时,&qu ...
- js 实现淘宝无缝轮播图效果，可更改配置参数 带完整版解析代码[slider.js]
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写淘宝无缝轮播图效果 需求分析: ...
- js 实现淘宝放大镜功能，可更改配置参数 带完整版解析代码[magnifier.js]
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写淘宝放大镜效果 基本功能: 运 ...
- php单点登录之模拟淘宝天猫同步登录
说到单点登录大家都很了解,一个站点登录其他域会自动登录. 单点登录SSO(Single Sign On)的方法有很多,比如:p3p.共享session.共享cookice.第三方OAuth认证. 这里 ...
- 淘宝购物车页面 PC端和移动端实战
最近花了半个月的时间,做了一个淘宝购物车页面的Demo.当然,为了能够更加深入的学习,不仅仅有PC端的固定宽度的布局,还实现了移动端在Media Query为768px以下(也就是实现了ipad,ip ...
随机推荐
- win7待机时间设置，睡眠时间设置
首先,单击"开始"找到"控制面板" 步骤阅读 2 打开"控制面板"以后,单击右侧的"硬件和声音" 步骤阅读 3 找到&q ...
- MIDle生命周期详解，以及工作原理
当MIDlet被应用程序管理器成功地初始化之后,就开始展开了它的生命周期.MIDlet的生命周期完全由应用程序管理器控制,也就是说,当MIDlet要从一个状态变成另外一个状态时,应用程序管理器会调用对 ...
- OpenCV——颜色运算
#ifndef PS_ALGORITHM_H_INCLUDED #define PS_ALGORITHM_H_INCLUDED #include <iostream> #include & ...
- 网络最短路径Dijkstra算法
最近在学习算法,看到有人写过的这样一个算法,我决定摘抄过来作为我的学习笔记: <span style="font-size:18px;">/* * File: shor ...
- listview中的adapter学习小结
概述 Adapter是数据和UI之间的一个桥梁,在listview,gridview等控件中都会使用到,android给我们提拱了4个adapte供我们使用: BaseAdapter是一个抽象类,继承 ...
- Xcode使用心得03:打开僵尸(Zombie)模式
如果打开了ARC或垃圾回收模式,在程序中发消息给以及重新分配的对象,将会引起程序崩溃.这时定位崩溃原因将非常困难,因为出问题的对象已经重新分配了.一个解决的方法就是要求Xcode将对象设置为" ...
- obj-c编程16:键值编码(KVC)
我们可以借助obj-c中的键值编码(以后简称KVC,Key-Value Coding)来存取类的属性,通过指定所要访问的属性名字符串标示符,可以使用存取器方法来获取或设置类的属性.下面的例子,借助于K ...
- Python 3.7 将引入 dataclass 装饰器
简评:Python 3.7 将于今年夏天发布,Python 3.7 中将会有许多新东西,最激动人心的新功能之一是 dataclass 装饰器. 什么是 Data Class 大多数 Python 开发 ...
- datagrid 新增，并行内编辑,提交保存
<a class="mini-button" iconCls="icon-add" onclick="addRow()" plain= ...
- java安装及设置环境变量
目录: java安装 (找不到或无法加载主类 com.sun.tools.javac.Main) 设置环境变量 maven安装及环境变量设置 1. java安装 情景:不使用默认安装 问题:cmd-j ...