JavaScript 实现客户端购物车计算

JavaScript 实现客户端购物车计算

 

实现客户端购物车的计算

　　效果图

　　

 

 案例代码

 HTML代码

    

    

        
商品名称
        
单价
        
数量
        
小计
    
    
    

    

        
iphone 6
        
￥4300.00
        

            -
            1
            +
        
        
￥4300.00
    
    

        
iphone 6 Plus
        
￥5200.00
        

            -
            1
            +
        
        
￥5200.00
    
    
    

    

        
Total：
        
￥9500.00
    
    

JavaScript代码

// 1. 构建DOM树，
// 2. 查找触发事件的元素
//  找到table
var table = document.getElementById("data");
//  通过table找button
var btns = table.getElementsByTagName("button")
// 3. 绑定事件处理函数
// 遍历每一个 button
for (var i = 0, len = btns.length; i < len; i++) {
    // 为当前按钮绑定处理函数
    btns[i].onclick = function () {
        // this 只向当前触发的元素 button
        // 4. 查找要修改的元素 并修改
        var span = this.parentElement.getElementsByTagName("span")[0];
        // console.log(span)
        // 修改数量
        var n = parseInt(span.innerHTML);
        if (this.innerHTML == "+") {
            n++;
        } else if (n > 1) {
            n--;
        }
        span.innerHTML = n;

        // 修改小计
        // 获得用户单击按钮所在行的单价
        var price = this.parentElement.previousElementSibling.innerHTML;
        // 取出数字部分并转换为数字类型
        price = parseFloat(price.slice(1));
        var subTotal = (price * n).toFixed(2); // 保留两位小数
        // console.log(subTotal)
        // 修改小计
        this.parentElement.nextElementSibling.innerHTML = "￥" + subTotal;

        // 修改 总计
        // 找到 tbody 下所有行的最后一个 td
        var tds = table.querySelectorAll("tbody tr td:last-child");
        // console.log(tds)
        // 遍历集合
        var sum = 0;
        for (var i = 0; i < tds.length; i++) {
            // 取出数字，累加
            sum += parseFloat(tds[i].innerHTML.slice(1));
        }

        // 放到总计中
        table.querySelector('tfoot tr td:last-child').innerHTML="￥"+sum.toFixed(2);

    }
}