实现购物车的加减算法

Posted TigerZhang

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了实现购物车的加减算法相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div class="zaocan_2_2">
        <div class="card">
            <p class="p1">流油包子</p>

            <p class="p4 zao_1"><span class="zaocan_price">5.00</span>/份</p>
            <div class="zaocan_2_1">
                <input class="min" name="" type="button" value="-" />
                <input class="text_box" name="" type="text" value="0" />
                <input class="add" name="" type="button" value="+" />
            </div>
        </div>
    </div>
    <div class="zaocan_2_2">
        <div class="card">
            <p class="p1">小米粥</p>

            <p class="p4 zao_1"><span class="zaocan_price">2.00</span>/份</p>
            <div class="zaocan_2_1">
                <input class="min" name="" type="button" value="-" />
                <input class="text_box" name="" type="text" value="0" />
                <input class="add" name="" type="button" value="+" />
            </div>
        </div>
    </div>
    <p class="zaocan_13">￥:
        <label id="total"></label>
    </p>
    <script src="jquery.js"></script>
    <script>
    $(function() {
        $(".add").click(function() {
            var t = $(this).parent().find(‘input[class*=text_box]‘);
            t.val(parseInt(t.val()) + 1)
            setTotal();
        })
        $(".min").click(function() {
            var t = $(this).parent().find(‘input[class*=text_box]‘);
            t.val(parseInt(t.val()) - 1)
            if (parseInt(t.val()) < 0) {
                t.val(0);
            }
            setTotal();
        })

        function setTotal() {
            var s = 0;
            $(".zaocan_2_2").each(function() {
                s += parseInt($(this).find(‘input[class*=text_box]‘).val()) * parseFloat($(this).find(‘span[class*=zaocan_price]‘).text());
            });
            $("#total").html(s.toFixed(2));
        }
        setTotal();

    })
    </script>
</body>

</html>

　　

以上是关于实现购物车的加减算法的主要内容，如果未能解决你的问题，请参考以下文章

jquery问题购物车加减按钮

用html做一个购物车，能实现简单的产品数量和价格的加减就行。最后能计算出提交物品价格的总和。

微信小程序——购物车数字加减

vue入门------简单购物车功能实现(全选，数量加减，价格加减）

常用数据结构算法 : 大数的加减

vue.js实现完整购物车实例