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; }
js
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 } }