js小项目完善当当购物车页面《完善当当购物车页面计算总价》

HTML代码

<div class="content">
    <div class="logo">	
        <img src="images/dd_logo.jpg"><span>关闭</span>
    </div>
    <div class="cartList">
        <ul>
            <li>¥<input type="text" name="price" value="21.90"></li>
            <li><input type="button" name="minus" value="-"><input type="text" name="amount" value="1"><input type="button" name="plus" value="+"></li>
            <li id="price0">¥21.90</li>
            <li><p>移入收藏</p><p>删除</p></li>
        </ul>
        <ul>
            <li>¥<input type="text" name="price" value="24.00"></li>
            <li><input type="button" name="minus" value="-"><input type="text" name="amount" value="1"><input type="button" name="plus" value="+"></li>
            <li id="price1">¥24.00</li>
            <li><p>移入收藏</p><p>删除</p></li>
        </ul>
        <ol>
            <li id="totalPrice">&nbsp;</li>
            <li><span>结 算</span></li>
        </ol>
    </div>
</div>

js代码

<script>
    //点击加号数量加一，要注意库存
    function add(num) {
        //获取输入框的值
        var count = parseFloat(document.getElementsByName("amount")[num].value);
        var con = count + 1;
        //将增加到值重新赋给数量输入框
        document.getElementsByName("amount")[num].value = con;
        //获得单价
        var price = parseFloat(document.getElementsByName("price")[num].value);
        //进行计算结果
        var sum = price * con;
        //再将价格写入div
        document.getElementById("price" + num).innerHTML = "¥" + sum.toFixed(2);
        total();
    }

    //点击减号，数量减一，要注意不能小于1
    function subtract(num) {
        //获取输入框的值
        var count = parseFloat(document.getElementsByName("amount")[num].value);
        if (count <= 1) {
            alert("数量不能少于1");
        } else {
            var con = count - 1;
            //将减少的值重新赋给数量输入框
            document.getElementsByName("amount")[num].value = con;
            //获得单价
            var price = parseFloat(document.getElementsByName("price")[num].value);
            //进行计算结果
            var sum = price * con;
            //再将价格写入div
            document.getElementById("price" + num).innerHTML = "¥" + sum.toFixed(2);
        }
        total();
    }

    //求总价 
    function total() {
        //定义一个价格变量
        var sum = 0.0;
        //获取商品的单价
        var prices = document.getElementsByName("price");
        //获取商品的数量集合
        var counts = document.getElementsByName("amount");
        for (var i = 0; i < prices.length; i++) {
            sum += parseFloat(prices[i].value) * parseFloat(counts[i].value);
        }
        document.getElementById("totalPrice").innerHTML = "¥" + sum.toFixed(2);
    }

    // 绑定按钮点击事件
    var plusButtons = document.getElementsByName("plus");
    var minusButtons = document.getElementsByName("minus");

    for (var i = 0; i < plusButtons.length; i++) {
        (function(index) {
            plusButtons[index].onclick = function() {
                add(index);
            };
            minusButtons[index].onclick = function() {
                subtract(index);
            };
        })(i);
    }

    //默认调用一次总价方法
    total();
</script>