用JS模拟购物车

最新推荐文章于 2023-03-27 19:44:34 发布

dumzp13

最新推荐文章于 2023-03-27 19:44:34 发布

阅读量1.2k

点赞数

分类专栏：笔记小项目 javascript 文章标签： javascript Web前端小项目笔记

本文链接：https://blog.csdn.net/dumzp13/article/details/51079629

版权

本文通过JavaScript实现一个简单的购物车页面，包括商品展示、添加到购物车、数量增减及商品删除功能。购物车能显示每个商品的价格和总价，并提供了详细的代码实现。

摘要由CSDN通过智能技术生成

需求：用Javascript模拟购物车页面，要求上面是商品，下面是购物车。按添加可以将上面的物品添加到下面的购物车中。

购物车中有加和减按钮，可以加减商品的数量。按删除可以将商品删除。

最后，每单件商品有价格合计，购物车中所有商品有总合计。

cart.html

<!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" src="js/cart.js" >
    </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<