文章详情页

原生js实现购物车功能

【字号：大中小】日期：2024-04-18 15:21:57浏览：47作者：猪猪

本文实例为大家分享了js实现购物车功能的具体代码，供大家参考，具体内容如下

使用html配合原生js实现购物车功能

* 实现购物车商品数量的加减，注意数量最少为1，数量输入仅能为数字* 实现购物车商品的移除* 可以在同一页面再设计几个商品信息，每个商品有价格，图片，名称，以及添加至购物车按钮，点击按钮后添加至购物车* 实现购物车商品的总价计算

<!doctype html><html lang='en'><head> <meta charset='UTF-8'> <title>商品</title> <style> html,body{ margin: 0;} .row{ width:100%; height:300px; } .col{ width:200px; height:216px; margin: 0px 1px 0px 1px; padding-top: 2px; border:solid black 1px; float:left; text-align:center; } .col img { width: 150px;} </style> <script src='https://www.haobala.com/bcjs/js/jquery-3.2.1.min.js'></script> <script> function calculate() { var tbody = document.getElementById('tb'); var prices = tbody.querySelectorAll('td:nth-child(4)'); var numbers = tbody.querySelectorAll('td:nth-child(5)>input[type=number]'); var checkboxes = tbody.querySelectorAll('th:nth-child(1)>input'); //console.log(prices); //console.log(numbers); //console.log(checkboxes); var total=0; for(var i = 0; i < prices.length; i++) { console.log('价格：' +parseInt(prices[i].innerText)+' 数量：'+parseInt(numbers[i].value) + '是否勾选:' + checkboxes[i].checked); if(checkboxes[i].checked){ total += parseInt(prices[i].innerText)*parseInt(numbers[i].value); } } console.log('总价格：' + total); document.getElementById('total').innerText = total; } // 移除商品 function del(me) { var tr = me.parentNode.parentNode; var tbody = tr.parentNode; tbody.removeChild(tr); calculate(); } // 增加商品数量 function jia(me) { var td = me.parentNode; var inputs = td.getElementsByTagName('input'); // 找到此td下所有input标签 // inputs[1].value = inputs[1].value - 0 + 1; // 用-0的办法转为数字 // parseInt 将字符串转整数 parseFloat 将字符串转小数 inputs[1].value = parseInt(inputs[1].value) + 1; calculate(); } // 减少商品数量 function jian(me) { var td = me.parentNode; var num = td.querySelector('input[type=number]');// 只查找有type=number属性的input标签 var r = num.value - 1; if( r >= 1) { // 只有减得的结果是大于等于1的情况下才需要改变文本框的值 num.value = r; calculate(); } } // 改变复选框的选中状态 function check(me) { var tbody = document.getElementById('tb'); var inputs = tbody.querySelectorAll('th input'); for(var i = 0; i <inputs.length; i++) { inputs[i].checked = me.checked; // 根据me的checked状态去修改下面的每个checked状态 } calculate(); } // 添加商品至购物车 function add(me) { var tbody = document.getElementById('tb'); var div = me.parentNode; var spans = div.getElementsByTagName('span'); // 获得商品名字和价格的span var name = spans[0].innerText; // 获得商品名字 var col_1 = tbody.querySelectorAll('td:nth-child(2)'); // nth-child 作为第几个孩子 var found = null; // found 变量代表购物车中找到的td for(var i = 0; i<col_1.length; i++) { if( col_1[i].innerText == name) { found = col_1[i]; break; } } if(found != null) { //商品名字存在 // 修改数量 found 是找到的td var tr = found.parentNode; var input = tr.querySelector('td:nth-child(5)>input:last-child'); console.log(input); jia(input); } else { //商品名字不存在 // 添加商品 var tr = document.createElement('tr'); var th = document.createElement('th'); th.innerHTML = ’<input type='checkbox' checked onclick='calculate()'>’; var td1 = document.createElement('td'); td1.innerText = spans[0].innerText; var td2 = document.createElement('td'); var img = document.createElement('img'); img.src = div.getElementsByTagName('img')[0].src; img.width = '100'; td2.appendChild(img); var td3 = document.createElement('td'); td3.innerText = spans[1].innerText; var td4 = document.createElement('td'); td4.innerHTML = ’<input type='button' value='-' onclick='jian(this)'><input type='number' value='1'><input type='button' value='+' onclick='jia(this)'>’; var td5 = document.createElement('td'); td5.innerHTML = ’<input type='button' value='移除' onclick='del(this)'>’; tr.appendChild(th); tr.appendChild(td1); tr.appendChild(td2); tr.appendChild(td3); tr.appendChild(td4); tr.appendChild(td5); tbody.appendChild(tr); calculate(); } } </script></head><body>  <div> <table border='1' width='100%'> <thead> <tr> <th><input type='checkbox' onclick='check(this)'></th> <th>图片</th> <th>名称</th> <th>价格</th> <th>数量</th> <th>移除</th> </tr> </thead> <tbody id='tb'> <tr> <th><input type='checkbox' onclick='calculate()'></th> <td>商品1</td> <td><img src='https://www.haobala.com/bcjs/images/5a0cf6bfN92a5a597.jpg' width='100'></td> <td>3000.00</td> <td> <input type='button' value='-' onclick='jian(this)'> <input type='number' value='1'> <input type='button' value='+' onclick='jia(this)'> </td> <td><input type='button' value='移除' onclick='del(this)'></td> </tr> <tr> <th><input type='checkbox' onclick='calculate()'></th> <td>商品2</td> <td><img src='https://www.haobala.com/bcjs/images/5a0cf672N3c785b7a.jpg' width='100'></td> <td>2000.00</td> <td> <input type='button' value='-' onclick='jian(this)'> <input type='number' value='1'> <input type='button' value='+' onclick='jia(this)'> </td> <td><input type='button' value='移除' onclick='del(this)'></td> </tr> </tbody> <tfoot> <tr> <td colspan='6'>总价<span id='total'>0</span> 元</td> </tr> </tfoot> </table> </div>  <div class='row'> <div class='col'> <p><span>商品1</span>价格:<span>3000.00</span></p> <img src='https://www.haobala.com/bcjs/images/5a0cf6bfN92a5a597.jpg'> <input type='button' value='添加至购物车' onclick='add(this)'> </div> <div class='col'> <p><span>商品2</span>价格:<span>2000.00</span></p> <img src='https://www.haobala.com/bcjs/images/5a0cf672N3c785b7a.jpg'> <input type='button' value='添加至购物车' onclick='add(this)'> </div> <div class='col'> <p><span>商品3</span>价格:<span>4000.00</span></p> <img src='https://www.haobala.com/bcjs/images/5a1f5ed3Nfa577958.jpg'> <input type='button' value='添加至购物车' onclick='add(this)'> </div> <div class='col'> <p><span>商品4</span>价格:<span>3500.00</span></p> <img src='https://www.haobala.com/bcjs/images/5a1f5664Nfa934fac.jpg'> <input type='button' value='添加至购物车' onclick='add(this)'> </div> </div></body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好吧啦网。

JavaScript

上一条：js 将多个对象合并成一个对象 assign方法的实现下一条：原生js实现分页效果

相关文章：

1. Admin - SpringBoot + Maven 多启动环境配置实例详解2. Android WebView通过动态的修改js去拦截post请求参数实例3. SpringBoot2整合Ehcache组件实现轻量级缓存管理4. spring boot集成mongodb的增删改查的示例代码5. Django def clean()函数对表单中的数据进行验证操作6. 如何用python写个模板引擎7. django中嵌套的try-except实例8. 浅谈vue实现双向事件绑定v-model的原理9. Android自定义View实现气泡动画10. Django结合使用Scrapy爬取数据入库的方法示例

排行榜

					
					Android WebView通过动态的修改js去拦截post请求参数实例
浅谈vue实现双向事件绑定v-model的原理
Django def clean()函数对表单中的数据进行验证操作
spring boot集成mongodb的增删改查的示例代码
SpringBoot2整合Ehcache组件实现轻量级缓存管理
Django 5种类型Session使用方法解析
Django ORM 查询表中某列字段值的方法
django中嵌套的try-except实例
Django结合使用Scrapy爬取数据入库的方法示例
Admin - SpringBoot + Maven 多启动环境配置实例详解
如何用python写个模板引擎
				

热门标签