jQuery实现简单购物车功能

最新推荐文章于 2024-08-12 03:28:09 发布

layroy

最新推荐文章于 2024-08-12 03:28:09 发布

阅读量2.8k

点赞数 2

分类专栏： jQuery 文章标签： jquery html css

本文链接：https://blog.csdn.net/m0_57202083/article/details/120030375

版权

这篇博客介绍了如何使用jQuery来实现购物车的功能，包括添加商品、增减商品数量、商品价格计算、删除商品等操作。重点讲解了gwc-ds.js和gwc.js两个文件中的实现细节，如数量的增减如何影响库存，以及如何通过.toFixed(2)和toLocaleString()方法处理价格显示。

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

jQuery实现购物车功能有：

主要有添加商品

增加和减少商品数量

点击购物车时库存也相应的减少

数量的减少库存进行增加

根据增加、减少或选择的商品获取金额

实现商品价格的计算

删除把删除的数量归还到库存中

<!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 src="js/jquery-3.6.0.js"></script>
    <script src="gwc-ds.js" ></script>
   
  </head>
  <body>
    <h1>清 仓 大 甩 卖！</h1>
    <table>
      <tbody id="upGoods">
      <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>
    </tbody>
    </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