案例、购物中心结账功能

最新推荐文章于 2020-03-20 14:18:01 发布
Casablanca_jhBi
最新推荐文章于 2020-03-20 14:18:01 发布
阅读量274
点赞数
CC 4.0 BY-SA版权
分类专栏： js
本文链接：https://blog.youkuaiyun.com/weixin_37243717/article/details/79647124
js 专栏收录该内容
30 篇文章
订阅专栏
<!doctype html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>案例_购物车计费功能</title>
        <meta name="Keywords" content="关键词,关键词">
        <meta name="description" content="">
        <!--css/js-->
        <style type="text/css">
        *{margin:0px; padding:0px;list-style-type:none; }
        #goods{
            width:1000px;
            border:1px solid #cc0066;
            margin:50px auto 0px;
        }
        #goods h3{
            line-height:50px;
            height:50px;
            background:#cc3366; 
            color:#fff; 
            font-size:14px; 
        }
        #goods h3 span,#goods ul li span{
            display:block;
            width:249px; 
            border-right:1px solid #993300;  
            float:left; 
            text-align:center;
        }
        #goods h3 span:nth-of-type(4){
            width:250px;
            border:0px;
        }
        #goods ul li{
            height:100px; 
            border-bottom:1px solid #993300;
        }
        #goods ul li span{
            height:100px;
            line-height:100px; 
            position:relative;
        }
        #goods ul li span:nth-of-type(4){
            width:250px; 
            border:0px;
        }
        #goods ul li:last-child{border-bottom:0px;}
        #goods ul li span img{margin-top:10px;}
        #goods ul li span b{
            line-height:30px;
            display:inline-block; 
            width:30px; 
            height:30px; 
            background:#ddd; 
            position:absolute; 
            cursor:pointer;
        }
        #goods ul li span b.down{left:50px; top:35px;}
        #goods ul li span b.up{left:150px; top:35px;}
        #goods ul li span input{
            left:80px; 
            top:35px; 
            width:70px;
            height:28px; 
            border:1px solid #ddd;
            position:absolute;
            text-align:center; 
            line-height:28px; 
            font-size:12px; 
            color:red; 
        }
        .price{
            height:50px;
            background:#cc3366; 
            color:#fff; 
            font-size:14px; 
            line-height:50px;
            margin:10px auto; 
            width:1000px;
        }
        .price span{
            width:250px;
            float:left; 
            display:block;
            height:50px;
        }
        .price span b{
            font-size:20px; 
            color:#ffff99;
        }
        </style>
    </head>

<body>
    <div id="goods">
        <h3><span>商品</span><span>单价</span><span>数量</span><span>小计</span></h3>
        <ul>
            <li>
                <span>
                    <img src="images/shop1.jpg" width="80"/>
                </span>
                <span class="dj">8</span>
                <span>
                    <b class="down">-</b>
                    <input type="text" value='0' />
                    <b class="up">+</b>
                </span>
                <span class="xj">0</span>
            </li>
            <li><span><img src="images/shop2.jpg" width="80"/></span>
                <span class="dj">10</span>
                <span><b class="down">-</b><input type="text" value='0'/><b class="up">+</b></span>
                <span class="xj">0</span>
            </li>
            <li>
                <span><img src="images/shop3.jpg" width="80"/></span>
                <span class="dj">12.5</span>
                <span><b class="down">-</b><input type="text" value='0'/><b class="up">+</b></span>
                <span class="xj">0</span>
            </li>
            <li>
                <span><img src="images/shop4.jpg" width="80"/></span>
                <span class="dj">23</span>
                <span><b class="down">-</b><input type="text" value='0'/><b class="up">+</b></span>
                <span class="xj">0</span>
            </li>
        </ul>
    </div>
    <div class="price" id="price">
        <span></span><span></span>
        <span>
            已选中商品:&nbsp;
            <b>0</b>&nbsp;个
        </span>
        <span>
            合计费用:
            <b>0</b>&nbsp;￥
        </span>
    </div>

    <script>
        var aUp = document.querySelectorAll("#goods ul li span b.up"),
            aDown = document.querySelectorAll("#goods ul li span b.down"),
            aInp = document.querySelectorAll("#goods ul li span input"),
            aXj = document.querySelectorAll("#goods ul li span.xj"),
            aDj = document.querySelectorAll("#goods ul li span.dj"),
            aPrice = document.querySelectorAll("#price span b"),
            length = aUp.length;


        for(var i = 0; i < length; i ++){
            aUp[i].ind = i;//这里是值得借鉴的部分
            aDown[i].ind = i;
            //点击+
            aUp[i].onclick = function (){
                var index = this.ind;
                var val = aInp[index].value;
                //val ++;
                aInp[index].value = ++val;
                //小计=单价*数量
               /* aXj[index].innerHTML = aDj[index].innerHTML * aInp[index].value;
                aPrice[0].innerHTML = sum(true);
                aPrice[1].innerHTML = sum(false);*/
                txtC(index);
            };
            //点击-
            aDown[i].onclick = function (){
                var index = this.ind;
                var val = aInp[index].value;
                val --;
                if( val < 0){
                    val = 0;
                };
                aInp[index].value = val;
                txtC(index);
            };
        };

        function sum(bool){
            var x = 0;
            for(var i = 0; i < length; i++){
                //x += aInp[i].value * 1 ;
                var y = bool?aInp[i].value:aXj[i].innerHTML;//这里也是值得借鉴的部分。
                x += y * 1;
            };
            return x;
        };

        function txtC(x) {
            aXj[x].innerHTML = aDj[x].innerHTML * aInp[x].value;
            aPrice[0].innerHTML = sum(true);
            aPrice[1].innerHTML = sum(false);
        }
        /*function sum1(){
            var x = 0;
            for(var i = 0; i < length; i++){
                x += aXj[i].innerHTML * 1;
            };
            return x;
        };*/















    </script>
</body>
</html>