zoukankan html css js c++ java

一个购物车的测试

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>淘宝网-我的购物车</title>
</head>
<body onload="qq()">
    <div>
        <h1>
            淘宝网
        </h1>
        <div>
            您的位置:
            <a class="blue font14">
                首页
            </a> > 
            <a class="blue font14">
                我的淘宝
            </a> > 
            <a class="font14">我的购物车
            </a>
        </div>
    <nav>
    <div class="k1 k1-a">1.查看购物车
        <div  class="nav1"></div>
        <div class="nav2"></div>
    </div>
    <div class="k1" >2.确认订单信息
        <div  class="nav1 nav2-c top"></div><br>
        <div class="nav2 nav2-c"></div>
    </div>
    <div class="k1">3.付款到支付宝
        <div  class="nav1 nav2-c top"></div><br>
        <div class="nav2 nav2-c"></div>
    </div>
    <div class="k1">4.确认收货
        <div  class="nav1 nav2-c top"></div><br>
        <div class="nav2 nav2-c"></div>
    </div>
    <div class="k1 k1-c">5.评价</div>
    </div>
    </nav>
    <div  class="tac w1069">
        <table>

            <tr>
                <td>
                    <input type="checkbox" onclick="dx()" name="ce">
                    全选</td>
                <td>店铺宝贝</td>
                <td>获积分</td>
                <td>单价(元)</td>
                <td>数量</td>
                <td>小计(元)</td>
                <td>操作</td>
            </tr>
            <div>
            <tr id="de2">
                <td colspan="6" class="tal">店铺:红豆豆的小屋 卖家 : taobao豆豆 <img src="img/taobao_relation.jpg"></td>
            </tr>
            <tr class="n2" id="de">
                <td><input type="checkbox" name="ce"></td>
                <td><img src="img/taobao_cart_01.jpg" class="fl">日韩流行风时尚美眉最爱独特米字拼图金属坡<br/>跟公主靴子黑色<br>
                颜色:棕色 尺码:37
                保障:<img src="img/taobao_icon_01.jpg"></td>
                <td style="" id="num1">5</td>
                <td style="" id="num2">138.00</td>
                <td style=""><button onclick="min(this)">-</button><input id="num" type="text" name="ce" value="1" class="w20"><button onclick="max()">+</button></td>
                <td style="" id="num3">138</td>
                <td style=""><a href="#" onclick="de(this)">删除</a></td>
            </tr>
        </div>
            <tr>
                <td colspan="6" class="tal">店铺:红豆豆的小屋 卖家 : taobao豆豆 <img src="img/taobao_relation.jpg"></td>
            </tr>
            <tr class="n2" >
                <td><input type="checkbox" name="ce"></td>
                <td><img src="img/taobao_cart_01.jpg" class="fl">日韩流行风时尚图金属坡<br/>跟公主靴子黑色<br>
                颜色:棕色 尺码:37
                保障:<img src="img/taobao_icon_01.jpg"></td>
                <td style="" id="num1">5</td>
                <td style="" id="num2">138.00</td>
                <td style=""><button onclick="min(this)">-</button><input id="num" type="text" name="ce" value="1" class="w20"><button onclick="max()">+</button></td>
                <td style="" id="num3">138</td>
                <td style=""><a href="#" onclick="de(this)">删除</a></td>
            </tr>
            <tr>
                <td colspan="6" class="tal">店铺:红豆豆的小屋 卖家 : taobao豆豆 <img src="img/taobao_relation.jpg"></td>
            </tr>
            <tr class="n2" >
                <td><input type="checkbox" name="ce"></td>
                <td><img src="img/taobao_cart_01.jpg" class="fl">日韩流行风时尚美眉最爱独特米字拼图金属坡<br/>跟公主靴子黑色<br>
                颜色:棕色
                保障:<img src="img/taobao_icon_01.jpg"></td>
                <td style="" id="num1">5</td>
                <td style="" id="num2">138.00</td>
                <td style=""><button onclick="min(this)">-</button><input id="num" type="text" name="" value="1" class="w20"><button onclick="max()">+</button></td>
                <td style="" id="num3">138</td>
                <td style=""><a href="#" onclick="de(this)">删除</a></td>
            </tr>
            <tr>
                <td colspan="6" class="tal">店铺:红豆豆的小屋 卖家 : taobao豆豆 <img src="img/taobao_relation.jpg"></td>
            </tr>
            <tr class="n2" >
                <td><input type="checkbox" name="ce"></td>
                <td><img src="img/taobao_cart_01.jpg" class="fl">日韩流行风时尚美图金属坡<br/>跟公主靴子黑色<br>
                颜色:棕色 尺码:37
                保障:<img src="img/taobao_icon_01.jpg"></td>
                <td style="" id="num1">5</td>
                <td style="" id="num2">138.00</td>
                <td style=""><button onclick="min(this)">-</button><input id="num" type="text" name="" value="1" class="w20"><button onclick="max()">+</button></td>
                <td style="" id="num3">138</td>
                <td style=""><a href="#" onclick="de(this)">删除</a></td>
            </tr>
        </table>
    </div>
