ajax怎么实现购物车加减,js实现仿购物车加减效果

效果图：

代码如下：

*{

margin: 0;

padding: 0;

}

body{

overflow-y: auto;

}

ul{

margin-top: 20px;

border-top: 1px solid #666;

}

h1{

width: 500px;

margin: 0 auto;

color: deeppink;

height: 100px;

line-height: 100px;

}

li{

list-style: none;

padding: 15px 0px 15px 60px;

border-bottom:1px solid #ccc;

font-size: 0px;

line-height: 30px;

/*height: 60px;*/

}

input[type=button],li strong,li em,li span,li div{

height: 30px;

font-size: 20px;

line-height: 30px;

text-align: center;

}

input[type=button],li strong

{

width: 60px;

}

li span,li em{

width: 80px;

background: pink;

}

li div{

width: 100px;

}

li strong,li span,li em,li div{

display: inline-block;

}

window.οnlοad=function(){

var oUl=document.getElementById('list');

var aLi=oUl.getElementsByTagName('li');

for(var i=0;i

fn1(aLi[i]);

}

function fn1(aLi){

var aBtn=aLi.getElementsByTagName('input');

var aStrong=aLi.getElementsByTagName('strong')[0];

var aEm=aLi.getElementsByTagName('em')[0];

var aSpan=aLi.getElementsByTagName('span')[0];

var num=Number(aStrong.innerHTML); //aStrong.innerHTML='0'

var price=parseFloat(aEm.innerHTML);//aEm.innerHTML='12.9元'

aBtn[0].οnclick=function(){

if(num>0)

{

num--;

aStrong.innerHTML=num;

aSpan.innerHTML=(num*price).toFixed(1)+'元'

}

}

aBtn[1].οnclick=function(){

num++;

aStrong.innerHTML=num;

aSpan.innerHTML=(num*price).toFixed(1)+'元'

}

}

}

点点看，仿购物车+ -效果

• 0

  单价:
  12.9元
  共计：
  0

• 0

  单价:
  45.7元
  共计：
  0

• 0

  单价:
  67.5元
  共计：
  0

• 0

  单价:
  14.7元
  共计：
  0

• 0

  单价:
  45.6元
  共计：
  0

• 0

  单价:
  32.4元
  共计：
  0

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！