实现购物车客户端计算——>小案例

需求网页上一张table表格：（基础数据可以来之服务器，或数据库）

单击“+”当前行的小计的值进行加计算，同时更新Total的值

单击“-”当前行的小计的值进行减计算，同时更新Total的值

细节点：当数量=0的时候，增加条件变成1

代码实现如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实现购物车客户端计算</title>
    <style>
        #data {
            width: 600px;
        }
        #data,td,th {
            border-collapse: collapse;
            border: 1px solid #aaaaaa;
        }
        th,td {
            height: 28px;
            width: 100px;
        }
        #data thead {
            background-color: #333399;
            color: #ffffff;
        }
        #data .blue1 {
            background-color: #CCCCFF;
        }
        button {
            cursor: pointer;
        }
    </style>
</head>
<body>
    <table id="data">
        <thead>
            <tr>
                <th>商品名称</th>
                <th>单价</th>
                <th>数量</th>
                <th>小计</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>iPhone6</td>
                <td>&yen;4488</td>
                <td>
                    <button onclick="calc(this)">-</button>
                    <span>1</span>
                    <button onclick="calc(this)">+</button>
                </td>
                <td>&yen;4488</td>
            </tr>
            <tr>
                <td>iPhone6 plus</td>
                <td>&yen;5288</td>
                <td>
                    <button onclick="calc(this)">-</button>
                    <span>1</span>
                    <button onclick="calc(this)">+</button>
                </td>
                <td>&yen;5288</td>
            </tr>
            <tr>
                <td>iPad Air 2</td>
                <td>&yen;4288</td>
                <td>
                    <button onclick="calc(this)">-</button>
                    <span>1</span>
                    <button onclick="calc(this)">+</button>
                </td>
                <td>&yen;4288</td>
            </tr>
        </tbody>
        <tfoot>
        <tr>
            <td colspan="3">Total: </td>
            <td>&yen;14064</td>
        </tr>
        </tfoot>
    </table>
</body>
    <script>
        window.$ = HTMLElement.prototype.$ = function(selector){
            return (this==window?document:this).querySelectorAll(selector);
        }
        function calc(btn){
            var num = parseInt(btn.parentNode.$("span")[0].innerHTML);//得到当前的数量
            var price = parseFloat(btn.parentNode.parentNode.$("td")[1].innerHTML.slice(1));//得到当前的价格

            btn.innerHTML == "+"?num++:(num--,(num==0)&&(num=1));//判断单击的是“+”还是“-”号，并做处理

            btn.parentNode.$("span")[0].innerHTML = num;
            btn.parentNode.parentNode.$("td")[3].innerHTML = "&yen;"+(num*price).toFixed(2);
            for (var i= 0,tol=0,len=$("tbody tr td:nth-child(4)").length;i<len;i++){
                tol+=parseFloat($("tbody tr td:nth-child(4)")[i].innerHTML.slice(1));
            }
            $("tfoot tr td:nth-child(2)")[0].innerHTML = "&yen;"+tol.toFixed(2);
        }
    </script>
</html>

实现购物车客户端计算——>小案例

猜你喜欢