javascript实现购物车加减

最新推荐文章于 2022-12-06 23:40:58 发布

原创最新推荐文章于 2022-12-06 23:40:58 发布 · 6.9k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html

本文介绍了一个简单的购物车商品数量增减功能的实现方式，通过HTML、CSS和JavaScript完成按钮点击事件处理，更新商品数量显示，并限制了数量范围。

<!DOCTYPE html>
<html>
<head>
<title>购物车加减</title>
<meta charset="utf-8">
<style type="text/css">

      div{
      height: 30px;
      }
  input{
   width: 50px;
   height:32px;
   background: white;
   border:1px solid #CCC;
   float: left;
  }

  span{
   width: 100px;
   height: 30px;
   text-align: center;
   display:inline-block;
   border:1px solid #CCC;
   line-height: 30px;
   float: left;
  }
</style>
</head>
<body>
<div>
  <input type="button" value="-" onclick="less()">
<span>1</span>
<input type="button" value="+" onclick="add()">
</div>

</body>
<script type="text/javascript">
var span=document.getElementsByTagName('span');
var num=parseInt(span[0].innerHTML);
function less(){
  if (num==1) return;
  num--;
  span[0].innerHTML=num;
}
function add(){
  if(num>=100)return;
  num++;
  span[0].innerHTML=num;
}
</script>
</html>