【页面】数字加减

效果： 

样式：

<style>
        .gw_num{
            border: 1px solid #dbdbdb;
            width: 110px;line-height: 35px;
            overflow: hidden;
        }
        .gw_num em{display: block;
            height: 35px;
            width: 31px;
            float: left;
            color: #7A7979;
            border-right: 1px solid #dbdbdb;
            text-align: center;
            cursor: pointer;
            font-style:normal;
        }
        .gw_num .num{display: block;
            float: left;
            text-align: center;
            width: 42px;
            font-style: normal;
            font-size: 14px;
            line-height: 35px;
            border: 0;
        }
        .gw_num em.add{
            float: right;
            border-right: 0;
            border-left: 1px solid #dbdbdb;
        }
    </style>

html:

<div class="gw_num">
    <em class="jian">-</em>
    <input type="text" value="5" class="num" />
    <em class="add">+</em>
</div>

 js:

<script>
    //加
    $(".add").click(function(){
        var n=$(this).prev().val();
        var num=parseInt(n)+1;
        if(num>20){ return;}
        $(this).prev().val(num);
    });
    //减
    $(".jian").click(function(){
        var n=$(this).next().val();
        var num=parseInt(n)-1;
        if(num<1){ return;}
        $(this).next().val(num);
    });
</script>