原生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 相关文章推荐
json跟xml的对比分析
Jun 10 Javascript
一个轻量级的javascript库 pj介绍
Dec 19 Javascript
当jQuery1.7遇上focus方法的问题
Jan 26 Javascript
浅谈jquery回调函数callback的使用
Jan 30 Javascript
轮播图组件js代码
Aug 08 Javascript
浅谈JavaScript中promise的使用
Jan 11 Javascript
Angular 通过注入 $location 获取与修改当前页面URL的实例
May 31 Javascript
纯js实现动态时间显示
Sep 07 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
Aug 25 Javascript
剖析Angular Component的源码示例
Mar 23 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
Sep 13 Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
Sep 21 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生成随机密码的几种方法
2011/01/17 PHP
Smarty最简单实现列表奇偶变色的方法
2015/07/01 PHP
php生成二维码图片方法汇总
2016/12/17 PHP
PHP PDOStatement::nextRowset讲解
2019/02/01 PHP
Thinkphp 框架配置操作之配置加载与读取配置实例分析
2020/05/15 PHP
javascript中全局对象的isNaN()方法使用介绍
2013/12/19 Javascript
js 实现浏览历史记录示例
2014/04/20 Javascript
JavaScript中匿名、命名函数的性能测试
2014/09/04 Javascript
html5+javascript实现简单上传的注意细节
2016/04/18 Javascript
javascript和jquery实现用户登录验证
2016/05/04 Javascript
浅析$.getJSON异步请求和同步请求
2016/06/06 Javascript
JavaScript获取IP获取的是IPV6 如何校验
2016/06/12 Javascript
原生JS实现在线问卷调查投票特效
2017/01/03 Javascript
js实现时间轴自动排列效果
2017/03/09 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
2019/05/06 Javascript
layui的布局和表格的渲染以及动态生成表格的方法
2019/09/18 Javascript
Echarts实现单条折线可拖拽效果
2019/12/19 Javascript
ES6中的Javascript解构的实现
2020/10/30 Javascript
python编程实现归并排序
2017/04/14 Python
Python使用re模块实现信息筛选的方法
2018/04/29 Python
Python多线程通信queue队列用法实例分析
2020/03/24 Python
Python如何把Spark数据写入ElasticSearch
2020/04/18 Python
Pandora西班牙官方商店:PandoraShop.es
2020/10/05 全球购物
Three Graces London官网:英国奢侈品牌
2021/03/18 全球购物
影视制作岗位职责
2013/12/04 职场文书
西北政法大学自主招生自荐信
2014/01/29 职场文书
实习推荐信
2014/05/10 职场文书
营销学习心得体会
2014/09/12 职场文书
七一表彰大会简报
2015/07/20 职场文书
幼儿园音乐教学反思
2016/02/18 职场文书
基于Go Int转string几种方式性能测试
2021/04/28 Golang
Python基础之tkinter图形化界面学习
2021/04/29 Python
JS不要再到处使用绝对等于运算符了
2021/04/30 Javascript
Pytorch DataLoader shuffle验证方式
2021/06/02 Python
Pytorch中的学习率衰减及其用法详解
2021/06/05 Python
vue3不同环境下实现配置代理
2022/05/25 Vue.js