你需要了解的纯原生JS实现带有功能的前端购物车
生活随笔
收集整理的這篇文章主要介紹了
你需要了解的纯原生JS实现带有功能的前端购物车
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
先來介紹一下都有哪些功能叭
好嘞，由于代碼的注釋已經非常的詳細了，在此不再做過多的解釋了，沒用任何框架了，看著注釋代碼很易懂！
先上HTML5的代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>購物車案例</title><style>*{padding: 0;margin: 0;}.left{width: 55%;margin: 25px;float: left;}.right{float: left;margin-top: 60px;}ul li{color: red;font-weight: bold;}h1{text-align: center;color: red;}table{border: 2px solid #aaa;width: 100%;border-collapse: collapse;}th,td{border: 2px solid #bbb;padding: 6px;}tr td:last-child{text-align: center;}tr td:nth-child(1) img{vertical-align: middle;}.num{text-align: center;}#allchoose{margin-left: 10px;}#car{width: 100%;border-collapse: collapse;}#car table{border: 2px solid #aaa;width: 100%;border-collapse: collapse;}</style> </head> <body> <div class="left"><h1>購書清單</h1><table><thead><tr><th>書名</th><th>單價</th><th>作者</th><th>出版社</th><th>庫存</th><th>操作</th></tr></thead><tbody id="items"><tr><td><img src="book-images/dl.jpg">深度學習</td><td>100</td><td>趙老師</td><td>科學出版社</td><td>129</td><td><input type="button" value="加入購物車" onclick="add_book(this)"></td></tr><tr><td><img src="book-images/ml.jpg">機器學習</td><td>120</td><td>周老師</td><td>清華大學出版社</td><td>6</td><td><input type="button" value="加入購物車" onclick="add_book(this)"></td></tr><tr><td><img src="book-images/cv.jpg">計算機視覺</td><td>130</td><td>李老師</td><td>國防工業出版社</td><td>666</td><td><input type="button" value="加入購物車" onclick="add_book(this)"></td></tr><tr><td><img src="book-images/dip.jpg">數字圖像處理</td><td>140</td><td>彭老師</td><td>人民郵電出版社</td><td>450</td><td><input type="button" value="加入購物車" onclick="add_book(this)"></td></tr><tr><td><img src="book-images/webgl.jpg">webGL編程指南</td><td>150</td><td>吳老師</td><td>清華大學出版社</td><td>99</td><td><input type="button" value="加入購物車" onclick="add_book(this)"></td></tr><tr><td><img src="book-images/unity.jpg">Unity3D游戲開發</td><td>200</td><td>駱老師</td><td>浙江大學出版社</td><td>300</td><td><input type="button" value="加入購物車" onclick="add_book(this)"></td></tr></tbody></table><h1>購物車</h1><div id="car"><div id="allchoose"><input type="button" id="allSelected" value="全選"><input type="button" id="_Selected" value="反選"><input type="button" id="delete" value="刪除商品"></div><br><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='center'>總計</td><td id="total" colspan="2">0</td></tr></tfoot></table></div> </div> <div class="right"><ul><li>功能介紹：</li><li>添加購物車，清單庫存數量會對應減少，庫存不足會警告</li><li>從購物車刪除，庫存將返回清單，總價相應變化</li><li>點擊"-"，數量會返回到清單庫存</li><li>點擊"+"，清單中庫存會減少，庫存不足會警告</li><li>勾選或取消勾選商品總價會相應變化</li><li>總價默認計算被選中的商品，添加商品到購物車時默認被選中</li><li>可以進行全選和反選，并一鍵刪除，庫存返回清單，總價改變</li></ul> </div><script src="goods.js"></script> </body></html>然后是JS的代碼，代碼文件名為“goods.js”
//控制全選 var targets=document.getElementsByName('choose') document.getElementById('allSelected').onclick=function(){ //全選for (var i=0;i<targets.length;i++){targets[i].checked=true;}total() //更新總價格 } document.getElementById('_Selected').onclick=function(){ // 反選for (var i=0;i<targets.length;i++){targets[i].checked=!targets[i].checked;//取反操作}total() //更新總價格 }document.getElementById('delete').onclick=function(){ //刪除var sign=targets.length //targets的起始長度var _length=0for(var i=0;i<targets.length;i++){if(targets[i].checked===true){_length++ //被選中的targets的長度}}var leftL=sign-_length //除去被選中后剩余的targets長度console.log(_length)console.log(leftL)while(targets.length>leftL){ //刪除一行，targets長度會減少1，而i++導致每次執行刪除操作只能刪除一半，故再套一層循環// console.log("targets: "+targets.length)for(var i=0;i<targets.length;i++){//執行循環后，targets長度會減半if(targets[i].checked===true){del(targets[i]) //調用刪除函數}}} }//將商品添加購物車 function add_book(btn){var tr=btn.parentNode.parentNodevar tds=tr.getElementsByTagName('td')var inner_name=tds[0].innerHTML //帶上HTML標簽var name=tds[0].innerText //書的名字，不帶HTML標簽// console.log(inner_name)// console.log(name)var price=tds[1].innerHTML //書的價格var leftAm=parseInt(tds[4].innerHTML)if (leftAm===0){alert('庫存不足!')return //如果庫存不足函數運行到這里會退出}//如果庫存充足繼續向下執行else{tds[4].innerHTML=leftAm-1}var tbody=document.getElementById('goods')var trs=tbody.getElementsByTagName('tr')// var row=tbody.insertRow(-1)//不能在此定義row，因為它會默認添加一個新的空行，會導致str的起始length是1而不是0，而且innerText獲取不到任何東西就會報錯，找了很久的bug原來是它！！！// console.log(trs.length)var flag=0 //定義flag來判斷在購物車中是否已經存在相同書籍for(var i=0;i<trs.length;i++){var tds=trs[i].getElementsByTagName('td')var book_name=tds[0].innerText //獲取書的名字if(book_name===name){//在購物車中找到了相同的書flag=1// var input=trs[i].getElementById('num') 如果把num設置成id，獲取不到內容，故改成classvar input=trs[i].getElementsByClassName('num')[0]// console.log(input)var value=parseInt(input.value)// console.log(value)input.value=value+1money=parseFloat(tds[3].innerHTML)tds[3].innerHTML=price*(value+1) //更新該書的總價格}}if(flag===0){var row=tbody.insertRow(-1)//-1表在當前行后插入行row.innerHTML="<td>"+"<input type='checkbox' name='choose' checked='true' onclick='total()'/>"+inner_name+"</td>"+"<td>"+price+"</td>"+"<td>"+"<input type=button value='-' onclick=change(this,-1) style='width: 20px'/>"+"<input type=text class=num value='1' size=1 readonly'/>"+"<input type=button value='+' onclick=change(this,+1) style='width: 20px'/>"+"</td>"+"<td>"+price+"</td>"+"<td>"+"<input type=button value='刪除' onclick='del(this)'/>"+"</td>"}total() }//增加或者減少n本書 function change(btn,n){var inputs=btn.parentNode.getElementsByTagName('input')var amount=parseInt(inputs[1].value)var tds=btn.parentNode.parentNode.getElementsByTagName('td')// var money=parseFloat(tds[3].innerHTML) //總價var price=parseFloat(tds[1].innerHTML) //單價if(amount<=0 && n<0){ //數量為0時不能再減少數量return}var name=tds[0].innerTextvar item_trs=document.getElementById('items').getElementsByTagName('tr')for (var i=0;i<item_trs.length;i++){var item_tds=item_trs[i].getElementsByTagName('td')// console.log(item_tds[0].innerText)if(item_tds[0].innerText===name){var item_amount=parseInt(item_tds[4].innerHTML)// console.log(item_amount)if(n>0 && item_amount<=0){alert("庫存不足！")return}item_tds[4].innerHTML=item_amount-n}}inputs[1].value=amount+ntds[3].innerHTML=price*(amount+n)total() }//點擊每行的刪除 function del(btn){var tr=btn.parentNode.parentNodevar tds=tr.getElementsByTagName('td')var inputs=tds[2].getElementsByTagName('input')var amount=parseInt(inputs[1].value) //獲取書的數量var name=tds[0].innerTextvar trs=document.getElementById('items').getElementsByTagName('tr')for (var i=0;i<trs.length;i++){var tds=trs[i].getElementsByTagName('td')var item_name=tds[0].innerText //清單中該書的數名字if(name===item_name){var item_amount=parseInt(tds[4].innerHTML) //清單中該書的數量tds[4].innerHTML=item_amount+amount}}tr.remove()//移除該行total()}//計算總金額 function total(){var tbody=document.getElementById('goods')var trs=tbody.getElementsByTagName('tr')var sum=0 //總價for (var i=0;i<trs.length;i++){var tds=trs[i].getElementsByTagName('td')var input=tds[0].children[0] //獲取到input標簽// console.log(tds[0].innerHTML)// console.log(input)var money=parseFloat(tds[3].innerHTML)if(input.checked===true){ //只有當商品被勾選時才會被計入總價sum+=money}}var total=document.getElementById('total')total.innerHTML=sum }最后的效果就是這樣的啦^_^
?
總結
以上是生活随笔為你收集整理的你需要了解的纯原生JS实现带有功能的前端购物车的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 纯JS实现省市县三级下拉联动
- 下一篇： 前端之登录注册页面案例