用JS模拟购物车

来源：互联网发布：js 表格 table 怎么写编辑：程序博客网时间：2024/04/28 06:43

需求：用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</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">      </tbody>     <tfoot>        <tr>          <td colspan="3" align="right">总计</td>          <td id="total"></td>          <td></td>        </tr>      </tfoot>    </table>      </body></html>

cart.js

var all = 0;//用全局变量记录总合计价格。function add_shoppingcart(btn) {//增加到购物车var tr = btn.parentNode.parentNode;var info = tr.children;var item = document.createElement("tr");var name = info[0].innerHTML;var price = parseInt(info[1].innerHTML);item.innerHTML = //创建购物车项'<td>'+name+'</td>'+'<td>'+price+'</td>'+'<td align="center">'+'<input type="button" value="-" onclick="reduce(this);"/> '+//要加空格的原因：因为字符串用"+"连接，不会将换行符当作空格，所以和原生空格不对称，所以手动加一个空格。'<input type="text" size="3" readonly value="1"/>'+'<input type="button" value="+" onclick="increase(this);"/> '+//函数要传入this，方便操作。'</td>'+'<td>'+price+'</td>'+'<td align="center"><input type="button" value="x" onclick="remove_shoppingcart(this)"/></td>';//做完这一步，就可以将cart.html中购物车的第一行删除了var cart = document.getElementById("goods");cart.appendChild(item);tr.remove();all += price;//改变全局总价changeTotal();//刷新总价}function remove_shoppingcart(btn) {var tr = btn.parentNode.parentNode;var children = tr.children;var price = parseInt(children[3].innerHTML);all -= price;changeTotal();//改变合计金额tr.innerHTML = "";//将祖节点置空}function reduce(btn) {//减少商品数量var amount = btn.nextElementSibling.value;if(amount==0){return;//若商品等于0则退出}amount--;btn.nextElementSibling.value = amount;//更新商品数量var value = parseInt(btn.parentNode.previousElementSibling.innerHTML);//获取商品单价btn.parentNode.nextElementSibling.innerHTML = value*amount;//更新商品总价all -= value;//更新全局总价。changeTotal();//刷新总价}function increase(btn) {//增加商品数量var amount = btn.previousElementSibling.value;amount++;btn.previousElementSibling.value = amount;//更新商品数量var value = parseInt(btn.parentNode.previousElementSibling.innerHTML);btn.parentNode.nextElementSibling.innerHTML = value*amount;all += value;//更新全局总价changeTotal();//刷新总价}function changeTotal() {//更新total函数，在每次改变购物车时使用。var total = document.getElementById("total");total.innerHTML = all;}

0 0