原生js實現購物車功能
本文實例為大家分享了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='http://www.aoyou183.cn/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='http://www.aoyou183.cn/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='http://www.aoyou183.cn/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='http://www.aoyou183.cn/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='http://www.aoyou183.cn/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='http://www.aoyou183.cn/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='http://www.aoyou183.cn/bcjs/images/5a1f5664Nfa934fac.jpg'> <input type='button' value='添加至購物車' onclick='add(this)'> </div> </div></body></html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
網公網安備