</body>
</html>

css

.blue{
            color: blue;
        }
        .font14{
            font-size: 14px;
        }
        .k1{
             200px;height: 40px;background-color: #e4e4e4;float: left;position: relative;
        }
        .k1-a{
            border-radius: 5px 0 0 5px;background-color: #FF6600;color: white
        }
        .k1-c{
            border-radius: 0 5px 5px 0;
        }
        .nav1{
            background-image: url('img/taobao_bg.png');
            height: 20px;
             26px;
            float: left;
            background-repeat: no-repeat;
            background-size: 26px;
            transform: rotateZ(180deg);
            position: absolute;
            right: -25px;
            z-index: 10;
            background-position: 0px -40px;
            top: 0;
        }
        .nav2{
            background-image: url('img/taobao_bg.png');
            height: 20px;
            z-index: 10;
             26px;
            float: left;
            background-repeat: no-repeat;
            background-size: 26px;
            transform: rotateY(180deg);
            position: absolute;
            right: -25px;
            top: 20px;
            background-position: 0px -40px;
        }
        .nav2-c{

            background-position: 0px 0px;
        }
        .top{
            top: 0;
        }
        nav{
            margin-top: 20px;font-size: 18px;line-height: 40px;text-align: center;
        }
        body{
             1059px;margin:0 auto;
        }
        h1{
            color:#ff9a00;
        }
        .n2{
            background-color: #E2F2FE;
        }
        .n2 td:nth-child(2){
            text-align:left;
             490px;
        }
        .n2 td:nth-child(3){
             90px;
        }
        .n2 td:nth-child(4){
             80px;
        }
        .n2 td:nth-child(5){
             140px;
        }
        .n2 td:nth-child(6){
             80px;
        }
        .n2 td:nth-child(7){
             60px;
        }
        .disib{
            display: inline-block;
        }
        .tal{
            text-align: left;
        }
        .tac{
            text-align: center;
        }
        .fl{
            float: left;
        }
        .w1069{
             1069px;
        }
        .w20{
             20px;
        }

document.getElementById('num').value=1;
    function min(mi){
        console.log(mi.nextSibling);
        var test=mi.nextSibling;
        tx1=test.value;
        // alert(tx1);
        // /^[2-9]+[0-9]$/.test(tx1)
        if (tx1>=2) {
            test.value=test.value-1;
            console.log(test.value-test.value*5);
            in1=document.getElementById('num1').innerHTML;
            in2=document.getElementById('num2').innerHTML;
            in3=document.getElementById('num3').innerHTML;
        document.getElementById('num1').innerHTML=parseInt(in1)-5;
        document.getElementById('num2').innerHTML=(in2*1-138.00).toFixed(2);
        document.getElementById('num3').innerHTML=parseInt(in3)-138;
        }
        else {

            alert("ERROR!意外的数量0，请尝试0以上的商品数量");
        }
    }
    function max(){
        var test=document.getElementById('num');
        t2=parseInt(test.value);
        test.value=t2+1;
        
        console.log();
        in1=document.getElementById('num1').innerHTML;
        in2=document.getElementById('num2').innerHTML;
        in3=document.getElementById('num3').innerHTML;
        document.getElementById('num1').innerHTML=parseInt(in1)+5;
        // =test.value+test.value*5;
        document.getElementById('num2').innerHTML=(in2*1+138.00).toFixed(2);
        document.getElementById('num3').innerHTML=parseInt(in3)+138;    
    }
    function de(ts){
        console.log(ts.parentNode.parentNode);
        console.log(ts.parentNode.parentNode.previousSibling.previousSibling);
        ts.parentNode.parentNode.parentNode.removeChild(ts.parentNode.parentNode.previousSibling.previousSibling);
        ts.parentNode.parentNode.parentNode.removeChild(ts.parentNode.parentNode);
        console.log(ts.parentNode.parentNode.previousSibling.previousSibling);
    }
    var tn=0;

    function dx(){
        var dx=document.getElementsByName('ce');
        console.log(dx);
        if (tn==0){
            for (var i of dx){
                i.checked=true;
                tn=1
            }
            }else{
                for (var i of dx){
                    i.checked=false;
                    tn=0
                }
            }
        }
        function qq(){
    var qq=document.getElementsByName('ce');
    for (var i of qq){
                    i.checked=false;
                    tn=0
        }
        }

查看全文

相关阅读:
test
ws318 配置
 电影地址：
白岩松给青少年的7个忠告，值得好好阅读~
干部带队伍的四个知道，一个跟上
 CDOJ 1259 昊昊爱运动 II bitset+线段树
 codeforces 508D . Tanya and Password 欧拉通路
 poj 1041 John's trip 欧拉回路
 poj 1651 Multiplication Puzzle 区间dp
poj 2955 Brackets 区间dp

原文地址：https://www.cnblogs.com/LastFire/p/8327402.html