threeblue

因为今天下午时候在网上买了东西,在结算界面的时候突发奇想的也想自己动手做一个结算界面,当然了,只是一个最简易的结算界面,有商品数量的加减,有单价和小计,单个多个删除,全选和区县全选等等一些小功能,我在上大学时候用过,相信不少初学者也会用到或者有些迷惑。这是我写的第一篇原创作品,一来当做自己的成长记录以及学习笔记,二来为在这给购物车结算方面的初学者当个参考。本篇侧重对象为初学者,请大牛一笑而过。废话不多说,开始正题。

首先,给大家看看最终的成型界面:随着鼠标单击加减号,数量跟着变化,并且小计和总价也跟着随时更新变化,且当数量为0时,减号不可用。

 

 

为了大家看得方便,我把整篇源码按照顺序原封不动贴了上来,并且对应的做了较为详细的注释,在此提示要注意jQuery文件的路径是否正确,否则运行后是看不到想要的效果的。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>最简易的购物车结算流程</title>
    <!--引用jQuery-->
    <script src="Scripts/jquery-3.2.1.min.js"></script>
    <!--<script src="jquery-1.11.0.min.js"></script>-->
    <script>
        $(function () {
            //计算总价,编写总价方法
            function totalPrice() {
                var zong = 0;
                $(".xiaoji").each(function () {
                    var all = parseInt($(this).text());
                    zong += all;
                })
                $("#heji").val(zong);
            };

            //设置数量框不可手动填写(此处为避免不必要的操作失误)
            $(".textNum").prop("disabled", true);

            //减号逻辑
            $(".reduce").click(function () {
                var num = $(this).siblings(".textNum").val();  //获取数量框里的数值
                num--;  //单击“-”减号时,数量递减
                $(this).siblings(".textNum").val(num); //把数量变化后的新值放入数量框中
                if (num <= 0) {
                    $(this).prop("disabled", true); //当输入框内数值为0时,使“-”减号处于不可用状态。
                };
                var danjia = $(this).siblings(".danjia").text(); //获取单价
                var xiaoji = danjia * num; //用单价乘以数量计算得到单个小计的值
                $(this).siblings(".xiaoji").text(xiaoji); //把得到的小计值放入数量框中显示
                totalPrice();//调用“总价”方法,使每点击减号,数量变化时,总价跟着变化
            })

            //加号逻辑(逻辑如同减号的逻辑差不多)
            $(".add").click(function () {
                var num = $(this).siblings(".textNum").val();
                num++;
                $(this).siblings(".textNum").val(num);
                if (num > 0) {
                    $(this).siblings(".reduce").prop("disabled", false); //判断当输入框内数值大于0,使“-”减号处于解封可用状态。
                };
                var danjia = $(this).siblings(".danjia").text();
                var xiaoji = danjia * num;
                $(this).siblings(".xiaoji").text(xiaoji);
                totalPrice();
            })

            //点击合计重整清算(防止单行删除某项商品后,总价不刷新)
            $("#he").click(function () {
                totalPrice(); //调用总价方法
            })

            //单行删除商品
            $(".deleteOne").click(function () {
                $(this).parent().remove();
            })

            ////全部删除商品
            $("#deleteAll").click(function () {
                $(".box:checked").parent().remove(); //把被选中的复选框所在的区域删除
            })

            //全选
            $("#allSelect").click(function () {
                $(".box").prop("checked", true);
            })

            //取消全选
            $("#notSelect").click(function () {
                $(".box").prop("checked", false);
            });

            //全部清零
            $("#zero").click(function () {
                $(".textNum").val(0);
                $(".xiaoji").text(0);
                $("#heji").val(0);
            });
        })

    </script>
    <style>
        /*数量框字体居中*/
        .textNum {
            text-align: center;
        }

        /*****/
        span {
            color: red;
        }

        label {
            margin-left: 20px;
        }
        input[value=\'删除\'] {
            color: green;
        }
        /*总价格颜色*/
        #heji {
            color: red;
            font-size: 1em; /*字体大小为原来的1倍*/
        }
    </style>

</head>
<body>
    <div id="bigbox">
        <div id="container" style="height:220px;width:620px;border:1px solid gray;margin:0 auto;">
            <p>
                <input type="checkbox" name="quanxuan" value="" class="box" />
                <label>数量:</label>
                <input type="button" name="name" value="-" class="reduce" />
                <input type="text" name="name" value="2" class="textNum" />
                <input type="button" name="name" value="+" class="add" />
                <label>单价:</label>
                <span class="danjia">2</span><strong>¥ |</strong>
                <label>小计:</label>
                <span class="xiaoji">4</span><strong>¥</strong>
                <input type="button" name="name" value="删除" class="deleteOne" />
            </p>
            <p>
                <input type="checkbox" name="quanxuan" value="" class="box" />
                <label>数量:</label>
                <input type="button" name="name" value="-" class="reduce" />
                <input type="text" name="name" value="2" class="textNum" />
                <input type="button" name="name" value="+" class="add" />
                <label>单价:</label>
                <span class="danjia">2</span><strong>¥ |</strong>
                <label>小计:</label>
                <span class="xiaoji">4</span><strong>¥</strong>
                <input type="button" name="name" value="删除" class="deleteOne" />
            </p>
            <p>
                <input type="checkbox" name="quanxuan" value="" class="box" />
                <label>数量:</label>
                <input type="button" name="name" value="-" class="reduce" />
                <input type="text" name="name" value="2" class="textNum" />
                <input type="button" name="name" value="+" class="add" />
                <label>单价:</label>
                <span class="danjia">2</span><strong>¥ |</strong>
                <label>小计:</label>
                <span class="xiaoji">4</span><strong>¥</strong>
                <input type="button" name="name" value="删除" class="deleteOne" />
            </p>
            <p>
                <input type="checkbox" name="name" value="" class="box" />
                <label>数量:</label>
                <input type="button" name="name" value="-" class="reduce" />
                <input type="text" name="name" value="2" class="textNum" />
                <input type="button" name="name" value="+" class="add" />
                <label>单价:</label>
                <span class="danjia">2</span><strong>¥ |</strong>
                <label>小计:</label>
                <span class="xiaoji">4</span><strong>¥</strong>
                <input type="button" name="name" value="删除" class="deleteOne" />
            </p>
            <hr />
            <p style="height:30px;width:470px;margin-left:60px;margin:0 auto;">
                <input type="button" name="name" value="全选" id="allSelect" />
                <input type="button" name="name" value="取消全选" id="notSelect" />
                <input type="button" name="name" value="批量删除" id="deleteAll" />
                <input type="button" name="name" value="清零" id="zero" />
                <input type="button" name="name" value="合计总价" id="he" />
                <input type="text" name="name" value="" id="heji" style="width:100px;" />
                <strong>.00¥</strong>
            </p>
        </div>
    </div>
</body>
</html>

以上就是全部代码了,这里主要描述的是基本实现功能,样式美观什么的只做了简单的调整,有强迫症的同道可以自己去细细美化一下。本文相信会帮到一部分人的,因为我自己平时也在园子里看过很多的优质实用的文章和例子,也在困惑的时候在其中找到了一些答案,解过不少燃眉之急,所有对于这种直接或者间接的帮助,我个人还是满怀感激的。所有也希望这篇文章帮到需要的人。

收尾:其实,上述的全选和取消全选功能这两个功能可以合并成一个功能的,在这里分开写是为了大家更容易理解和掌握。本文就到此结尾了,有兴趣的朋友可以这基础之上添加和扩展更多的功能。

 

分类:

技术点:

相关文章: