购物是女人的天堂，男人的地狱，不了解清楚万一以后被坑了，男人躲哪里后悔去，做这样一个web购物网站，买了货死活回不来，让双十一的女人们过过瘾

购物结算系统，尝尝无限支付的快了吧
弄一个给自己老婆连接这么一个页面，永远成功就是收不到货，风烛残年也算一段惊心动破的回忆呀
还等什么学起来

主要：
数学算术
逻辑推理
知识掌握
要感兴趣

css就是个标签加上朴实的衣服，变得没那么死板

   *{
            list-style: none;
        }
        .an{
            width:100%;
        }
        .an1{
            width:960px;
            height:80px;
            margin:0 auto;
        }
        .wu2{
            width:50px;
            height:50px;
            float:left;
            background:#CCC;
            text-align: center;
            line-height: 50px;
        }
        .wu21{
            width:50px;
            height:50px;
            float:left;
            background:#CCC;
            text-align: center;
            line-height: 50px;
        }
        .wu3{
            width:50px;
            height:50px;
            float:left;
            background:#f2f2f2;
            text-align: center;
            line-height: 50px;
        }
        .wu4{
            width:50px;
            height:50px;
            float:left;
            background:#CCC;
            text-align: center;
            line-height: 50px;
        }
        .wu41{
            width:50px;
            height:50px;
            float:left;
            background:#CCC;
            text-align: center;
            line-height: 50px;
        }
        .wuwu{
            width:45px;
            height:40px;
            border:none;
            background:#f2f2f2;
            text-align: center;
            line-height: 50px;
        }
        .wu5{
            width:80px;
            height:50px;
            float:left;
            text-align: center;
            line-height: 50px;
            margin-left:50px;
        }
        .wu6{
            width:50px;
            height:50px;
            float:left;
            text-align: center;
            line-height: 50px;
        }
        .wocao{
            margin-left: 50px;
            float:left;
            width:75px;
            height:50px;
            text-align: center;
            line-height: 50px;
            font-size: 15px;
            font-weight: bold;
            color:#f2f2f2;
            background:#CCC;
        }

body中就是一个一个的盒子，层次分明，运用基础的HTML

 <div>全选<input type="checkbox" onclick="s()" id="check" /></div>
    <div class="an">
        <div class="an1">
            <ul class="wu1">
                <li class="wu2" onclick="dd()">+</li><!-- 加号 -->
                <li class="wu3"><input type="text" value="1" class="wuwu" /></li>
                <li class="wu4" onclick="bb()">-</li><!-- 减号 -->
            </ul>
            <span style="color:red;" class="wu5">单价：￥</span>
            <div class="wu6" style="color:red;" id="danj">24.50</div>
            <span style="color:red;" class="wu5">总价：￥</span>
            <div class="wu6" style="color:red;" id="money">24.50</div>
            <input type="checkbox" value="1" name="ids" class="aiai"/>
            <div class="wocao" onclick="ss(this)">删除</div>
        </div>
        <div class="an1">
            <ul class="wu1">
                <li class="wu21" onclick="dd1()">+</li><!-- 加号 -->
                <li class="wu3"><input type="text" value="1" class="wuwu" /></li>
                <li class="wu41" onclick="bb1()">-</li><!-- 减号 -->
            </ul>
            <span style="color:red;" class="wu5">单价：￥</span>
            <div class="wu6" style="color:red;" id="danj1">24.50</div>
            <span style="color:red;" class="wu5">总价：￥</span>
            <div class="wu6" style="color:red;" id="money1">24.50</div>
            <input type="checkbox" value="1" name="ids" class="aiai" id="aaa" />
            <div class="wocao" onclick="ss(this)">删除</div>
        </div>
    </div>
    <div class="an">
        <div class="an1">
            <div class="wu5" style="color:red;">结算：￥</div>
            <div  class="wu5" style="color:red;" id="money2">49.00</div>
        </div>
    </div>

