HTML：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <link rel="stylesheet" href="css/css.css" /> 7 </head> 8 <body> 9 <div id="container"> 10 <img src="img/taobao_logo.gif"/> 11 <ul id="weizhi"> 12 <li>您的位置:</li> 13 <li>首页</li> 14 <li>></li> 15 <li>我的淘宝</li> 16 <li>></li> 17 <li>我的购物车</li> 18 </ul> 19 20 <ul id="liuCheng"> 21 <li>1.查看购物车<div class="fang he"></div></li> 22 <li>2.确认订单信息<div class="fang"></div></li> 23 <li>3.收款到支付宝<div class="fang"></div></li> 24 <li>4.确认收货<div class="fang"></div></li> 25 <li>5.评价</li> 26 </ul> 27 28 29 <table border="0" cellspacing="1" cellpadding="0" id="table"> 30 <tr> 31 <td><input type="checkbox" id="all"/><label for="all">全选</label></td> 32 <td>店铺宝贝</td> 33 <td>获积分</td> 34 <td>单价（元）</td> 35 <td>数量</td> 36 <td>小计</td> 37 <td>操作</td> 38 </tr> 39 40 <tr class="top_hang"><td colspan="5" >店铺：<font>纤巧百媚时尚鞋坊</font> 卖家：<font>纤巧百媚</font><img src="img/taobao_relation.jpg"></td></tr> 41 <tr class="hang"> 42 <td><input type="checkbox" class="box"/></td> 43 <td><img src="img/taobao_cart_01.jpg"><p>日韩流行时尚风格独特单季度房价的精神的靴子黑色红色阿斯飞洒d实打实的技术的房价</p><span>颜色：棕色 尺寸：37</span><span>保障：<img src="img/taobao_icon_01.jpg" alt="" /></span></td> 44 <td><b>5</b></td> 45 <td class="danJia">138.00</td> 46 <td><img src="img/taobao_minus.jpg" class="Button_jian"><input type="number" min="1" value="1" class="number" readonly="readonly"/><img src="img/taobao_adding.jpg" class="Button_jia"/></td> 47 <td class="xiaoJi">552</td> 48 <td><a>删除</a></td> 49 </tr> 50 51 52 <tr class="top_hang"><td colspan="5" >店铺：<font>纤巧百媚时尚鞋坊</font> 卖家：<font>纤巧百媚</font><img src="img/taobao_relation.jpg"></td></tr> 53 <tr class="hang"> 54 <td><input type="checkbox" class="box"/></td> 55 <td><img src="img/taobao_cart_01.jpg"><p>日韩流行时尚风格独特单季度房价的精神的靴子黑色红色阿斯飞洒d实打实的技术的房价</p><span>颜色：棕色 尺寸：37</span><span>保障：<img src="img/taobao_icon_01.jpg" alt="" /></span></td> 56 <td><b>5</b></td> 57 <td class="danJia">938.00</td> 58 <td><img src="img/taobao_minus.jpg" class="Button_jian"><input type="number" min="1" value="2" class="number" readonly="readonly"/><img src="img/taobao_adding.jpg" class="Button_jia"/></td> 59 <td class="xiaoJi">552</td> 60 <td><a>删除</a></td> 61 </tr> 62 63 64 <tr class="top_hang"><td colspan="5" >店铺：<font>纤巧百媚时尚鞋坊</font> 卖家：<font>纤巧百媚</font><img src="img/taobao_relation.jpg"></td></tr> 65 <tr class="hang"> 66 <td><input type="checkbox" class="box"/></td> 67 <td><img src="img/taobao_cart_01.jpg"><p>日韩流行时尚风格独特单季度房价的精神的靴子黑色红色阿斯飞洒d实打实的技术的房价</p><span>颜色：棕色 尺寸：37</span><span>保障：<img src="img/taobao_icon_01.jpg" alt="" /></span></td> 68 <td><b>5</b></td> 69 <td class="danJia">638.00</td> 70 <td><img src="img/taobao_minus.jpg" class="Button_jian"><input type="number" min="1" value="2" class="number" readonly="readonly"/><img src="img/taobao_adding.jpg" class="Button_jia"/></td> 71 <td class="xiaoJi">552</td> 72 <td><a>删除</a></td> 73 </tr> 74 75 76 <tr class="top_hang"><td colspan="5" >店铺：<font>纤巧百媚时尚鞋坊</font> 卖家：<font>纤巧百媚</font><img src="img/taobao_relation.jpg"></td></tr> 77 <tr class="hang"> 78 <td><input type="checkbox" class="box"/></td> 79 <td><img src="img/taobao_cart_01.jpg"><p>日韩流行时尚风格独特单季度房价的精神的靴子黑色红色阿斯飞洒d实打实的技术的房价</p><span>颜色：棕色 尺寸：37</span><span>保障：<img src="img/taobao_icon_01.jpg" alt="" /></span></td> 80 <td><b>5</b></td> 81 <td class="danJia">538.00</td> 82 <td><img src="img/taobao_minus.jpg" class="Button_jian"><input type="number" min="1" value="3" class="number" readonly="readonly"/><img src="img/taobao_adding.jpg" class="Button_jia"/></td> 83 <td class="xiaoJi">552</td> 84 <td><a>删除</a></td> 85 </tr> 86 87 </table> 88 89 90 <span id="zong">商品总价（不含运费）：<font id="qian">1349</font>元</span> 91 <button id="shanChu">删除所选</button><br /> 92 <span id="fen">可获积分：<font id="dian">65</font>点</span><br /> 93 <img src="img/taobao_subtn.jpg" alt="" id="gouMai" onclick="javascript:alert('瞎点啥！你有钱似地')"/> 94 </div> 95 96 97 98 99 100 101 <script type="text/javascript" src="js/js.js" ></script> 102 </body> 103 </html>
CSS：
1 *{margin:0 auto;padding:0;list-style: none;} 2 body{1200px;background:#fff} 3 #container{background:#fff;height:200px;padding-top:10px} 4 #weizhi{display:block} 5 #weizhi li{float:left;font-size:14px;margin-top:20px;} 6 #weizhi li:nth-child(2){color: blue;} 7 #weizhi li:nth-child(4){color: blue;} 8 9 #liuCheng{display:block;margin-top:40px;background: #FF6600;display: inline-block;border-radius:5px} 10 #liuCheng li{ float: left; 240px;height: 40px;text-align:center;box-sizing:border-box;padding-top:8px;font-size: 18px;background: #FF6600;color: #fff;font-weight:600} 11 #liuCheng li+li{background: #bbb;color: #000;font-weight:600} 12 .fang{display: inline-block; 27px;height:27px;float:right;transform:rotate(45deg);margin-right:-15px;margin-top: -3px;border-top:4px solid #fff;border-right:4px solid #fff;background:#bbb;} 13 .he{display: inline-block; 27px;height:27px;float:right;transform:rotate(45deg);margin-right:-15px;margin-top: -3px;border-top:4px solid #fff;border-right:4px solid #fff;background:#FF6600;} 14 15 #liuCheng li:nth-last-child{border-radius:5px} 16 17 #table {text-align:center;margin-top:6px;} 18 #table tr{border-bottom:4px solid #B2CAF5;height: 30px; 100%;;display:inline-block;font-size:14px} 19 #table tr td:nth-child(1){ 50px;} 20 #table tr td:nth-child(2){ 520px;} 21 #table tr td:nth-child(3){ 120px;} 22 #table tr td:nth-child(4){ 120px;} 23 #table tr td:nth-child(5){ 170px;} 24 #table tr td:nth-child(6){ 120px;} 25 #table tr td:nth-child(7){ 100px;} 26 27 28 .top_hang{ 100%;height: 20px; border:0px !important;text-align:left} 29 .top_hang>td:nth-child(1){500px !important;height: 20px;padding-top:2px;box-sizing:border-box} 30 .top_hang>td>font{color: #3F6791;margin-left: 4px;margin-right: 4px;} 31 .top_hang td img{display:inline-block;margin-bottom: -6px;} 32 33 .hang{ 100%;height: 120px !important; border:0px !important;} 34 .hang td{border:2px solid #E2F2FF;height:110px;box-sizing:border-box;background:#E2F2FF;padding:8px;position: relative;} 35 .hang td img{float:left;margin-right:20px} 36 .hang td p{float:left;360px;text-align: left;color:#357198;font-size:13px;margin-top:-5px;line-height:21px} 37 .hang td span{float:left;360px;text-align: left;color:#000;font-size:13px;margin-top:2px} 38 .hang td span img{float: none;} 39 .number{ 30px;text-align: center;} 40 .Button_jia{float: none !important;position: absolute;right:30px;top:50px;} 41 .Button_jian{float: none !important;position: absolute;left:48px;top:50px;} 42 .Button_jia,.Button_jian,a:hover{cursor:pointer} 43 .xiaoJi{font-size:17px;font-weight:700;color:#EB5A14} 44 .hang td a{color:#357198;text-decoration: none;} 45 46 47 #zong{float:right;font-size:15px} 48 #qian{font-size:24px;font-weight:700;color:#EB5A14} 49 50 51 #shanChu{margin-top:40px} 52 53 #fen{float: right;display: inline;height:20px} 54 55 #gouMai{float: right;margin-top: 20px;} 56 57 input::-webkit-outer-spin-button, 58 input::-webkit-inner-spin-button { 59 -webkit-appearance: none; 60 } 61 input[type="number"]{ 62 -moz-appearance: textfield; 63 }
JS：
1 xiaoji(); 2 //减号选择0 3 var jianhao_arr=document.querySelectorAll(".Button_jian") 4 for(var x of jianhao_arr){ 5 x.addEventListener("click",function(){ 6 var zhi=this.nextSibling.value; 7 8 if(zhi-1==0){ 9 alert("没点儿b数？"); 10 }else{ 11 this.nextSibling.value=zhi-1 12 } 13 xiaoji(); 14 }) 15 } 16 17 //加号 18 var jiahao_arr=document.querySelectorAll(".Button_jia") 19 for(var x of jiahao_arr){ 20 x.addEventListener("click",function(){ 21 var zhi=this.previousSibling.value; 22 this.previousSibling.value=1+parseInt(zhi); 23 xiaoji(); 24 }) 25 } 26 27 28 29 //全选 30 var all=document.querySelector("#all"); 31 var meige=document.querySelectorAll(".box") 32 33 all.onclick=function xuanZe(){ 34 for(var i of meige){ 35 i.checked=all.checked 36 } 37 } 38 39 40 //删除 41 var a=document.querySelectorAll("a") 42 for(var a of a){ 43 a.addEventListener("click",function(){ 44 this.parentNode.parentNode.previousSibling.previousSibling.remove() 45 this.parentNode.parentNode.remove(); 46 xiaoji(); 47 }) 48 } 49 50 51 52 //小计 53 function xiaoji(){ 54 var xiaoji=document.querySelectorAll(".xiaoJi") //小ji标签! 55 var danjia=document.querySelectorAll(".danJia") //单价标签! 56 for(var x=0;x<danjia.length;x++){ 57 var zhi=danjia[x].nextSibling.nextSibling.children[1].value; 58 xiaoji[x].innerText=parseInt(danjia[x].innerHTML)*parseInt(zhi) 59 } 60 jiFen(); 61 zong(xiaoji); 62 } 63 64 65 66 67 68 //总计 69 function zong(xiaoji2){//小ji标签! 70 var arr=[]; 71 if(xiaoji2.length==0){document.querySelector("#qian").innerHTML=0} 72 for(x of xiaoji2){ 73 arr.push(x.innerHTML); 74 var he=arr.reduce(function(x,y){return parseInt(x)+parseInt(y);}) 75 document.querySelector("#qian").innerHTML=he; 76 } 77 } 78 79 80 81 //删除所有按钮 82 var btn=document.querySelector("#shanChu"); 83 btn.onclick=function(){ 84 var box=document.querySelectorAll(".box"); 85 for(x of box){ 86 if(x.checked==true){ 87 x.parentNode.parentNode.previousSibling.previousSibling.remove() 88 x.parentNode.parentNode.remove(); 89 xiaoji(); 90 } 91 } 92 } 93 94 95 //每个积分 96 function jiFen(){ 97 var jifen=5; 98 var b=document.querySelectorAll("b"); 99 for(x of b){ 100 var num=x.parentNode.nextSibling.nextSibling.nextSibling.nextSibling.children[1].value; 101 console.log(num) 102 var ge=jifen*num; 103 x.innerText=ge; 104 } 105 zongJiFen(b); 106 } 107 108 //总积分 109 function zongJiFen(b){ 110 var arr=[]; 111 if(b.length==0){document.querySelector("#dian").innerHTML=0} 112 for(x of b){ 113 arr.push(x.innerHTML); 114 var he=arr.reduce(function(x,y){return parseInt(x)+parseInt(y);}) 115 document.querySelector("#dian").innerHTML=he; 116 } 117 }