用JS做购物车的计数器

第一步：写好html框架

            <div class="bigBox">

                  <button id="minus">-

                   <span type="text">0

                   <button id="add">+

            </div>

第二步：给框架添加样式

     //使div里面的东西全部处于一行  

    div{

               float:left;

       }

 //给减号按钮设置宽高、字体大小、文本居中、定位

#minus{

       width:30px;

        height:30px;

        font-size:32px;

        line-height:20px;

        text-align:center;

        position:absolute;

        top:20px;

        left:20px;

    }

//给加号按钮设置宽高、字体大小、文本居中、定位

#add{

        width:30px;

        height:30px;

        font-size:32px;

        line-height:20px;

        text-align:center;

        position:absolute;

        top:20px;

        left:104px;

    }

//给数字框设置宽高、字体大小、文本居中、定位

span{

        float:left;

        width:55px;

        height:28px;

        text-align:center;

        border:1px solid #000;

        font-size:20px;

        position:absolute;

        top:20px;

        left:50px;

    }

第三步：编写js

//定义函数

    var oMinus=document.getElementById('minus');

    var oInp=document.getElementsByTagName('span');

    var oAdd=document.getElementById('add');

    var num=parseInt(oInp[0].innerHTML);

//给减号设置点击事件

    oMinus.onclick=function () {

     if (num==0) return;

        num--;

        oInp[0].innerHTML=num;

      };

//给加号设置点击事件

    oAdd.onclick=function () {

    if(num>=100) return;

        num++;

        oInp[0].innerHTML=num;

       }

    </script>