原生js实现购物车功能


Posted in Javascript onSeptember 23, 2020

本文实例为大家分享了js实现购物车功能的具体代码,供大家参考,具体内容如下

使用html配合原生js实现购物车功能

* 实现购物车商品数量的加减,注意数量最少为1,数量输入仅能为数字
* 实现购物车商品的移除
* 可以在同一页面再设计几个商品信息,每个商品有价格,图片,名称,以及添加至购物车按钮,点击按钮后添加至购物车
* 实现购物车商品的总价计算

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>商品</title>
 <style>
 html,body{ margin: 0;}
 .row{
 width:100%;
 height:300px;
 }
 .col{
 width:200px;
 height:216px;
 margin: 0px 1px 0px 1px; padding-top: 2px;
 border:solid black 1px;
 float:left;
 text-align:center;
 }
 .col img { width: 150px;}
 </style>
 <script src="js/jquery-3.2.1.min.js"></script>
 <script>
 function calculate() {
  var tbody = document.getElementById("tb");
  var prices = tbody.querySelectorAll("td:nth-child(4)");
  var numbers = tbody.querySelectorAll("td:nth-child(5)>input[type=number]");
  var checkboxes = tbody.querySelectorAll("th:nth-child(1)>input");
  //console.log(prices);
   //console.log(numbers);
   //console.log(checkboxes);
 var total=0;
   for(var i = 0; i < prices.length; i++) {
    console.log("价格:" +parseInt(prices[i].innerText)+" 数量:"+parseInt(numbers[i].value) + "是否勾选:" + checkboxes[i].checked);
    if(checkboxes[i].checked){
     total += parseInt(prices[i].innerText)*parseInt(numbers[i].value);
 }
   }
   console.log("总价格:" + total);
   document.getElementById("total").innerText = total;
 }
 
 // 移除商品
 function del(me) {
  var tr = me.parentNode.parentNode;
  var tbody = tr.parentNode;
  tbody.removeChild(tr);
   calculate();
 }
 // 增加商品数量
 function jia(me) {
  var td = me.parentNode;
  var inputs = td.getElementsByTagName("input"); // 找到此td下所有input标签
 // inputs[1].value = inputs[1].value - 0 + 1; // 用-0的办法转为数字
 // parseInt 将字符串转整数 parseFloat 将字符串转小数
   inputs[1].value = parseInt(inputs[1].value) + 1;
   calculate();
 }
 // 减少商品数量
 function jian(me) {
  var td = me.parentNode;
  var num = td.querySelector("input[type=number]");// 只查找有type=number属性的input标签
 var r = num.value - 1;
 if( r >= 1) { // 只有减得的结果是大于等于1的情况下才需要改变文本框的值
  num.value = r;
    calculate();
 }
 }
 // 改变复选框的选中状态
 function check(me) {
  var tbody = document.getElementById("tb");
  var inputs = tbody.querySelectorAll("th input");
  for(var i = 0; i <inputs.length; i++) {
   inputs[i].checked = me.checked; // 根据me的checked状态去修改下面的每个checked状态
 }
   calculate();
 }
 // 添加商品至购物车
 function add(me) {
  var tbody = document.getElementById("tb");
   var div = me.parentNode;
  var spans = div.getElementsByTagName("span"); // 获得商品名字和价格的span
 var name = spans[0].innerText; // 获得商品名字
 
 var col_1 = tbody.querySelectorAll("td:nth-child(2)"); // nth-child 作为第几个孩子
 var found = null; // found 变量代表购物车中找到的td
 for(var i = 0; i<col_1.length; i++) {
  if( col_1[i].innerText == name) {
   found = col_1[i];
   break;
 }
 }
 
 if(found != null) { //商品名字存在
  // 修改数量 found 是找到的td
 var tr = found.parentNode;
 var input = tr.querySelector("td:nth-child(5)>input:last-child");
 console.log(input);
 jia(input);
 } else { //商品名字不存在
  // 添加商品
    var tr = document.createElement("tr");
    var th = document.createElement("th");
 th.innerHTML = '<input type="checkbox" checked onclick="calculate()">';
 
    var td1 = document.createElement("td");
    td1.innerText = spans[0].innerText;
 
    var td2 = document.createElement("td");
    var img = document.createElement("img");
    img.src = div.getElementsByTagName("img")[0].src;
    img.width = "100";
    td2.appendChild(img);
 
    var td3 = document.createElement("td");
    td3.innerText = spans[1].innerText;
 
    var td4 = document.createElement("td");
    td4.innerHTML = '<input type="button" value="-" onclick="jian(this)"><input type="number" value="1"><input type="button" value="+" onclick="jia(this)">';
 
    var td5 = document.createElement("td");
    td5.innerHTML = '<input type="button" value="移除" onclick="del(this)">';
 
    tr.appendChild(th);
    tr.appendChild(td1);
    tr.appendChild(td2);
    tr.appendChild(td3);
    tr.appendChild(td4);
    tr.appendChild(td5);
    tbody.appendChild(tr);
    calculate();
 }
 }
 </script>
