使用JavaScript实现简单的购物车功能

使用JavaScript完成购物车功能

可以通过加入购物车按钮实现商品的添加，并且数量的加减、购物车中的删除都会进行商品库存的改变

<!DOCTYPE html>
<html><head><title>购物车</title><meta charset="utf-8" /><!-- 引入jquery文件 --><script src="js/jquery.min.js"></script><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;}</style><script type="text/javascript">//添加购物车方法  参数btn为点击的按钮对象function addCar(btn) {var tr = btn.parentNode.parentNodevar tds = tr.getElementsByTagName("td");var productName = tds[0].innerText;var price = tds[1].innerText;//判断库存是否充足var stock = tds[3].innerText;if(stock == 0) {return;} else {tds[3].innerText = parseInt(stock)-1;}//判断商品是否已添加var tbody = document.getElementById("goods");var trs = tbody.getElementsByTagName("tr");for(var i=0; i<trs.length; i++) {var tr = trs[i];var tds = tr.getElementsByTagName("td");var name = tds[0].innerText;  //商品名if(name == productName) {changeNum(1, tds[2].getElementsByTagName("input")[2], "fromCarBtn");  //调用修改个数方法return;}}//组装一条数据var html = '<td>'+productName+'</td>'+'<td>'+price+'</td>'+'<td align="center">'+'<input type="button" value="-" onclick="changeNum(-1, this)"/>'+'<input type="text" size="3" readonly value="1"/>'+'<input type="button" value="+" onclick="changeNum(1, this)"/>'+'</td>'+'<td class="moneyTd">'+price+'</td>'+'<td align="center"><input type="button" value="x" onclick="del(this)"/></td>';var table = document.getElementById("goods");var newTr = table.insertRow();newTr.innerHTML = html;//计算总金额totalMoney();           }//计算总金额function  totalMoney() {var tds = document.getElementsByClassName("moneyTd");var money = 0;for(var i=0; i<tds.length; i++) {money += parseFloat(tds[i].innerText);}document.getElementById("total").innerText = money;}//修改商品数据及金额function changeNum(num, btn, flag) {var productName = btn.parentNode.parentNode.getElementsByTagName("td")[0].innerHTML;var table = document.getElementsByTagName("table")[0];var trs = table.getElementsByTagName("tr");var input = btn.parentNode.getElementsByTagName("input")[1];var oldNum = parseInt(input.value) ;//判断是否从添加购物车方法调用此方法if (flag != "fromCarBtn") {//判断库存for(var i=1; i<trs.length; i++) {var tds = trs[i].getElementsByTagName("td");var pn = tds[0].innerText;if(productName == pn) {var stock = tds[3].innerText;if (stock == 0 && num == 1 ) {return;} else if(oldNum ==1 && num==-1){return;}else{tds[3].innerText = parseInt(stock) - num;}break;}}}if(oldNum == 1 && num == -1) {return ;}var newNum = parseInt(oldNum)+num;//修改数量input.value = newNum;//修改金额var tds = btn.parentNode.parentNode.getElementsByTagName("td");var price = tds[1].innerText;tds[3].innerText = parseFloat(price) * newNum;//计算总金额totalMoney();}//删除商品function del(btn) {if (confirm("是否确认删除")) {var tr = btn.parentNode.parentNode;var name = tr.getElementsByTagName('td')[0].innerTextvar count = parseInt(tr.getElementsByTagName('td')[2].getElementsByTagName('input')[1].value)//console.log(count)var trs = document.getElementsByTagName('table')[0].getElementsByTagName('tr')for(var i=1;i<trs.length;i++){if(trs[i].getElementsByTagName('td')[0].innerText == name){//console.log(parseInt(trs[i].getElementsByTagName('td')[3].innerText))trs[i].getElementsByTagName('td')[3].innerText = parseInt(trs[i].getElementsByTagName('td')[3].innerText)+count//break}}var table= tr.parentNode;table.removeChild(tr);}totalMoney();}</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>6</td><td>98%</td><td align="center"><input type="button" value="加入购物车" onclick="addCar(this)"/></td></tr><tr><td>微软X470键盘</td><td>150</td><td>黑色</td><td>7</td><td>96%</td><td align="center"><input type="button" value="加入购物车" onclick="addCar(this)"/></td></tr><tr><td>洛克iphone6手机壳</td><td>60</td><td>透明</td><td>8</td><td>99%</td><td align="center"><input type="button" value="加入购物车" onclick="addCar(this)"/></td></tr><tr><td>蓝牙耳机</td><td>100</td><td>蓝色</td><td>10</td><td>95%</td><td align="center"><input type="button" value="加入购物车" onclick="addCar(this)"/></td></tr><tr><td>金士顿U盘</td><td>70</td><td>红色</td><td>9</td><td>100%</td><td align="center"><input type="button" value="加入购物车" onclick="addCar(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">0</td><td></td></tr></tfoot></table>    </body>
</html>

使用JavaScript实现简单的购物车功能相关推荐

使用jQuery实现简单的购物车功能
使用jQuery实现简单的购物车功能 <!DOCTYPE html> <html><head><title>购物车</title><m ...
vue实现一个简单的购物车功能
今天做了一个简单的购物车功能,主要用了计算属性,指令等知识点,代码如下: <template> <div><div id="cart" v-cloak ...
javascript实现简单的收藏功能
想用js实现一个简单的收藏功能:点击页面上的一个收藏按钮,然后就会收藏网址到收藏夹,以便于下次快捷查看. 最开始的时候打算找一下jquery插件,找了半天没找到,哎,自己写原生的js代码实现兼容各个浏 ...
vuex——做简单的购物车功能
购物车组件 <template><div><h1>vuex-shopCart</h1><div class="shop-listbox& ...
html+css+jquery实现简单的购物车功能
HTML网页代码 <!DOCTYPE html> <html lang="en"> <head> </head> <body& ...
php购物车数据表,PHP开发简单购物车功能创建数据库表
前面的章节我们分别介绍了javascript和jquery实现购物车功能. 本章节我们将通过php代码来为朋友们讲解购物车功能实现思路. 方法是把从数据库中获取的商品存入数组,对数组进行操作,数组中的 ...
uniapp实现购物车功能
uniapp实现购物车功能周六我看见一个有个公司招聘需要试岗3天,并使用uniapp完成购物车,直播间,地图,首页四个功能方能通过,于是乎,我趁手上没事就打算自己写一遍,虽然我的项目没用到,但是多掌 ...
使用 JavaScript 实现简单候选项推荐功能（模糊搜索）【收藏】【转】
当我们使用 Google 等搜索功能时,会出现与搜索内容有关的候选项.使用 JavaScript 搜索字符串,通常会使用 indexOf 或者 search 函数,但是非常僵硬,只能搜索匹配特定词语. ...
android 购物车实现,Android Studio实现简单购物车功能
Android Studio实现简单购物车功能发布时间:2020-08-30 17:23:56 来源:脚本之家阅读:241 作者:攀岩嘉本文实例为大家分享了Android九宫格图片展示的具体代码 ...

使用JavaScript实现简单的购物车功能

使用JavaScript完成购物车功能

使用JavaScript实现简单的购物车功能相关推荐

最新文章

热门文章