• js 购物车中,多件商品数量加减效果修改,实现总价随数量加减改变


    <!DOCTYPE html>

    <html>
    <head>
    <meta charset=UTF-8 />
    <title>无标题文档</title>
    <style>
    p.p_num {
         78px;
        height: 24px;
        border-top: solid 1px #d0d0d0;
        position: relative;
        border-bottom: solid 1px #d0d0d0;
        margin-top: -3px;
    }
     
    span.sy_minus,span.sy_plus {
         15px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        display: block;
        position: absolute;
        top: 0px;
        font-size: 14px;
        border: solid 1px #d0d0d0;
        background: #ebebeb;
        cursor: pointer;
        border-top: none;
        border-bottom: none;
    }
     
    span.sy_minus {
        left: 0px;
    }
     
    span.sy_plus {
        right: 0px;
    }
     
    input.sy_num {
         44px;
        height: 18px;
        line-height: 24px;
        text-align: center;
        position: absolute;
        top: 0px;
        left: 17px;
    }
     
    span.sy_num {
        padding: 5px 8px;
        border: solid 1px #d0d0d0;
        border-left: none;
        border-right: none;
        cursor: pointer;
    }
    </style>
    <script type="text/javascript" src="jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready (function ()
        {
            var pl = $("p:last");
            var reg = /(.*[::]s*)([+d.]+)(s*元)/g;
            $ (".sy_minus").click (function ()
            {
                var me = $ (this), txt = me.next (":text"), pc = me.closest("p");
                var val = parseFloat (txt.val ());
                val = val < 1 ? 1 : val;
                txt.val (val - 1);
                var price = parseFloat (pc.prev("p").text().replace(reg,'$2')) * txt.val ();
                pc.next("p").text (pc.next("p").text().replace(reg, "$1" + price + "$3"));
                var sum = 0;
                $(".p_num").next("p").each(function (i, dom)
                {
                    sum += parseFloat ($(this).text().replace(reg, "$2"));
                });
                pl.text(pl.text().replace(reg, "$1" + sum + "$3"));
            });
             
            $(".sy_plus").click (function ()
            {
                var me = $ (this), txt = me.prev (":text"), pc = me.closest("p");
                var val = parseFloat (txt.val ());
                txt.val (val + 1);
                var price = parseFloat (pc.prev("p").text().replace(reg,'$2')) * txt.val ();
                pc.next("p").text (pc.next("p").text().replace(reg, "$1" + price + "$3"));
                var sum = 0;
                $(".p_num").next("p").each(function (i, dom)
                {
                    sum += parseFloat ($(this).text().replace(reg, "$2"));
                });
                pl.text(pl.text().replace(reg, "$1" + sum + "$3"));
            });
        })[0].onselectstart = new Function ("return false");
    </script>
    </head>
    <body>
        <div class="">
            <p class="">单价:36元</p>
            <p class="p_num">
                <span class="sy_minus" id="sy_minus_gid1">-</span
                <input class="sy_num" id="sy_num_gid1" readonly="readonly" type="text" name="number1" value="1" /> 
                <span class="sy_plus" id="sy_plus_gid1">+</span>
            </p>
            <p class="">需支付:36元</p>
        </div>
        <div class="">
            <p class="">单价:58元</p>
            <p class="p_num">
                <span class="sy_minus" id="sy_minus_gid2">-</span
                <input class="sy_num" id="sy_num_gid2" readonly="readonly" type="text" name="number1" value="1" /> 
                <span class="sy_plus" id="sy_plus_gid2">+</span>
            </p>
            <p class="">需支付:58元</p>
        </div>
        <p class="">总共需要支付:94元</p>
    </body>
    </html>
  • 相关阅读:
    Java之时间处理(当前年的上一年、上一季度、当月、当季)
    Nginx代理之大文件下载失败问题
    PageHelper之排序
    MySQL之集群配置
    Java之判断字符串是否为数字(包含浮点型数据)
    /bin/mysqld: error while loading shared libraries: libaio.so.1: cannot open shared object file:
    Error Code: 1153
    413 Request Entity Too Large
    MyBatis分页插件失效问题之解决
    HikariConfig 连接池属性详解
  • 原文地址:https://www.cnblogs.com/lvlina/p/5287328.html
Copyright © 2020-2023  润新知