模拟购物车的实现过程（详细讲解）

最新推荐文章于 2023-01-16 10:09:39 发布
最新推荐文章于 2023-01-16 10:09:39 发布
阅读量1k 收藏 3
点赞数 1
文章标签： python javascript ViewUI
原文链接：https://yq.aliyun.com/articles/233971
版权

我们把购物车的步骤分为了三步
一、加入购物车
这里写图片描述
二、购物车中物品数量的控制
这里写图片描述
三、计算金额

这里写图片描述

下面为实现的代码；（代码也是按照上面的思路写的大家可以看看，看不懂可以参照上面的图片上的步骤）

<!DOCTYPE html>
<html>
  <head>
    <title>购物车</title>
    <meta charset="utf-8" />
    <style type="text/css">
      h1 {
        text-align:center;
      }
      table {
        margin:0 auto;
        width:60%;
        border:2px solid #aaa;
        border-collapse:collapse;
      }
      table th, table td {
        border:2px solid #aaa;
        padding:5px;
      }
      th {
        background-color:#eee;
      }
    </style>
    <script type="text/javascript">
        //加入购物车
        //调用函数时传入this（正在点击的那个按钮）
        //声明函数来接受该值，参数名不能用关键字
        function add_shoppingcart(btn){
            console.log(btn);
            //获取此按钮的爷爷tr
            var tr = btn.parentNode.parentNode;
            console.log("tr");
            console.log(tr);
            //获取此tr的所有孩子tds
            var tds=tr.getElementsByTagName("td");
            console.log("tds");
            console.log(tds);
            //获取第0个孩子的内容（商品名）
            var spm=tds[0].innerText;
            console.log(spm);
            /* var str="";
            var ntr =document.createElement("tr");
            for (var i = 0; i < 2; i++) {
                var sp=tds[i].innerText;
                str+="<td>"+sp+"</td>";
                console.log(str);
            }
             ntr.innerHTML=str;
             var tbody=document.getElementById("goods");
             tbody.appendChild(ntr);  */
            //获取第一个孩子的内容（单价）
            var dj=tds[1].innerText;
            console.log(dj);
            //创建一个新的ntr
            var ntr =document.createElement("tr");
            //给这个新tr设置内容
            //ntr.innerHTML="拼td的内容";
            //其中商品名和单价拼之前获取的变量
            var str='<td>'+spm+'</td>'+
            '<td>'+dj+'</td>'+
            '<td align="center">'+
              '<input type="button" value="-" onclick="decrease(this)"/> '+
              '<input type="text" size="3" readonly value="1"/> '+
              '<input type="button" value="+" onclick="increase(this);"/>'+
            '</td>'+
            '<td>'+dj+'</td>'+
            '<td align="center"><input type="button" value="x" onclick="del(this);"/></td>';
            ntr.innerHTML=str;
            console.log(ntr);
            //获取tbody(id="goods")
            var tbody=document.getElementById("goods");
            //向tbody下追加新tr
            tbody.appendChild(ntr); 
            sum();
        }

        /* 删除 */
        function del(btn){
            //获取按钮的爷爷
            var tr=btn.parentNode.parentNode;
            //删除这个tr
            tr.parentNode.removeChild(tr);
            sum();
        }
        //+操作
        function increase(btn){
            //获取按钮的父亲的孩子

            var sl=btn.parentNode.getElementsByTagName("input")[1];
            var a=parseInt(sl.value)+1;
            sl.value=a;
            //tr
            console.log("价格");
            var tr=btn.parentNode.parentNode;
            var td1=tr.getElementsByTagName("td");
            console.log(td1[1].innerText);
            console.log(a);
            var jg=a*td1[1].innerText;
            console.log(jg);
            var td3=td1[3].innerText
            console.log(td3.innerText);
            td1[3].innerText=jg;
            sum();
        }
        function decrease(btn){
            var inputs = btn.parentNode.getElementsByTagName("input");
            var amout=inputs[1].value;
            if(amout==1){
                return;
            }
            amout.value=--amout;
            var tr=btn.parentNode.parentNode;
            var tds=tr.getElementsByTagName("td");
            var price=tds[1].innerHTML;
            tds[3].innerHTML=price*amout;
            sum();
        }



        //计算价格

        function sum(){
            console.log("sum");
            var tbody=document.getElementById("goods");
            var trs=tbody.getElementsByTagName("tr");
            var s=0;
            for (var i = 0; i < trs.length; i++) {
                var td=trs[i].getElementsByTagName("td")[3];
                console.log(td);
                s+=parseInt(td.innerHTML);
                console.log(s);
            }
            var sunt=document.getElementById("total");
            sunt.innerText=s;
        }
    </script>
  </head>
  <body>
    <h1>真划算</h1>
    <table>
      <tr>
        <th>商品</th>
        <th>单价(元)</th>
        <th>颜色</th>
        <th>库存</th>
        <th>好评率</th>
        <th>操作</th>
      </tr>   
      <tr>
        <td>罗技M185鼠标</td>
        <td>80</td>
        <td>黑色</td>
        <td>893</td>
        <td>98%</td>
        <td align="center">
          <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        </td>
      </tr>
      <tr>
        <td>微软X470键盘</td>
        <td>150</td>
        <td>黑色</td>
        <td>9028</td>
        <td>96%</td>
        <td align="center">
          <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        </td>
      </tr>
      <tr>
        <td>洛克iphone6手机壳</td>
        <td>60</td>
        <td>透明</td>
        <td>672</td>
        <td>99%</td>
        <td align="center">
          <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        </td>
      </tr>
      <tr>
        <td>蓝牙耳机</td>
        <td>100</td>
        <td>蓝色</td>
        <td>8937</td>
        <td>95%</td>
        <td align="center">
          <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        </td>
      </tr>
      <tr>
        <td>金士顿U盘</td>
        <td>70</td>
        <td>红色</td>
        <td>482</td>
        <td>100%</td>
        <td align="center">
          <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        </td>
      </tr>
    </table>

    <h1>购物车</h1>
    <table>
      <thead>
        <tr>
          <th>商品</th>
          <th>单价(元)</th>
          <th>数量</th>
          <th>金额(元)</th>
          <th>删除</th>
        </tr>
      </thead>
      <tbody id="goods">
        <!-- <tr>
          <td>罗技M185鼠标</td>
          <td>80</td>
          <td align="center">
            <input type="button" value="-"/>
            <input type="text" size="3" readonly value="1"/>
            <input type="button" value="+"/>
          </td>
          <td>80</td>
          <td align="center"><input type="button" value="x"/></td>
        </tr> -->
      </tbody>
      <tfoot>
        <tr>
          <td colspan="3" align="right">总计</td>
          <td id="total"></td>
          <td></td>
        </tr>
      </tfoot>
    </table>    
  </body>
</html>
weixin_33932129
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
购物车的实现(基于session)
A_jungle的博客
05-26 1600
1 首先封装与购物车有关的对象 2. 对象的封装 product.java略 **CartItem.java** public class CartItem { private Product product ; //购物项中购买的商品数量 private int buyNum ; //购物项小计 private double subTotal ; } **Cart.java** pub...
商城项目购物车的实现
刻苦的樊同学
03-02 3722
商城项目购物车的实现一，新建购物车的实体类Cart二，在选择商品类型页面进行页面跳转三，在controller进行添加商品对象并记入session四，购物车页面接收购物车信息并展示五，补充说明 首先是springboot和thymeleaf整合的demo项目 一，新建购物车的实体类Cart public class Cart implements java.io.Serializable{ ...
Java实现购物车模块模拟-架构搭建（面向对象编程实现）
weixin_52270382的博客
01-16 1164
【代码】Java实现购物车模块模拟-架构搭建（面向对象编程实现）
Python 模拟购物车的实例讲解
09-21
6. **主函数**：`shopping_chart()` 是整个模拟购物车系统的入口，它实现了人机交互界面，根据用户输入调用上述函数执行相应的操作，并确保在退出前完成数据的更新和保存。 在实现过程中，文件操作是关键，因为我们...
商城购物实现代码
05-20
模拟网上商城网站 采用ssm 框架 实现了 购物车 商品的怎删改查，图片上传，轮播图等功能功能试用于java 开发的学者学习和参考
Jquery仿制淘宝前台的购物车[收集].pdf
10-11
这篇文档主要讲解了如何使用jQuery来实现一个类似于淘宝前台购物车的功能。这是一个前端实现的示例，不涉及后端数据库的交互，因此它是一个纯粹的实验性质的项目。 在jQuery代码中，首先通过`$(document).ready()`...
VUE实现Xmall商城全栈开发_下
06-21
本项目是集vue2.6+vuex+vue- router+Element Ul+ES6+webpack+axios+...本项目以实战项目为切入点，模拟公司Vue项目研发流程，从头到尾讲解项目功能实现和优化、打包上线流程等，帮助提高你的技术层级，突破技术瓶颈。
购物车实现过程
小码哥222的博客
09-15 1080
购物车实现过程： 购物车： 前提：已经实现了单点登陆。 1、添加购物车 1）用户未登陆 1、把用户添加的商品保存到cookie中。 2、若禁用cookie，则可以保存在浏览器的Locl Story中。 2）用户已登录 1、保存在redis缓存中【为了快速读写】 //使用hash结构存储。 2、再往mysql数据库中存储一份数据，保障数据的安全性问题。 2、展示购物车 1）未登录状...
html实现仿淘宝购物车功能
04-16
实现了淘宝的购物车功能，可添加购物车，删除商品，等等功能，界面美观
Java实现购物车功能
qq_47387991的博客
03-09 6238
需求： 模拟购物车模块的功能，需要实现添加商品到购物车中去，同时需要提供修改商品的购买数量，结算商品价格功能（请使用面向对象编程来解决）。 代码实现： ShopCarTest 类： package mianxiangduixiang.demo; import java.util.Scanner; import java.util.SortedMap; /** * 需求: * 模拟购物车模块的功能，需要实现添加商品到购物车中去，同时需要提供修改商品的 * 购买数量，结算商品...
python购物车简单实现编写
honeygirl_的博客
06-10 490
伪代码： 可随时退出启动后让用户输入工资 然后打印列表 允许用户根据商品编号购买商品 用户选择商品后 检测余额是否足够 够就扣，不够就提示 退出时，打印一下购买的商品和余额 代码实现： product_list = [ ("MAX",9000), ("littlecar",520000), ("dress",249), ("python book",75), ...
HTML两种简单的购物车
热门推荐
WWGtest的博客
03-30 2万+
第一种&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="text/javascript" src="js/angular.min.js"
HTML+CSS实现购物车表格
qq_37086980的博客
11-13 9432
HTML: <main> <div class="container"> <table border="0" cellspacing = "0" id = "shoppingcartinfo"> <thead> <tr> <th width = ..
HTML的购物车案例
qq_1114382703的博客
03-10 4105
HTML购物车案例
node实现购物车功能
xyphf的博客
12-02 3871
node服务端 配置转发代理 config/index.js // see http://vuejs-templates.github.io/webpack for documentation. var path = require('path') module.exports = { build: { env: require('./prod.env'), inde...
Python使用列表模拟购物车购物过程
最新发布
05-17
这个示例代码实现了以下功能： 1. 创建了一个空的购物车列表和一个商品列表。 2. 打印了商品列表，让用户选择要购买的商品。 3. 如果用户选择了商品，将商品加入购物车。 4. 当用户输入“q”时，退出购物流程。 5. ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值