JS实现购物车特效
效果:
1.点击全选按钮可以全选,再点击就全不选
2.点击数量‘+'‘- '可以自动计算。并且合计保持更新。当数量大于1时‘-'出现。小于等于1时‘-'消失
3.点击删除可以实现删除功能。
4.点击全选旁的删除按钮可以全部删除。
5.选好商品后点击已选商品,可以显示选中的商品
6.选中的商品可以取消选择。
<!DOCTYPEhtml> <html> <head> <metacharset="UTF-8"> <title>购物车</title> </head> <styletype="text/css"> *{ margin:0; padding:0; } a{ color:#666; text-decoration:none; } body{ padding:20px; color:#666; } .fl{ float:left; } .fr{ float:right; } table{ border-collapse:collapse; border-spacing:0; border:0; text-align:center; width:937px; } th,td{ border:1pxsolid#CADEFF; } th{ background:#e2f2ff; border-top:3pxsolid#a7cbff; height:30px; } td{ padding:10px; color:#444; } tbodytr:hover{ background:RGB(238,246,255); } .checkbox{ width:60px; } .goods{ width:300px; } .goodsspan{ width:180px; margin-top:20px; text-align:left; float:left; } .price{ width:130px; } .count{ width:90px; } .count.add,.countinput,.count.reduce{ float:left; margin-right:-1px; position:relative; z-index:0; } .count.add,.count.reduce{ height:23px; width:17px; border:1pxsolid#e5e5e5; background:#f0f0f0; text-align:center; line-height:23px; color:#444; } .count.add:hover,.count.reduce:hover{ color:#f50; z-index:3; border-color:#f60; cursor:pointer; } .countinput{ width:50px; height:15px; line-height:15px; border:1pxsolid#aaa; color:#343434; text-align:center; padding:4px0; background-color:#fff; z-index:2; } .subtotal{ width:150px; color:red; font-weight:bold; } .operation{ width:80px; } .operationspan:hover,a:hover{ cursor:pointer; color:red; text-decoration:underline; } img{ width:100px; height:80px; /*border:1pxsolid#ccc;*/ margin-right:10px; float:left; } .foot{ width:935px; margin-top:10px; color:#666; height:48px; border:1pxsolid#c8c8c8; background-color:#eaeaea; background-image:linear-gradient(RGB(241,241,241),RGB(226,226,226)); position:relative; z-index:8; } .footdiv,.foota{ line-height:48px; height:48px; } .foot.select-all{ width:100px; height:48px; line-height:48px; padding-left:5px; color:#666; } .foot.closing{ border-left:1pxsolid#c8c8c8; width:100px; text-align:center; color:#000; font-weight:bold; background:RGB(238,238,238); cursor:pointer; } .foot.total{ margin:020px; cursor:pointer; } .foot#priceTotal,.foot#selectedTotal{ color:red; font-family:"MicrosoftYahei"; font-weight:bold; } .foot.selected{ cursor:pointer; } .foot.selected.arrow{ position:relative; top:-3px; margin-left:3px; } .foot.selected.down{ position:relative; top:3px; display:none; } .show.selected.down{ display:inline; } .show.selected.up{ display:none; } .foot.selected:hover.arrow{ color:red; } .foot.selected-view{ width:935px; border:1pxsolid#c8c8c8; position:absolute; height:auto; background:#ffffff; z-index:9; bottom:48px; left:-1px; display:none; } .show.selected-view{ display:block; } .foot.selected-viewdiv{ height:auto; } .foot.selected-view.arrow{ font-size:16px; line-height:100%; color:#c8c8c8; position:absolute; right:330px; bottom:-9px; } .foot.selected-view.arrowspan{ color:#ffffff; position:absolute; left:0px; bottom:1px; } #selectedViewList{ padding:20px; margin-bottom:-20px; } #selectedViewListdiv{ display:inline-block; position:relative; width:100px; height:80px; border:1pxsolid#ccc; margin:10px; } #selectedViewListdivspan{ display:none; color:#ffffff; font-size:12px; position:absolute; top:0px; right:0px; width:60px; height:18px; line-height:18px; text-align:center; background:RGBA(0,0,0,.5); cursor:pointer; } #selectedViewListdiv:hoverspan{ display:block; } </style> <body> <tableid="cartTable"> <thead> <tr> <th><label><inputclass="check-allcheck"type="checkbox"/> 全选</label></th> <th>商品</th> <th>单价</th> <th>数量</th> <th>小计</th> <th>操作</th> </tr> </thead> <tbody> <tr> <tdclass="checkbox"><inputclass="check-onecheck"type="checkbox"/></td> <tdclass="goods"><imgsrc="http://cdn.attach.qdfuns.com/notes/pics/201612/21/075704loo2mdzuux5123gu.jpg.editor.jpg"alt=""/><span>Casio/卡西欧EX-TR350</span></td> <tdclass="price">5999.88</td> <tdclass="count"> <spanclass="reduce"></span> <inputclass="count-input"type="text"value="1"/> <spanclass="add">+</span></td> <tdclass="subtotal">5999.88</td> <tdclass="operation"><spanclass="delete">删除</span></td> </tr> <tr> <tdclass="checkbox"><inputclass="check-onecheck"type="checkbox"/></td> <tdclass="goods"><imgsrc="http://cdn.attach.qdfuns.com/notes/pics/201612/21/075704m26zvv6e52sjczee.jpg.editor.jpg"alt=""/><span>Canon/佳能PowerShotSX50HS</span></td> <tdclass="price">3888.50</td> <tdclass="count"><spanclass="reduce"></span><inputclass="count-input"type="text"value="1"/><spanclass="add">+</span></td> <tdclass="subtotal">3888.50</td> <tdclass="operation"><spanclass="delete">删除</span></td> </tr> <tr> <tdclass="checkbox"><inputclass="check-onecheck"type="checkbox"/></td> <tdclass="goods"><imgsrc="http://cdn.attach.qdfuns.com/notes/pics/201612/21/075704etdabo2fpppdplsa.jpg.editor.jpg"alt=""/><span>Sony/索尼DSC-WX300</span></td> <tdclass="price">1428.50</td> <tdclass="count"><spanclass="reduce"></span><inputclass="count-input"type="text"value="1"/><spanclass="add">+</span></td> <tdclass="subtotal">1428.50</td> <tdclass="operation"><spanclass="delete">删除</span></td> </tr> <tr> <tdclass="checkbox"><inputclass="check-onecheck"type="checkbox"/></td> <tdclass="goods"><imgsrc="http://cdn.attach.qdfuns.com/notes/pics/201612/21/075823wdtw1pdvf3wbwd8b.jpg.editor.jpg"alt=""/><span>Fujifilm/富士instaxmini25</span></td> <tdclass="price">640.60</td> <tdclass="count"><spanclass="reduce"></span><inputclass="count-input"type="text"value="1"/><spanclass="add">+</span></td> <tdclass="subtotal">640.60</td> <tdclass="operation"><spanclass="delete">删除</span></td> </tr> </tbody> </table> <divclass="foot"id="foot"> <labelclass="flselect-all"><inputtype="checkbox"class="check-allcheck"/> 全选</label> <aclass="fldelete"id="deleteAll"href="javascript:;">删除</a> <divclass="frclosing">结算</div> <divclass="frtotal">合计:¥<spanid="priceTotal">0.00</span></div> <divclass="frselected"id="selected">已选商品 <spanid="selectedTotal">0</span>件 <spanclass="arrowup">︽</span> <spanclass="arrowdown">︾</span> </div> <divclass="selected-view"> <divid="selectedViewList"class="clearfix"> <!--<div><imgsrc="images/1.jpg"><span>取消选择</span></div>--> </div> <spanclass="arrow">◆<span>◆</span></span> </div> </div> <script> window.onload=function(){ if(!document.getElementsByClassName){ document.getElementsByClassName=function(cls){ varret=[]; varels=document.getElementsByTagName('*'); for(vari=0,len=els.length;i<len;i++){ if(els[i].className===cls ||els[i].className.indexOf(cls+'')>=0 ||els[i].className.indexOf(''+cls+'')>=0 ||els[i].className.indexOf(''+cls)>=0){ ret.push(els[i]); } } returnret; } } varcartTable=document.getElementById('cartTable'); vartr=cartTable.children[1].rows; varcheckInputs=document.getElementsByClassName('check'); varcheckAllInputs=document.getElementsByClassName('check-all'); varselectedTotal=document.getElementById('selectedTotal'); varpriceTotal=document.getElementById('priceTotal'); varselected=document.getElementById('selected'); varfoot=document.getElementById('foot'); varselectedViewList=document.getElementById('selectedViewList'); vardeleteAll=document.getElementById('deleteAll'); //计算 functiongetTotal(){ varseleted=0; varprice=0; varHTMLstr=''; for(vari=0,len=tr.length;i<len;i++){ if(tr[i].getElementsByTagName('input')[0].checked){ tr[i].className='on'; seleted+=parseInt(tr[i].getElementsByTagName('input')[1].value); price+=parseFloat(tr[i].cells[4].innerHTML); HTMLstr+='<div><imgsrc="'+tr[i].getElementsByTagName('img')[0].src+'"><spanclass="del"index="'+i+'">取消选择</span></div>' } else{ tr[i].className=''; } } selectedTotal.innerHTML=seleted; priceTotal.innerHTML=price.toFixed(2); selectedViewList.innerHTML=HTMLstr; if(seleted==0){ foot.className='foot'; } } //小计 functiongetSubTotal(tr){ vartds=tr.cells; varprice=parseFloat(tds[2].innerHTML); varcount=parseInt(tr.getElementsByTagName('input')[1].value); varSubTotal=parseFloat(price*count); tds[4].innerHTML=SubTotal.toFixed(2); } for(vari=0,len=checkInputs.length;i<len;i++){ checkInputs[i].onclick=function(){ if(this.className==='check-allcheck'){ for(varj=0;j<checkInputs.length;j++){ checkInputs[j].checked=this.checked; } } if(this.checked==false){ for(vark=0;k<checkAllInputs.length;k++){ checkAllInputs[k].checked=false; } } getTotal(); } } selected.onclick=function(){ if(foot.className=='foot'){ if(selectedTotal.innerHTML!=0){ foot.className='footshow'; } } else{ foot.className='foot'; } } selectedViewList.onclick=function(e){ e=e||window.event; varel=e.srcElement; if(el.className=='del'){ varindex=el.getAttribute('index'); varinput=tr[index].getElementsByTagName('input')[0]; input.checked=false; input.onclick(); } } for(vari=0;i<tr.length;i++){ tr[i].onclick=function(e){ e=e||window.event; varel=e.srcElement; varcls=el.className; varinput=this.getElementsByTagName('input')[1]; varval=parseInt(input.value); varreduce=this.getElementsByTagName('span')[1]; switch(cls){ case'add': input.value=val+1; reduce.innerHTML='-'; getSubTotal(this); break; case'reduce': if(val>1){ input.value=val-1; } if(input.value<=1){ reduce.innerHTML=''; } getSubTotal(this); break; case'delete': varconf=confirm('确定要删除吗?'); if(conf){ this.parentNode.removeChild(this); } break default: break; } getTotal(); } tr[i].getElementsByTagName('input')[1].onkeyup=function(){ varval=parseInt(this.value); vartr=this.parentNode.parentNode varreduce=tr.getElementsByTagName('span')[1]; if(isNaN(val)||val<1){ val=1; } this.value=val; if(val<=1){ reduce.innerHTML=''; } else{ reduce.innerHTML='-'; } getSubTotal(tr); getTotal(); } } deleteAll.onclick=function(){ if(selectedTotal.innerHTML!='0'){ varconf=confirm('确定删除吗?'); if(conf){ for(vari=0;i<tr.length;i++){ varinput=tr[i].getElementsByTagName('input')[0]; if(input.checked){ tr[i].parentNode.removeChild(tr[i]); i--; } } } } } checkAllInputs[0].checked=true; checkAllInputs[0].onclick(); } </script> </body> </html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持毛票票!