原生js模拟淘宝购物车项目实战
周兴朝
本文向大家介绍原生js模拟淘宝购物车项目实战，包括了原生js模拟淘宝购物车项目实战的使用技巧和注意事项，需要的朋友参考一下
本文实例讲述了原生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;
}
以上就是js模拟淘宝购物车的全部项目代码，欢迎大家学习品鉴，从中得到收获。
类似资料：
-
本文向大家介绍原生js实现淘宝购物车功能，包括了原生js实现淘宝购物车功能的使用技巧和注意事项，需要的朋友参考一下 js淘宝购物车功能描述： 1、点击“+”，单个商品数量加1，总数量加1；单个商品价格添加，总价也添加。 2、点击“-”，单个商品数量减1，总数量减1；单个商品价格减少，总价也减少。 当该商品数量为0时，点击依然为0； 3、显示出总价，总数量和其中最贵的那个商品的价格。 瞄一
-
本文向大家介绍jQuery模拟淘宝购物车功能，包括了jQuery模拟淘宝购物车功能的使用技巧和注意事项，需要的朋友参考一下 首先我们要实现的内容的需求有如下几点： 1.在购物车页面中，当选中“全选”复选框时，所有商品前的复选框被选中，否则所有商品的复选框取消选中。 2.当所有商品前的复选框选中时，“全选”复选框被选中，否则“全选”复选框取消选中。 3.单击图标-的时候数量减一而且不能让物品小于0并
-
本文向大家介绍纯jquery实现模仿淘宝购物车结算，包括了纯jquery实现模仿淘宝购物车结算的使用技巧和注意事项，需要的朋友参考一下 这篇文章里，将会提到购物车里的所有功能。包括全选、单选金额改变。在增加数量时金额也会相应改变。 效果图展示： 说下大致的思路吧： 1、首先是计算一行的价格。这个功能在上篇博客里有提到，这里就不列举出来了。 2、遍历选中的几行，将每行的数值相加。 3、将值赋给总金额
-
本文向大家介绍vue实现的仿淘宝购物车功能详解，包括了vue实现的仿淘宝购物车功能详解的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了vue实现的仿淘宝购物车功能。分享给大家供大家参考，具体如下： 下面是一张众所周知的淘宝购物车页面，今天要讲解的案例就是用vue.js做一个类似的页面 首先简单介绍一下可能会用到的一些vue.js的用法： v-bind，绑定属性；例如v-bind:class
-
本文向大家介绍python实现简易淘宝购物，包括了python实现简易淘宝购物的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了简单的python淘宝购物，供大家参考，具体内容如下 话不多说，源码附上 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍python实现淘宝购物系统，包括了python实现淘宝购物系统的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了python淘宝购物系统的具体代码，供大家参考，具体内容如下 代码如下： 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。