原生js模拟淘宝购物车项目实战


Posted in Javascript onNovember 18, 2015

本文实例讲述了原生js模拟淘宝购物车实现代码。分享给大家供大家参考。具体如下:

通过JavaScript实现类似与淘宝的购物车效果,包括商品的单选、全选、删除、修改数量、价格计算、数目计算、预览等功能的实现。实现的效果图:

原生js模拟淘宝购物车项目实战

相应的代码:

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模拟淘宝购物车的全部项目代码,欢迎大家学习品鉴,从中得到收获。

Javascript 相关文章推荐
JS不间断向上滚动效果代码
Dec 25 Javascript
浅析Node.js中的内存泄漏问题
Jun 23 Javascript
bootstrap datetimepicker实现秒钟选择下拉框
Jan 05 Javascript
那些精彩的JavaScript代码片段
Jan 12 Javascript
BootstrapTable refresh 方法使用实例简单介绍
Feb 20 Javascript
jQuery UI Grid 模态框中的表格实例代码
Apr 01 jQuery
Vue.js分页组件实现:diVuePagination的使用详解
Jan 10 Javascript
web前端vue之vuex单独一文件使用方式实例详解
Jan 11 Javascript
详解基于electron制作一个node压缩图片的桌面应用
Jan 29 Javascript
Vue表单绑定的实例代码(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)
May 13 Javascript
vue2.x 对象劫持的原理实现
Apr 19 Javascript
如何通过vscode运行调试javascript代码
Jul 24 Javascript
JavaScript统计网站访问次数的实现代码
Nov 18 #Javascript
javascript实现添加附件功能的方法
Nov 18 #Javascript
Jquery Mobile 自定义按钮图标
Nov 18 #Javascript
javascript实现对表格元素进行排序操作
Nov 18 #Javascript
基于Jquery制作图片文字排版预览效果附源码下载
Nov 18 #Javascript
javascript下拉列表菜单的实现方法
Nov 18 #Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
Nov 18 #Javascript
You might like
浅析php中如何在有限的内存中读取大文件
2013/07/02 PHP
php获取从百度搜索进入网站的关键词的详细代码
2014/01/08 PHP
PHP数据库连接mysql与mysqli对比分析
2016/01/04 PHP
jWiard 基于JQuery的强大的向导控件介绍
2011/10/28 Javascript
一张表格告诉你windows.onload()与$(document).ready()的区别
2014/05/16 Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
2014/11/28 Javascript
纯Javascript实现ping功能的方法
2015/03/20 Javascript
javascript实现捕捉键盘上按下的键
2015/05/05 Javascript
jQuery实现定时读取分析xml文件的方法
2015/07/16 Javascript
js实现的奥运倒计时时钟效果代码
2015/12/09 Javascript
JQuery Mobile实现导航栏和页脚
2016/03/09 Javascript
谈谈target=_new和_blank的不同之处
2016/10/25 Javascript
js基于myFocus实现轮播图效果
2017/02/14 Javascript
Vue.js常用指令之循环使用v-for指令教程
2017/06/27 Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
2017/07/27 Javascript
get  post jsonp三种数据交互形式实例详解
2017/08/25 Javascript
jQuery插件jsonview展示json数据
2018/05/26 jQuery
element-ui中的select下拉列表设置默认值方法
2018/08/24 Javascript
javascript实现自由编辑图片代码详解
2019/06/21 Javascript
javascript合并两个数组最简单的实现方法
2019/09/14 Javascript
js实现简单放大镜效果
2020/03/07 Javascript
Python装饰器使用实例:验证参数合法性
2015/06/24 Python
flask-restful使用总结
2018/12/04 Python
Python嵌入C/C++进行开发详解
2020/06/09 Python
完美解决TensorFlow和Keras大数据量内存溢出的问题
2020/07/03 Python
css3圆角边框和边框阴影示例
2014/05/05 HTML / CSS
css3选择器基本介绍
2014/12/15 HTML / CSS
使用phonegap操作数据库的实现方法
2017/03/31 HTML / CSS
HTML5自定义属性的问题分析
2019/08/16 HTML / CSS
阿里巴巴国际站:Alibaba.com
2016/07/21 全球购物
BIBLOO捷克:购买女装、男装、童装、鞋和配件
2017/01/27 全球购物
岳父生日宴会答谢词
2014/01/13 职场文书
学校大课间活动方案
2014/01/30 职场文书
教书育人演讲稿
2014/09/11 职场文书
工作失职检讨书范文
2015/05/05 职场文书
承诺书的签字人,需不需要承担相应的责任?
2019/07/09 职场文书