原生js實(shí)現(xiàn)購(gòu)物車(chē)功能
本文實(shí)例為大家分享了js實(shí)現(xiàn)購(gòu)物車(chē)功能的具體代碼，供大家參考，具體內(nèi)容如下
使用html配合原生js實(shí)現(xiàn)購(gòu)物車(chē)功能
* 實(shí)現(xiàn)購(gòu)物車(chē)商品數(shù)量的加減，注意數(shù)量最少為1，數(shù)量輸入僅能為數(shù)字* 實(shí)現(xiàn)購(gòu)物車(chē)商品的移除* 可以在同一頁(yè)面再設(shè)計(jì)幾個(gè)商品信息，每個(gè)商品有價(jià)格，圖片，名稱，以及添加至購(gòu)物車(chē)按鈕，點(diǎn)擊按鈕后添加至購(gòu)物車(chē)* 實(shí)現(xiàn)購(gòu)物車(chē)商品的總價(jià)計(jì)算
<!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.hdgsjgj.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('價(jià)格：' +parseInt(prices[i].innerText)+' 數(shù)量：'+parseInt(numbers[i].value) + '是否勾選:' + checkboxes[i].checked); if(checkboxes[i].checked){ total += parseInt(prices[i].innerText)*parseInt(numbers[i].value); } } console.log('總價(jià)格：' + total); document.getElementById('total').innerText = total; } // 移除商品 function del(me) { var tr = me.parentNode.parentNode; var tbody = tr.parentNode; tbody.removeChild(tr); calculate(); } // 增加商品數(shù)量 function jia(me) { var td = me.parentNode; var inputs = td.getElementsByTagName('input'); // 找到此td下所有input標(biāo)簽 // inputs[1].value = inputs[1].value - 0 + 1; // 用-0的辦法轉(zhuǎn)為數(shù)字 // parseInt 將字符串轉(zhuǎn)整數(shù) parseFloat 將字符串轉(zhuǎn)小數(shù) inputs[1].value = parseInt(inputs[1].value) + 1; calculate(); } // 減少商品數(shù)量 function jian(me) { var td = me.parentNode; var num = td.querySelector('input[type=number]');// 只查找有type=number屬性的input標(biāo)簽 var r = num.value - 1; if( r >= 1) { // 只有減得的結(jié)果是大于等于1的情況下才需要改變文本框的值 num.value = r; calculate(); } } // 改變復(fù)選框的選中狀態(tài) 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; // 根據(jù)me的checked狀態(tài)去修改下面的每個(gè)checked狀態(tài) } calculate(); } // 添加商品至購(gòu)物車(chē) function add(me) { var tbody = document.getElementById('tb'); var div = me.parentNode; var spans = div.getElementsByTagName('span'); // 獲得商品名字和價(jià)格的span var name = spans[0].innerText; // 獲得商品名字 var col_1 = tbody.querySelectorAll('td:nth-child(2)'); // nth-child 作為第幾個(gè)孩子 var found = null; // found 變量代表購(gòu)物車(chē)中找到的td for(var i = 0; i<col_1.length; i++) { if( col_1[i].innerText == name) { found = col_1[i]; break; } } if(found != null) { //商品名字存在 // 修改數(shù)量 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> <!--這里寫(xiě)購(gòu)物車(chē)代碼--> <div> <table border='1' width='100%'> <thead> <tr> <th><input type='checkbox' onclick='check(this)'></th> <th>圖片</th> <th>名稱</th> <th>價(jià)格</th> <th>數(shù)量</th> <th>移除</th> </tr> </thead> <tbody id='tb'> <tr> <th><input type='checkbox' onclick='calculate()'></th> <td>商品1</td> <td><img src='http://www.hdgsjgj.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.hdgsjgj.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'>總價(jià)<span id='total'>0</span> 元</td> </tr> </tfoot> </table> </div> <!-- 商品列表 --> <div class='row'> <div class='col'> <p><span>商品1</span>價(jià)格:<span>3000.00</span></p> <img src='http://www.hdgsjgj.cn/bcjs/images/5a0cf6bfN92a5a597.jpg'> <input type='button' value='添加至購(gòu)物車(chē)' onclick='add(this)'> </div> <div class='col'> <p><span>商品2</span>價(jià)格:<span>2000.00</span></p> <img src='http://www.hdgsjgj.cn/bcjs/images/5a0cf672N3c785b7a.jpg'> <input type='button' value='添加至購(gòu)物車(chē)' onclick='add(this)'> </div> <div class='col'> <p><span>商品3</span>價(jià)格:<span>4000.00</span></p> <img src='http://www.hdgsjgj.cn/bcjs/images/5a1f5ed3Nfa577958.jpg'> <input type='button' value='添加至購(gòu)物車(chē)' onclick='add(this)'> </div> <div class='col'> <p><span>商品4</span>價(jià)格:<span>3500.00</span></p> <img src='http://www.hdgsjgj.cn/bcjs/images/5a1f5664Nfa934fac.jpg'> <input type='button' value='添加至購(gòu)物車(chē)' onclick='add(this)'> </div> </div></body></html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. ASP刪除img標(biāo)簽的style屬性只保留src的正則函數(shù)2. 使用css實(shí)現(xiàn)全兼容tooltip提示框3. 一文帶你搞懂JavaScript中的進(jìn)制與進(jìn)制轉(zhuǎn)換4. 得到XML文檔大小的方法5. 詳解JS前端使用迭代器和生成器原理及示例6. javascript xml xsl取值及數(shù)據(jù)修改第1/2頁(yè)7. 詳解CSS偽元素的妙用單標(biāo)簽之美8. ASP編碼必備的8條原則9. 匹配模式 - XSL教程 - 410. 怎樣才能用js生成xmldom對(duì)象，并且在firefox中也實(shí)現(xiàn)xml數(shù)據(jù)島？
網(wǎng)公網(wǎng)安備