原生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 相关文章推荐
非常有用的40款jQuery 插件推荐(系列二)
Dec 25 Javascript
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
Jan 24 Javascript
关于编写性能高效的javascript事件的技术
Nov 28 Javascript
微信WeixinJSBridge API使用实例
May 25 Javascript
简述AngularJS的控制器的使用
Jun 16 Javascript
JavaScript中数据结构与算法(三):链表
Jun 19 Javascript
JS中取二维数组中最大值的方法汇总
Apr 17 Javascript
JS身份证信息验证正则表达式
Jun 12 Javascript
JavaScript创建对象的七种方式全面总结
Aug 21 Javascript
angular 实现的输入框数字千分位及保留几位小数点功能示例
Jun 19 Javascript
JavaScript ES6箭头函数使用指南
Dec 30 Javascript
小程序实现上下切换位置
Nov 16 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
PHP4之COOKIE支持详解
2006/10/09 PHP
提高PHP编程效率 引入缓存机制提升性能
2010/02/15 PHP
php学习笔记 [预定义数组(超全局数组)]
2011/06/09 PHP
PHP使用Memcache时模拟命名空间及缓存失效问题的解决
2016/02/27 PHP
基于laravel-admin 后台 列表标签背景的使用方法
2019/10/03 PHP
网站被黑的假象--ARP欺骗之页面中加入一段js
2007/05/16 Javascript
Javascript调用C#代码
2011/01/17 Javascript
javascript的字符串按引用复制和传递,按值来比较介绍与应用
2012/12/28 Javascript
使用javascript做的一个随机点名程序
2014/02/13 Javascript
js判断浏览器是否支持html5
2014/08/17 Javascript
js判断文本框剩余可输入字数的方法
2015/02/04 Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
2016/04/17 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
2017/02/21 Javascript
Ajax异步文件上传与NodeJS express服务端处理
2017/04/01 NodeJs
微信小程序 刷新上拉下拉不会断详细介绍
2017/05/11 Javascript
angular中的cookie读写方法
2017/08/02 Javascript
ionic 3.0+ 项目搭建运行环境的教程
2017/08/09 Javascript
微信小程序-getUserInfo回调的实例详解
2017/10/27 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
2017/11/09 Javascript
vue使用vant中的checkbox实现全选功能
2020/11/17 Vue.js
[00:43]TI7不朽珍藏III——幽鬼不朽展示
2017/07/15 DOTA
运用TensorFlow进行简单实现线性回归、梯度下降示例
2018/03/05 Python
Python中is和==的区别详解
2018/11/15 Python
将keras的h5模型转换为tensorflow的pb模型操作
2020/05/25 Python
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
2016/04/26 HTML / CSS
草莓网官网:StrawberryNET
2019/08/21 全球购物
戴尔荷兰官方网站:Dell荷兰
2020/10/04 全球购物
请用用Java代码写一个堆栈
2012/01/26 面试题
运动会稿件300字
2014/02/14 职场文书
基督教婚礼主持词
2014/03/14 职场文书
湖南省党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书
合法的离婚协议书范本
2014/10/23 职场文书
2015年员工试用期工作总结
2014/12/12 职场文书
音乐教师个人工作总结
2015/02/06 职场文书
elasticSearch-api的具体操作步骤讲解
2021/06/28 Java/Android
简单聊聊TypeScript只读修饰符
2022/04/06 Javascript