script中，主要运用innerHTML,寻找节点，条件判定

   var wu2 = document.getElementsByClassName("wu2")[0];
        var wu4 = document.getElementsByClassName("wu4")[0];
        //加
        function dd(){
            wux = wu2.nextElementSibling.firstElementChild;
            //返回下一个节点的首个子节点
            wux.value = parseInt(wux.value)+1;
            //点击加号加1
            var a = danj.innerHTML;
            var m = parseFloat(a);
            var s1 = money1.innerHTML;
            var q1 = parseFloat(s1);
            money.innerHTML = parseFloat(wux.value*m).toFixed(2);
            var s = money.innerHTML;
            var q = parseFloat(s);
            money2.innerHTML = parseFloat(q1+q).toFixed(2);
        }
        //console.log(wux.value);//加号调试框结果
         
        //减
        function bb(){
            wus = wu4.previousElementSibling.firstElementChild;
            //返回上一个节点的首个子节点
            wus.value = parseInt(wus.value)-1;
            //点击减号减1
            var a = danj.innerHTML;
            var m = parseFloat(a);
            var s1 = money1.innerHTML;
            var q1 = parseFloat(s1);
            if(wus.value<0){
                wus.value = 0;
            }
            //if循环  减号最低不允许是零   给input里的value赋值为1
            money.innerHTML = parseFloat(wus.value*m).toFixed(2);
            var s = money.innerHTML;
            var q = parseFloat(s);
            money2.innerHTML = parseFloat(q1+q).toFixed(2);
        }
        //consloe.log(wus);//减号调试框结果
        var wu21 = document.getElementsByClassName("wu21")[0];
        var wu41 = document.getElementsByClassName("wu41")[0];
        function dd1(){
            wux = wu21.nextElementSibling.firstElementChild;
            //返回下一个节点的首个子节点
            wux.value = parseInt(wux.value)+1;
            //点击加号加1
            var a = danj1.innerHTML;
            var m = parseFloat(a);
            var s = money.innerHTML;
            var q = parseFloat(s);											//转化浮点型
            money1.innerHTML = parseFloat(wux.value*m).toFixed(2);			//实现交汇，保留小数点后两位
            var s1 = money1.innerHTML;
            var q1 = parseFloat(s1);
            money2.innerHTML = parseFloat(q1+q).toFixed(2);					//总值返回html
        }
        //console.log(wux.value);//加号调试框结果
         
        //减
        function bb1(){
            wus = wu41.previousElementSibling.firstElementChild;
            //返回上一个节点的首个子节点
            wus.value = parseInt(wus.value)-1;
            //点击减号减1
            var a = danj1.innerHTML;
            var m = parseFloat(a);
            var s = money.innerHTML;
            var q = parseFloat(s);
            if(wus.value<0){												//判定商品个数不少于0
                wus.value = 0;
            }
            //if循环  减号最低不允许是零   给input里的value赋值为1
            money1.innerHTML = parseFloat(wus.value*m).toFixed(2);
            var s1 = money1.innerHTML;
            var q1 = parseFloat(s1);
            money2.innerHTML = parseFloat(q+q1).toFixed(2);
        }
         function s(){
        
        var check=document.getElementById("check");
        if(check.checked==true){
            var ids=document.getElementsByName("ids");						//寻找ids类名
            for(var i=0;i<ids.length;i++){
                   ids[i].checked=true;										//选框判定，定义全部选中
                }
        }else{
            var ids=document.getElementsByName("ids");
            for(var i=0;i<ids.length;i++){
                   ids[i].checked = false;									//else（否则）全部为false（不选中）
                }
        }
    }
        function ss(obj){
            var ids=document.getElementsByName("ids");
            for(var i=0;i<ids.length;i++){
            var r = confirm("确定要删除物品吗?");
            if(r==true && ids[i].checked==true){				//判定选中，并且确定删除
                var a = obj.parentNode;							//寻找父节点
                var b = obj.parentNode;							//同上
                a.remove(b);
            }else{
                alert("未选中");
                break;											//终止		
            }
                }
        }