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>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！