淘宝购物车点击单选框

Posted on 2017-03-03 14:58 程序员入门到放弃阅读(282) 评论(0) 编辑收藏举报
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <meta name="wap-font-scale" content="no">
    <script src="js/flexible.js"></script>
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/shopcar.css">
    <style type="text/css">

.pn_1{
        width: 100%;
        height: 2.1875rem;
        background: #fff;
        border-bottom: 0.0156rem #ddd solid;
}

.pn_nr1{
        width: 95%;
        margin: 0 auto;
        position: relative;
}
.pn_nr1 span{
        display: inline-block; 
        width: 0.4062rem;
        height: 0.4062rem;
        border: 0.0156rem #ddd solid;
        background: #fff;
        -webkit-border-radius:50px;
        -moz-border-radius:50px;
        -ms-border-radius:50px;
        -o-border-radius:50px;
        border-radius:50px;
        line-height:0.8594rem;
        position: absolute;
        left: 0;
        top: 0.875rem;
}

.pn_nr1 .img1{
        display: inline-block;
        width: 1.5625rem;
        height: 1.5625rem;
        margin: 0.3125rem;
        position: absolute;
        left: 0.4688rem;
        top: 0;
}

.pn_nr1 p{
        font-size: 0.3125rem;
        color: #696969;
        position: absolute;
        left: 2.5938rem;
        top: 0.3125rem;
}

.pn_nr1 em{
       font-size: 0.3125rem;
       color: #ddd;
       position: absolute;
       left: 2.5938rem;
       top: 0.7812rem; 
}

.pn_nr1 s{
        font-size: 0.25rem;
        color: #ddd;
        position: absolute;
        right: 0;
        top: 0.3906rem;
}

.pn_nr1 h6{
        font-size: 0.3125rem;
        color: #ff2150;
        position: absolute;
        right: 0;
        top: 0.7812rem;   
}

.pn_nr1 .img2{
        display: inline-block;
        width: 0.3906rem;
        height: 0.3906rem;
        position: absolute;
        right: 0;
        top: 1.5rem;
}

.pn_nr1 form{
        width: 1.9531rem;
        height: 0.625rem;
        background: #f7f7f7;
        position: absolute;
        left: 2.5938rem;
        top: 1.2812rem;
        text-align: center;
        line-height:0.625rem; 
}

.pn_nr1 form a{
        font-size: 0.1875rem;
        line-height: 0.625rem;
}

.pn_nr1 form input{
        height:0.5938rem;
        width: 0.5625rem;
        line-height: 0.625rem;
        border: 0;
        outline: none;
        background:#f7f7f7;
        text-align: center;
        font-size: 0.1875rem;
}

/*pn_1 end*/

/*pn_nr2*/

.pn_2{
        width: 100%;
        height: 2.1875rem;
        background: #fff;
        border-bottom: 0.0156rem #ddd solid;
}

.pn_nr2{
        width: 95%;
        margin: 0 auto;
        position: relative;
}

.pn_nr2 span{
        display: inline-block; 
        width: 0.4062rem;
        height: 0.4062rem;
        border: 0.0156rem #ddd solid;
        background: #fff;
        -webkit-border-radius:50px;
        -moz-border-radius:50px;
        -ms-border-radius:50px;
        -o-border-radius:50px;
        border-radius:50px;
        line-height:0.8594rem;
        position: absolute;
        left: 0;
        top: 0.875rem;
}

.pn_nr2 .img1{
        display: inline-block;
        width: 1.5625rem;
        height: 1.5625rem;
        margin: 0.3125rem;
        position: absolute;
        left: 0.4688rem;
        top: 0;
}

.pn_nr2 p{
        font-size: 0.3125rem;
        color: #696969;
        position: absolute;
        left: 2.5938rem;
        top: 0.3125rem;
}

.pn_nr2 em{
       font-size: 0.3125rem;
       color: #ddd;
       position: absolute;
       left: 2.5938rem;
       top: 0.7812rem; 
}

.pn_nr2 s{
        font-size: 0.25rem;
        color: #ddd;
        position: absolute;
        right: 0;
        top: 0.3906rem;
}

.pn_nr2 h6{
        font-size: 0.3125rem;
        color: #ff2150;
        position: absolute;
        right: 0;
        top: 0.7812rem;   
}

.pn_nr2 .img2{
        display: inline-block;
        width: 0.3906rem;
        height: 0.3906rem;
        position: absolute;
        right: 0;
        top: 1.5rem;
}

.pn_nr2 form{
        width: 1.9531rem;
        height: 0.625rem;
        background: #f7f7f7;
        position: absolute;
        left: 2.5938rem;
        top: 1.2812rem;
        text-align: center;
        line-height:0.625rem; 
}

.pn_nr2 form a{
        font-size: 0.1875rem;
        line-height: 0.625rem;
}

.pn_nr2 form input{
        height:0.5938rem;
        width: 0.5625rem;
        line-height: 0.625rem;
        border: 0;
        outline: none;
        background:#f7f7f7;
        text-align: center;
        font-size: 0.1875rem; 
}
/*span js获取*/
.active {
        background: red!important;
}
/*span js获取 end*/

/*pn_nr2 end*/


