怎么在JavaScript中利用DOM實(shí)現(xiàn)一個(gè)購物車功能

發(fā)布時(shí)間：2021-01-14 15:51:12 來源：億速云閱讀：295 作者：Leah 欄目：web開發(fā)

這篇文章給大家介紹怎么在JavaScript中利用DOM實(shí)現(xiàn)一個(gè)購物車功能，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

代碼如下：

<!DOCTYPE html>
<html>
 <head>
 <title> new document </title>
 <meta charset="utf-8">
 <style>
 table{
 border:1px solid #000;
 border-collapse:collapse;
 width:600px;
 }
 td{
 border:1px solid #000;
 text-align:center;
 }
 </style>
 </head>
 <body>
 <table>
 <thead>
 <tr>
 <td>名稱</td>
 <td>單價(jià)</td>
 <td>數(shù)量</td>
 <td>小計(jì)</td>
 </tr>
 </thead>
 <tbody id="tbody">
 <tr>
 <td>iphone6</td>
 <td>4488</td>
 <td>
  <button onclick="btnClick(this)">-</button>
  <span>1</span>
  <button onclick="btnClick(this)">+</button>
 </td>
 <td>4488</td>
 </tr>
 <tr>
 <td>iphone6</td>
 <td>5288</td>
 <td>
  <button onclick="btnClick(this)">-</button>
  <span>1</span>
  <button onclick="btnClick(this)">+</button>
 </td>
 <td>5288</td>
 </tr>
 <tr>
 <td>iphone6</td>
 <td>4288</td>
 <td>
  <button onclick="btnClick(this)">-</button>
  <span>1</span>
  <button onclick="btnClick(this)">+</button>
 </td>
 <td>4288</td>
 </tr>
 </tbody>
 <tfoot>
 <td colspan="3" align="right">總計(jì)：</td>
 <td id="all_total"></td>
 </tfoot>
 </table>
 <script>
 function btnClick(btn){
 //聲明 spanValue 變量，用于保存 span中的數(shù)據(jù)
 var spanValue;
 //1、更改 span 中的數(shù)據(jù)
 //1.1 判斷 btn 是+還是-
 if(btn.textContent == "+"){
 //1.2 根據(jù) btn 找到 span
 var span=btn.previousElementSibling;
 //1.3 獲取 span里的數(shù)據(jù)
 spanValue=parseInt(span.textContent);
 //1.4 更新 span中的數(shù)據(jù)
 spanValue+=1;
 span.textContent=spanValue;
 }else{
 //減法操作
 var span = btn.nextElementSibling;
 //1.3 獲取 span里的數(shù)據(jù)
 spanValue=parseInt(span.textContent);
 //1.4 更新 span中的數(shù)據(jù)
 if(spanValue > 1){
  spanValue-=1;
  span.textContent=spanValue;
 }
 }
 //2.計(jì)算 小計(jì)
 //2.1 先 獲取 單價(jià) 元素(tdPrice)
 var tdPrice=btn.parentNode.previousElementSibling;
 //2.2 獲取 單價(jià) 元素中的 數(shù)值(price)
 var price=parseInt(tdPrice.textContent);
 //2.3 計(jì)算小計(jì)(spanValue*price),保存在 total
 var total=price*spanValue;
 //2.4 獲取 小計(jì) 元素(tdTotal)
 var tdTotal=btn.parentNode.nextElementSibling;
 //2.5 將 total 的值 賦值給 tdTotal元素
 tdTotal.textContent=total;
 //調(diào)用 計(jì)算總計(jì) 的函數(shù)
 calAllTotal();
 }
 /**
 * 計(jì)算總計(jì)
 */
 function calAllTotal(){
 //1、獲取 id為tbody 中的所有tr
 var tbody = document.getElementById("tbody");
 var trs=tbody.getElementsByTagName("tr");
 console.log(trs);
 //2、循環(huán)遍歷所有tr，找到每個(gè)tr的最后一個(gè)td
 var all_total=0;
 for(var i=0;i<trs.length;i++){
 var tr=trs[i];
 //3、累加 每個(gè) td 的值 計(jì)算總計(jì)
 //3.1 獲取 tr 中的 最后一個(gè)td
 var lastTd=tr.lastElementChild;
 var lastTdValue=parseInt(lastTd.textContent);
 all_total += lastTdValue;
 }
 //4、賦值
 document.getElementById("all_total").textContent=all_total;
 }
 //加載時(shí)調(diào)用 calAllTotal() 計(jì)算現(xiàn)有的總計(jì)
 calAllTotal();
 </script>
 </body>
</html>

關(guān)于怎么在JavaScript中利用DOM實(shí)現(xiàn)一個(gè)購物車功能就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

怎么在JavaScript中利用DOM實(shí)現(xiàn)一個(gè)購物車功能

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