購(gòu)物車(chē)
<head>
? ? <meta charset="UTF-8">
? ? <title>Document</title>
? ? <style>
? ? ? ? table {
? ? ? ? ? ? text-align: center;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <table border='1' cellspacing='0' width='500px' align='center'>
? ? ? ? <thead>
? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? <th>商品名稱</th>
? ? ? ? ? ? ? ? <th>商品單價(jià)</th>
? ? ? ? ? ? ? ? <th>商品數(shù)量</th>
? ? ? ? ? ? ? ? <th>商品小計(jì)</th>
? ? ? ? ? ? </tr>
? ? ? ? </thead>
? ? ? ? <tbody>
? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? <td>iphonex</td>
? ? ? ? ? ? ? ? <td>￥7999</td>
? ? ? ? ? ? ? ? <td>
? ? ? ? ? ? ? ? ? ? <button onclick='calc(this)'>+</button>
? ? ? ? ? ? ? ? ? ? <span>1</span>
? ? ? ? ? ? ? ? ? ? <button onclick='calc(this)'>-</button>
? ? ? ? ? ? ? ? </td>
? ? ? ? ? ? ? ? <td class='a'>￥7999</td>
? ? ? ? ? ? </tr>
? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? <td>小米8</td>
? ? ? ? ? ? ? ? <td>￥3500</td>
? ? ? ? ? ? ? ? <td>
? ? ? ? ? ? ? ? ? ? <button onclick='calc(this)'>+</button>
? ? ? ? ? ? ? ? ? ? <span>1</span>
? ? ? ? ? ? ? ? ? ? <button onclick='calc(this)'>-</button>
? ? ? ? ? ? ? ? </td>
? ? ? ? ? ? ? ? <td class="a">￥3500</td>
? ? ? ? ? ? </tr>
? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? <td>華為p20pro</td>
? ? ? ? ? ? ? ? <td>￥3999</td>
? ? ? ? ? ? ? ? <td>
? ? ? ? ? ? ? ? ? ? <button onclick='calc(this)'>+</button>
? ? ? ? ? ? ? ? ? ? <span>1</span>
? ? ? ? ? ? ? ? ? ? <button onclick='calc(this)'>-</button>
? ? ? ? ? ? ? ? </td>
? ? ? ? ? ? ? ? <td class="a">￥3999</td>
? ? ? ? ? ? </tr>
? ? ? ? </tbody>
? ? ? ? <tfoot>
? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? <td colspan="3">總計(jì)</td>
? ? ? ? ? ? ? ? <td id='b'>￥15498</td>
? ? ? ? ? ? </tr>
? ? ? ? </tfoot>
? ? </table>
? ? <script>
? ? ? ? function calc(btn) {
? ? ? ? ? ? //改變數(shù)量
? ? ? ? ? ? //? ? ? ? ? 1）通過(guò)btn的父元素找到span
? ? ? ? ? ? //? ? ? ? ? 2)獲取span中的值族吻，保存在變量n中
? ? ? ? ? ? //? ? ? ? ? 3）判斷btn的內(nèi)容
? ? ? ? ? ? //如果btn的內(nèi)容為+，n++
? ? ? ? ? ? //否則如果n>1,n--
? ? ? ? ? ? //? ? ? ? ? ? 否則n=1
? ? ? ? ? ? var span = btn.parentElement.querySelector('span');
? ? ? ? ? ? var n = span.innerHTML;
? ? ? ? ? ? if(btn.innerHTML == '+') {
? ? ? ? ? ? ? ? n++;
? ? ? ? ? ? } else if(n > 1) {
? ? ? ? ? ? ? ? n--;
? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? n = 1;
? ? ? ? ? ? }
? ? ? ? ? ? span.innerHTML = n;
? ? ? ? ? ? //2.讓小計(jì)改變
? ? ? ? ? ? //? ? ? ? ? 1）獲取單價(jià)：獲取btn的父元素的前一個(gè)兄弟的內(nèi)容截取掉￥
? ? ? ? ? ? //? ? ? ? ? 2）聲明一個(gè)變量小計(jì)subTotal=單價(jià)*數(shù)量
? ? ? ? ? ? //? ? ? ? ? 3）btn的父元素的下一個(gè)兄弟的內(nèi)容= '￥'+subTotal? 保留2位小數(shù)
? ? ? ? ? ? var price = btn.parentElement.previousElementSibling.innerHTML.slice(1);
? ? ? ? ? ? var subTotal = price * n;
? ? ? ? ? ? btn.parentElement.nextElementSibling.innerHTML = '￥' + subTotal.toFixed(2);
? ? ? ? ? ? //3.求總計(jì)
? ? ? ? ? ? //? ? ? ? ? 1）找到所有的小計(jì)
? ? ? ? ? ? //? ? ? ? ? ? 2）遍歷同時(shí)聲明變量total總計(jì)
? ? ? ? ? ? //total+=每個(gè)小計(jì)的內(nèi)容截取
? ? ? ? ? ? //遍歷結(jié)束
? ? ? ? ? ? //? ? ? ? ? 3）找到tfoot中的小計(jì)的內(nèi)容='￥'+total 保留兩位小數(shù)
? ? ? ? ? ? var a = document.getElementsByClassName('a');
? ? ? ? ? ? for(var i = 0, total = 0; i < a.length; i++) {
? ? ? ? ? ? ? ? total = total + Number(a[i].innerHTML.slice(1));
? ? ? ? ? ? }
? ? ? ? ? ? document.getElementById('b').innerHTML = '￥' + total.toFixed(2);
? ? ? ? }
? ? </script>
</body>
