淘宝购物车效果
2018-06-24 01:20:56来源：未知 阅读 ()
淘宝购物车效果
今天给大家带来的是淘宝购物车效果，写的不怎么好，请大家多多指教。
效果：
1.点击全选前的选择框，选择所有的选择框。
2.点击商品的加号或者减号可以改变商品的数量值，并且改变商品的小计和他的积分，同时在最下方的总积分和总金额会改变
3.在商品的数量值可以直接更改他的值，并且商品的小计和他的积分可以改变，同时在最下方的总积分和总金额会改变
4.点击商品最后的删除按钮可以删除本商品的值，并且更改最下方的总积分和总金额
5.点击最下方的删除所选按钮可以使你选择的商品进行删除。若是全选则都删除，并且全选按钮的对勾取消
HTML代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>淘宝购物车效果</title> 6 <link rel="stylesheet" type="text/css" href="css/index.css"> 7 </head> 8 <body> 9 <div class="box c"> 10 <div class="logo"></div> 11 <ul> 12 <li>您的位置：</li> 13 <li><a href="#">首页 </a><span>> </span> </li> 14 <li><a href="#">我的淘宝 </a><span>></span> </li> 15 <li>我的购物车</li> 16 </ul> 17 <div class="shopcat"> 18 <div class="shopcat1">1.查看购物车</div> 19 <div class="shopcat2"></div> 20 <div class="shopcat1">2.确认订单信息</div> 21 <div class="shopcat2"></div> 22 <div class="shopcat1">3.付款到支付宝</div> 23 <div class="shopcat2"></div> 24 <div class="shopcat1">4.确认收货</div> 25 <div class="shopcat2"></div> 26 <div class="shopcat1">5.评价</div> 27 </div> 28 <table> 29 <tr> 30 <td> 31 <input type="checkbox" id="ck">全选 32 </td> 33 <td>店铺宝贝</td> 34 <td>获积分</td> 35 <td>单价(元)</td> 36 <td>数量</td> 37 <td>小计(元)</td> 38 <td>操作</td> 39 </tr> 40 <tr class="hrs"> 41 <td colspan="7"> 42 <div class="cutoff"></div> 43 </td> 44 </tr> 45 <tr class="shop"> 46 <td colspan="7"> 47 店铺 : <span><a href="#">纤巧百媚时尚鞋坊 </a></span> 卖家: <span> <a href="#">纤巧百媚</a></span> 48 <span class="vendor"></span> 49 </td> 50 </tr> 51 <tr> 52 <td><input type="checkbox" name="ck"></td> 53 <td class="goods"> 54 <img src="img/taobao_cart_01.jpg" width="100" height="100"> 55 <div class="img_r"> 56 <p class="p1"><a href="#">日韩流行风时尚美眉最爱独特米字拼图金属坡跟公主靴子黑色</a></p> 57 <p class="p1">颜色：棕色 尺码：37 </p> 58 <p class="p1"> 59 保障 : 60 <span class="bz"></span> 61 </p> 62 </div> 63 </td> 64 <td class="jf" name='5'>5</td> 65 <td>138.00</td> 66 <td> 67 <span class="minus" onclick="add(this)"></span> 68 <input type="number" value="1" class="nub" name="nub" id="v1"> 69 <span class="add" onclick="add(this)"></span> 70 </td> 71 <td id="s1" class="xj">138</td> 72 <td><a href="#" class="del">删除</a></td> 73 </tr> 74 <tr class="shop"> 75 <td colspan="7"> 76 店铺 : <span><a href="#">香港我的美丽日记 </a></span> 卖家: <span> <a href="#">lokemick2009</a></span> 77 <span class="vendor"></span> 78 </td> 79 </tr> 80 <tr> 81 <td><input type="checkbox" name="ck"></td> 82 <td class="goods"> 83 <img src="img/taobao_cart_02.jpg" alt="" width="100" height="100"> 84 <div class="img_r"> 85 <p><a href="#">chanl/香奈儿/香奈儿炫亮魅力唇膏3.5g</a></p> 86 <p> 87 保障 : 88 <span class="bz"></span> 89 <span class="rose"></span> 90 </p> 91 </div> 92 </td> 93 <td class="jf" name='12'>12</td> 94 <td>265.00</td> 95 <td> 96 <span class="minus" onclick="add(this)"></span> 97 <input type="number" value="1" class="nub" name="nub" id="v2"> 98 <span class="add" onclick="add(this)"></span> 99 </td> 100 <td id="s2" class="xj">265</td> 101 <td><a href="#" class="del">删除</a></td> 102 </tr> 103 <tr class="shop"> 104 <td colspan="7"> 105 店铺 : <span><a href="#">实体店经营 </a></span> 卖家: <span> <a href="#">林颜店铺</a></span> 106 <span class="vendor"></span> 107 </td> 108 </tr> 109 <tr> 110 <td><input type="checkbox" name="ck"></td> 111 <td class="goods"> 112 <img src="img/taobao_cart_03.jpg" alt="" width="100" height="100"> 113 <div class="img_r"> 114 <p><a href="#">蝶装海？蓝清滢粉底夜10#( 象白牙 )</a></p> 115 <p> 116 保障 : 117 <span class="bz"></span> 118 <span class="rose"></span> 119 </p> 120 </div> 121 </td> 122 <td class="jf" name='3'>3</td> 123 <td>85.00</td> 124 <td> 125 <span class="minus" onclick="add(this)"></span> 126 <input type="number" value="1" class="nub" name="nub" id="v3"> 127 <span class="add" onclick="add(this)"></span> 128 </td> 129 <td id="s3" class="xj">85</td> 130 <td><a href="#" class="del">删除</a></td> 131 </tr> 132 <tr class="shop"> 133 <td colspan="7"> 134 店铺 : <span><a href="#">红豆豆的小屋 </a></span> 卖家: <span> <a href="#">taobao豆豆</a></span> 135 <span class="vendor"></span> 136 </td> 137 </tr> 138 <tr> 139 <td><input type="checkbox" name="ck"></td> 140 <td class="goods"> 141 <img src="img/taobao_cart_04.jpg" alt="" width="100" height="100"> 142 <div class="img_r"> 143 <p><a href="#">相宜促销专供 大S推荐 最好用的LilyBell化妆棉</a></p> 144 <p> 145 保障 : 146 <span class="bz"></span> 147 </p> 148 </div> 149 </td> 150 <td class="jf" name="12">12</td> 151 <td>12.00</td> 152 <td> 153 <span class="minus" onclick="add(this)"></span> 154 <input type="number" value="1" name="nub" class="nub" id="v4"> 155 <span class="add" onclick="add(this)"></span> 156 </td> 157 <td id="s4" class="xj" value='12'>12</td> 158 <td><a href="#" class="del">删除</a></td> 159 </tr> 160 <tr class="last"> 161 <td colspan="4"> 162 <img src="img/taobao_del.jpg" id="alldel" > 163 </td> 164 <td colspan="3" rowspan="" headers=""> 165 <p>商品总价(不含运费):<span id="zj">0</span>元</p> 166 <p>可获积分<span id="jf2">0</span>点</p> 167 <p class="imgP"> 168 <img src="img/taobao_subtn.jpg" alt=""> 169 </p> 170 </td> 171 </tr> 172 </table> 173 </div> 174 <script src="js/index.js"></script> 175 <script> 176 setInterval('com()',500);//定时器，每0.5s 执行下这个函数 177 </script> 178 </body> 179 </html>
css样式：
1 *{margin: 0;padding: 0} 2 html,body{width: 100%} 3 a{text-decoration: none;} 4 /* input的类型为number时去掉小箭头 */ 5 input::-webkit-outer-spin-button, 6 input::-webkit-inner-spin-button { 7 -webkit-appearance: none; 8 } 9 input[type="number"]{ 10 -moz-appearance: textfield; 11 } 12 /* ----------------------end---------------------- */ 13 .c{margin: 0 auto;} 14 .box{width: 1004px;height: 100px;margin-top: 30px;} 15 .box .logo{width: 173px;height: 46px;background: url('../img/logo.gif') no-repeat;background-size: 100% 100%;} 16 /* 页面导航 */ 17 .box ul {margin-top: 24px;height: 18px;width: 100%;} 18 .box ul li{list-style: none;font-size: 16px;float: left;margin-right: 4px;} 19 .box ul li a {color: #678cd9;} 20 /* ----------------------end---------------------- */ 21 /* 支付流程 */ 22 .box .shopcat {width: 986px;height: 23px;border-radius: 6px;background:#e5e5e5;margin-top: 16px;} 23 .box .shopcat div{float: left} 24 .box .shopcat .shopcat1 {width:162px;height: 23px;line-height: 23px;text-indent: 2em;font-size: 16px;} 25 .box .shopcat .shopcat2 {width: 44px;height: 23px;background: url('../img/taobao_bg.png') no-repeat} 26 .box .shopcat .shopcat1:nth-child(1){width:204px;border-radius:6px;border-top-right-radius:0;border-bottom-right-radius:0;background: #ff6600;color:white;} 27 .box .shopcat .shopcat2:nth-child(2){margin-left: -14px;width: 16px;} 28 /* ----------------------end---------------------- */ 29 table{margin-bottom: 20px;} 30 table tr{height: 63px;background: #e2f2ff;text-align: center;} 31 table a {color: #678cd9; } 32 table tr:nth-child(1){height: 44px;background: none;} 33 table .hrs{height:4px;background: none;} 34 .box .cutoff{width: 1000px;height: 4px;background: #b8c9e5;} 35 table .shop{ height: 40px;text-align: left;text-indent: 2em;background:none;position: relative} 36 table .shop span{margin-right:6px;} 37 table .shop .vendor{width: 84px;height:26px;display: inline-block;background: url('../img/taobao_relation.jpg') no-repeat;position: absolute;} 38 table .add{width: 14px;height: 14px;background: url('../img/taobao_adding.jpg') no-repeat;display: inline-block;background-size: 100% 100%;} 39 table .nub {width: 30px;height: 14px;text-align: center} 40 table .minus{width: 14px;height: 14px;background: url('../img/taobao_minus.jpg') no-repeat;display: inline-block;background-size: 100% 100%;} 41 table .goods {width: 360px;padding: 8px;} 42 table .goods img{float: left;} 43 table .goods .img_r{float: left;text-align: left;width: 246px;margin-left: 10px;font-size: 12px;} 44 table .goods .img_r p{font-size: 12px;line-height: 24px;margin-top: 16px;} 45 table .goods .img_r p:nth-child(2){margin-top:0;} 46 table .goods .img_r .p1{margin-top: 0;} 47 table .goods .img_r .bz{width: 20px;height: 20px;display: inline-block;background: url('../img/taobao_icon_01.jpg') no-repeat;background-size:100% 100% } 48 table .goods .img_r .rose{width: 20px;height: 20px;display: inline-block;background: url('../img/taobao_icon_02.jpg') no-repeat;background-size:100% 100% } 49 table .last{background: none} 50 table .last td{text-align: right;} 51 table .last td:nth-child(1){text-align:left;} 52 table .last td p:nth-child(1){margin-top: 10px;} 53 table .last td p{line-height: 26px;} 54 table .last td #zj{font-size:16px;color: #ff6300;margin-right:4px;margin-left: 4px;} 55 table .last td #jf2{font-size:16px;color: #ff6300;margin-right:4px;margin-left: 4px;} 56 /* ----------------------end---------------------- */
js代码：
1 // 点击全选 2 var ck = document.getElementById('ck'); 3 var cks =document.getElementsByName('ck'); 4 ck.onclick = function (){ 5 for(var i of cks ){ 6 i.checked = true; 7 } 8 } 9 10 //更改input的值并且计算总额，调用函数，！important 11 function add(idName){ 12 var open = idName.getAttribute('class'); //获取他点击的地方 13 var int = idName.parentNode.childNodes[3].value;//获取点击的int的value值 14 var price = idName.parentNode.parentNode.childNodes[7].innerHTML;//获取单价 15 var sum = idName.parentNode.parentNode.childNodes[11].innerHTML;//获取小计 16 var jf = idName.parentNode.parentNode.childNodes[5].innerHTML;//获取积分 17 var jfz = idName.parentNode.parentNode.childNodes[5].getAttribute('name');//获取购买单件商品的积分值即它的name值 18 var jf2 = document.getElementById('jf2'); 19 if(open == 'add'){//判断input的class名字 20 int = parseInt(int)+1; 21 }else if(open == 'minus'){ 22 if(int > 1){ 23 int = parseInt(int)-1; 24 } 25 } 26 idName.parentNode.childNodes[3].value = int;//重新定义int的value值 27 idName.parentNode.parentNode.childNodes[11].innerHTML = parseInt(price) * parseInt(int);//重新定义总价 28 idName.parentNode.parentNode.childNodes[5].innerHTML = parseInt(int) * parseInt(jfz); //定义单个商品购买可获得的积分 29 30 } 31 32 //价格框失去焦点时 33 var nubs = document.getElementsByName('nub'); 34 for(var i of nubs){ 35 i.onblur = bl; 36 } 37 function bl(fo){ 38 var intv = this.value; // 获取input框的value值 39 var price = this.parentNode.parentNode.childNodes[7].innerHTML; //获取商品的单价 40 var jf = this.parentNode.parentNode.childNodes[5].innerHTML;//获取积分 41 var jfz = this.parentNode.parentNode.childNodes[5].getAttribute('name');//获取购买单件商品的积分值即它的name值 42 this.parentNode.parentNode.childNodes[11].innerHTML = parseInt(price) * parseInt(intv); 43 this.parentNode.parentNode.childNodes[5].innerHTML = parseInt(intv) * parseInt(jfz); //定义单个商品购买可获得的积分 44 } 45 46 //更改积分和总价 47 var bo = document.getElementsByTagName('body')[0]; 48 bo.onload = com; 49 function com(){ 50 var zjf = document.getElementById('jf2');//获取总积分 51 var zj = document.getElementById('zj');//获取在总价 52 var jf = document.getElementsByClassName('jf');//获取单件商品的积分 53 var xj = document.getElementsByClassName('xj');//获取单件商品的小计 54 var jfz = 0 ; //定义所有商品的积分为0 55 var xjz = 0 ; 56 for (var x = 0;x<jf.length;x++){ 57 jfz = jfz + parseInt(jf[x].innerHTML); //循环单件商品的积分并且累加到 jfz 中; 58 } 59 for (var i = 0;i<xj.length;i++){ 60 xjz = xjz + parseInt(xj[i].innerHTML); //循环单件商品的小计并且累加到 xjz 中; 61 } 62 zjf.innerHTML = jfz ; //定义所有商品的总积分 63 zj.innerHTML = xjz ; //定义所有商品的总价 64 } 65 66 //单个删除商品 67 var dels = document.getElementsByClassName('del'); 68 for(var x of dels){ 69 x.onclick = del ; 70 } 71 function del(){ 72 this.parentNode.parentNode.previousSibling.previousSibling.remove();//previousSibling 上一个兄弟 73 this.parentNode.parentNode.remove(); 74 } 75 76 //多选框打钩的删除 77 var dele = document.getElementById('alldel'); //获取删除所选的按钮 78 dele.onclick = delec ; //添加点击事件 79 function delec(){ 80 var cks = document.getElementsByName('ck'); //获取每个多选框 81 console.log(cks); 82 for (var i=cks.length-1;i>=0;i--){ 83 if(cks[i].checked == true){ //循环每个多选框，若他的checked值为true这删除他和她的父亲 84 cks[i].parentNode.parentNode.previousSibling.previousSibling.remove(); 85 cks[i].parentNode.parentNode.remove(); 86 ck.checked = false; 87 } 88 } 89 }
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
相关文章
- JS实现标签页切换效果 2020-03-12
- jQuery实现的放大镜效果示例 2020-02-21
- 鼠标滑过出现预览的大图提示效果 2020-02-21
- Js实现滚动变色的文字效果 2020-01-07
- JavaScript实现隐藏省略文字效果的方法 2019-12-14
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
热门词条
最新资讯
热门关注
热门标签