/*main end*/

    </style>
</head>
<body>
    <header>
        <div class="header">
            <a href="#"> < </a>
            <span>购物车<em>(5)</em></span>
        </div>
    </header>

    <main>
        <div class="items">
            <div class="main-pn">
                <div class="main-wg">
                    <span class="sure BOX"></span>
                    <em>皇宫婚纱旗舰店 &nbsp< </em>
                    <img src="img/FKH.png">
                </div>
            </div>

            <div class="pn_1 lis">
                <div class="pn_nr1">
                    <span class="be BOX"></span>
                    <img src="img/ERYR_03.png" class="img1">
                    <p>2015新款婚纱冬季新娘结婚韩版蕾...</p>
                    <em>颜色：白色；尺码：L</em>
                    <s>￥895</s>
                    <h6>￥495.9</h6>
                    <img src="img/yyyyw45y.png" class="img2">
                    <form>
                        <a id="sub" href="javascript:void(0);">-</a>
                        <input type="text" value="1" id="bookNum">
                        <a id="add" href="javascript:void(0);">+</a>
                    </form>
                </div>
            </div>

            <div class="pn_2">
                <div class="pn_nr2">
                    <span class="be BOX"></span>
                    <img src="img/qweryhre_03.png" class="img1">
                    <p>2015新款敬酒服冬季新娘结婚韩版...</p>
                    <em>颜色：红色；尺码：L</em>
                    <s>￥895</s>
                    <h6>￥298.9</h6>
                    <img src="img/yyyyw45y.png" class="img2">
                    <form>
                        <a id="sub" href="javascript:void(0);">-</a>
                        <input type="text" value="1" id="bookNum">
                        <a id="add" href="javascript:void(0);">+</a>
                    </form>
                </div>
            </div>
        </div>
    </main>


    
    <article>
        <div class="article">
            <span class="NIM"></span>
            <i>全选</i>
            <abbr>合计: </abbr>
            <em>￥784.80</em>
            <h6>为您节省￥605.2</h6>
        </div>
            <a href="#">去结算(2)</a>
    </article>

    <footer>
        <a href="index.html">首页</a>
        <a href="#">发现</a>
        <a href="#">购物车</a>
        <a href="#">我的</a>
    </footer>

    <script type="text/javascript">

        
/*点击span*/
(function(){
      var items = document.getElementsByClassName('items');
      var sures = document.getElementsByClassName('sure');
      var bes = document.getElementsByClassName('be');
      var article = document.getElementsByClassName('article');
      var NIM = document.getElementsByClassName("NIM")[0];
      var BOX = document.getElementsByClassName("BOX");
      for(var i = 0; i<sures.length; i++){
            sures[i].toggle = true;
      }
      for(var i = 0; i<bes.length; i++){
            bes[i].toggle2 = true;
      }
      for(var i = 0; i<BOX.length; i++){
            BOX[i].toggle3 = true;
      }
      function doSelect(oDiv){
            var sure = oDiv.getElementsByClassName('sure')[0];
            var be = oDiv.getElementsByClassName("be");
            sure.index = i;
            //店铺商品全选点击
            sure.addEventListener("touchstart",function(){
                  if(this.toggle){
                        this.classList.add("active");
                        this.toggle = false;
                       for(var i=0;i<be.length;i++){
                              be[i].toggle2 = false;
                              be[i].classList.add("active");
                       }
                 }else{
                        this.classList.remove("active");
                        this.toggle = true;
                       for(var i=0;i<be.length;i++){
                              be[i].toggle2 = true;
                              be[i].classList.remove("active");
                       }
                 }
            });
            //店铺商品单选点击
           for(var i = 0; i<be.length; i++){
                  be[i].addEventListener("touchstart",function(){
                        var be_arr = [];
                        if(this.toggle2){
                              this.toggle2 = false;
                              this.classList.add("active");
                        }else{
                              this.toggle2 = true;
                              this.classList.remove("active");
                        }
                        for(var i = 0; i<be.length; i++){
                              be_arr[i] = ""+be[i].toggle2;
                        }
                        if(be_arr.indexOf("true")<0){
                             sure.toggle = false;
                              sure.classList.add("active");
                        }else{
                             sure.toggle = true;
                              sure.classList.remove("active");  
                        }
                  });
            }

            //点击全选店铺的商品
            NIM.toggle = true;
            NIM.addEventListener("touchstart",function(){
                 if(this.toggle){
                        for(var i = 0; i< BOX.length; i++){
                              BOX[i].classList.add("active")
                        }
                        this.classList.add("active");
                        this.toggle = false;
                 }else{
                        for(var i = 0; i< BOX.length; i++){
                              BOX[i].classList.remove("active");
                        }
                        this.classList.remove("active");
                        this.toggle = true;
                 }
            })

      }
      for(var i = 0; i< items.length; i++){
            doSelect(items[i]);
      }
}());

        
    </script>
    <script src="js/jquery.min-3.0.js"></script>
    <script src="js/shopcar.js"></script>
</body>
</html>
</body>
</html>
会员力量，点亮园子希望
刷新页面返回顶部
程序员入门到放弃

公告

淘宝购物车点击单选框
