一个购物车的测试
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{ width: 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; width: 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; width: 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{ width: 1059px;margin:0 auto; } h1{ color:#ff9a00; } .n2{ background-color: #E2F2FE; } .n2 td:nth-child(2){ text-align:left; width: 490px; } .n2 td:nth-child(3){ width: 90px; } .n2 td:nth-child(4){ width: 80px; } .n2 td:nth-child(5){ width: 140px; } .n2 td:nth-child(6){ width: 80px; } .n2 td:nth-child(7){ width: 60px; } .disib{ display: inline-block; } .tal{ text-align: left; } .tac{ text-align: center; } .fl{ float: left; } .w1069{ width: 1069px; } .w20{ width: 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 } }