</head>
<body>
 <!--这里写购物车代码-->
 <div>
 <table border="1" width="100%">
 <thead>
 <tr>
 <th><input type="checkbox" onclick="check(this)"></th>
 <th>图片</th>
 <th>名称</th>
 <th>价格</th>
 <th>数量</th>
 <th>移除</th>
 </tr>
 </thead>
 <tbody id="tb">
 <tr>
 <th><input type="checkbox" onclick="calculate()"></th>
 <td>商品1</td>
 <td><img src="images/5a0cf6bfN92a5a597.jpg" width="100"></td>
 <td>3000.00</td>
 <td>
  <input type="button" value="-" onclick="jian(this)">
  <input type="number" value="1">
  <input type="button" value="+" onclick="jia(this)">
 </td>
 <td><input type="button" value="移除" onclick="del(this)"></td>
 </tr>
 <tr>
 <th><input type="checkbox" onclick="calculate()"></th>
 <td>商品2</td>
 <td><img src="images/5a0cf672N3c785b7a.jpg" width="100"></td>
 <td>2000.00</td>
 <td>
  <input type="button" value="-" onclick="jian(this)">
  <input type="number" value="1">
  <input type="button" value="+" onclick="jia(this)">
 </td>
 <td><input type="button" value="移除" onclick="del(this)"></td>
 </tr>
 </tbody>
 <tfoot>
 <tr>
 <td colspan="6">总价<span id="total">0</span> 元</td>
 </tr>
 </tfoot>
 </table>
 </div>
 
 <!-- 商品列表 -->
 <div class="row">
 <div class="col">
 <p><span>商品1</span>价格:<span>3000.00</span></p>
 <img src="images/5a0cf6bfN92a5a597.jpg">
 <input type="button" value="添加至购物车" onclick="add(this)">
 </div>
 <div class="col">
 <p><span>商品2</span>价格:<span>2000.00</span></p>
 <img src="images/5a0cf672N3c785b7a.jpg">
 <input type="button" value="添加至购物车" onclick="add(this)">
 </div>
 <div class="col">
 <p><span>商品3</span>价格:<span>4000.00</span></p>
 <img src="images/5a1f5ed3Nfa577958.jpg">
 <input type="button" value="添加至购物车" onclick="add(this)">
 </div>
 <div class="col">
 <p><span>商品4</span>价格:<span>3500.00</span></p>
 <img src="images/5a1f5664Nfa934fac.jpg">
 <input type="button" value="添加至购物车" onclick="add(this)">
 </div>
 </div>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
读jQuery之四(优雅的迭代)
Jun 20 Javascript
EasyUI中的tree用法介绍
Nov 01 Javascript
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
Apr 02 Javascript
javascript jq 弹出层实例
Aug 25 Javascript
javascript解析json数据的3种方式
May 08 Javascript
详解Bootstrap创建表单的三种格式(一)
Jan 04 Javascript
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
Jul 09 Javascript
jquery 判断selection range 是否在容器中的简单实例
Aug 02 Javascript
原生js实现旋转木马轮播图效果
Feb 27 Javascript
详解vue-resource promise兼容性问题
Jun 20 Javascript
layui table设置前台过滤转义等方法
Aug 17 Javascript
Vue利用Blob下载原生二进制数组文件
Sep 25 Javascript
详解微信小程序动画Animation执行过程
Sep 23 #Javascript
原生js实现分页效果
Sep 23 #Javascript
原生js实现购物车
Sep 23 #Javascript
javascript实现简易计算器功能
Sep 23 #Javascript
javascript使用正则表达式实现注册登入校验
Sep 23 #Javascript
javascript实现点击按钮切换轮播图功能
Sep 23 #Javascript
Vue3为什么这么快
Sep 23 #Javascript
You might like
PHP实现提取一个图像文件并在浏览器上显示的代码
2012/10/06 PHP
php异步:在php中使用fsockopen curl实现类似异步处理的功能方法
2016/12/10 PHP
[原创]PHP实现SQL语句格式化功能的方法
2017/07/28 PHP
php命令行模式代码实例详解
2021/02/26 PHP
javascript 获取表单file全路径
2009/12/31 Javascript
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
2013/01/29 Javascript
JS实现匀速运动的代码实例
2013/11/29 Javascript
jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
2015/08/22 Javascript
学习Angular中作用域需要注意的坑
2016/08/17 Javascript
Ajax 加载数据 练习代码
2017/01/05 Javascript
如何使用bootstrap框架 bootstrap入门必看!
2017/04/13 Javascript
在vue中给列表中的奇数行添加class的实现方法
2018/09/05 Javascript
vue头部导航动态点击处理方法
2018/11/02 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
2019/07/29 Javascript
[57:28]2018DOTA2亚洲邀请赛 4.6 淘汰赛 TNC vs Liquid 第一场
2018/04/10 DOTA
python发送arp欺骗攻击代码分析
2014/01/16 Python
python实现simhash算法实例
2014/04/25 Python
Python编程中的反模式实例分析
2014/12/08 Python
Python解析xml中dom元素的方法
2015/03/12 Python
在主机商的共享服务器上部署Django站点的方法
2015/07/22 Python
Python3如何解决字符编码问题详解
2017/04/23 Python
如何使用Python的Requests包实现模拟登陆
2018/04/27 Python
python数据持久存储 pickle模块的基本使用方法解析
2019/08/30 Python
Python模块的定义,模块的导入,__name__用法实例分析
2020/01/07 Python
PyCharm无法引用自身项目解决方式
2020/02/12 Python
pycharm新建Vue项目的方法步骤(图文)
2020/03/04 Python
英国领先的独立时装店:Van Mildert
2019/10/28 全球购物
您的时尚,您的生活方式:DTLR Villa
2019/12/25 全球购物
瑞典香水、须后水和美容产品购物网站:Parfym-Klick.se
2019/12/29 全球购物
2019史上最全Database工程师题库
2015/12/06 面试题
食品安全工作实施方案
2014/03/26 职场文书
基层党建工作汇报材料
2014/08/15 职场文书
营销总经理岗位职责范本
2014/09/02 职场文书
2015国际残疾人日活动总结
2015/03/24 职场文书
积极心理学课程心得体会
2016/01/22 职场文书
《我的长生果》教学反思
2016/02/20 职场文书