原生js實現購物車相關功能
阿新 • • 發佈：2017-11-10
parse ole child number ble doctype oat gin button
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>實現購物車的相關功能</title> <style> *{ margin:0; padding:0; } table{ width: 600px; border-collapse: collapse; }th,td{ border:1px solid #000; width: 150px; /*padding:5px 40px;*/ text-align: center; } #chart{ width: 800px; margin:100px auto; } button{ width: 20px; height: 20px; } thead{ background-color: aquamarine; } tfoot{ background-color: transparent; } </style> </head> <body> <div id="chart"> <table> <thead> <tr> <th>商品名稱</th> <th>單價</th> <th>數量</th> <th>小計</th> </tr> </thead> <tbody> <tr> <td>iPhone6</td> <td>￥4488</td> <td> <button onclick="calc(this)">-</button> <span>0</span> <button onclick="calc(this)">+</button> </td> <td> 0 </td> </tr> <tr> <td>iPhone7</td> <td>￥7488</td> <td> <button onclick="calc(this)">-</button> <span>0</span> <button onclick="calc(this)">+</button> </td> <td> 0 </td> </tr> <tr> <td>iPhone8</td> <td>￥8488</td> <td> <button onclick="calc(this)">-</button> <span>0</span> <button onclick="calc(this)">+</button> </td> <td> 0 </td> </tr> <tr> <td>iPhoneX</td> <td>￥9488</td> <td> <button onclick="calc(this)">-</button> <span>0</span> <button onclick="calc(this)">+</button> </td> <td> 0 </td> </tr> </tbody> <tfoot> <tr> <td colspan="3" align="right">Total</td> <td>0.00</td> </tr> </tfoot> </table> </div> <script src="js/jquery-3.2.1.min.js"></script> <script> // 創建函數 calc function calc(btn) { // 第一步：修改數量 // 獲得btn的父節點保存在變量td中 var td=btn.parentNode; console.log(td); // 獲取td下的唯一一個span元素，保存在變量span中 var span=td.querySelector("span"); console.log(span); // 獲得span的內容，保存在變量n中,並轉化其string形式為number形式 var n=parseInt(span.innerHTML); console.log(typeof(n)); // 判斷:如果btn是+，就+1；否則，如果已經是1，就為0，否則就—1； n+=btn.innerHTML=="+"?1:n==0?0:-1; // 設置span的內容為n span.innerHTML=n; // 計算小計 //獲得td的前一個兄弟元素的內容，從？位截取，轉為浮點數後，保存在變量price中 var price=parseFloat(td.previousElementSibling.innerHTML.slice(1)); console.log(typeof (price)); // 設置td的後一個兄弟元素的內容為"¥"+price*n,要求小計要按2位小數四舍五入 var total=td.nextElementSibling.innerHTML="¥"+price*n.toFixed(2); // 計算總和 // 獲得id為chart下的tbody下的每個tr下的最後一個td，保存在變量tds中 var data=document.getElementById("chart"); console.log(data); var tds=data.querySelectorAll("tbody>tr>td:last-child"); console.log(tds); for(var i=0,sum=0;i<tds.length;i++){ // 遍歷tds中每一個td，同時聲明變量sum為0 sum+=parseFloat(tds[i].innerHTML.slice(1)); }//遍歷結束 // 設置id為chart下的tfoot下的tr下的最後一個td的內容為: // "¥"+sum.toFixed(2); data.querySelector("tfoot>tr>td:last-child").innerHTML="¥"+sum.toFixed(2); } </script> </body> </html>
原生js實現購物車相關功能