用JS模拟购物车
2016-04-06 23:09
351 查看
需求:用Javascript模拟购物车页面,要求上面是商品,下面是购物车。按添加可以将上面的物品添加到下面的购物车中。
购物车中有加和减按钮,可以加减商品的数量。按删除可以将商品删除。
最后,每单件商品有价格合计,购物车中所有商品有总合计。
cart.html
cart.js
购物车中有加和减按钮,可以加减商品的数量。按删除可以将商品删除。
最后,每单件商品有价格合计,购物车中所有商品有总合计。
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; }
相关文章推荐
- JavaScript 拖动
- js常用分页
- 【优化】JSON.stringify()使用优化
- js获取浏览器的版本信息
- js获取url中的查询参数
- js控制html页面滚动条到底端触发事件
- js实现自定义话框的移动和剧中显示
- jsp页面可输入下拉框实现
- js执行时间(调试)
- Javascript事件详解
- json串与对象转换
- JS中的实例方法与静态方法
- 关于 javascript 处理json格式日期转换的方法
- JavaScript基础教程01编辑器的选择和两种链接方法
- 实用的图片轮播js代码可直接引用不需要设置css样式
- JavaScript之数据类型转换——隐式转换与运算符
- JavaScript 自定义事件
- js EventUtil addhandler removehandler
- 【新人笔记16.04.06】JS--定义属性
- javascript双等号引起的类型转换