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;
  
  }
  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;
  }
 
 
 
 
 点点看，仿购物车+ -效果
 

  

  
  0
  
  单价:12.9元
  共计：0
  
  

  
  0
  
  单价:45.7元
  共计：0
  
  

  
  0
  
  单价:67.5元
  共计：0
  

  

  
  0
  
  单价:14.7元
  共计：0
  
  

  
  0
  
  单价:45.6元
  共计：0
  
  

  
  0
  
  单价:32.4元
  共计：0
  
 
 

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