购物车加减按钮

做了一个简单的购物车加减按钮部分。

HTML：

<ul class="counter">
 <li id="minus"><input type="button" onclick="minuser()" value="-"/></li>
 <li id="countnum">0</li>
 <li id="plus"><input type="button" onclick="adder()" value="+"/></li>
</ul>

css（主要是去除按钮默认样式，赋予新样式）：

ul,li{margin:0; padding:0; }
.counter li{float:left; list-style-type:none; width:30px; height:30px; text-align:center; line-height:30px; border:#999 thin solid; background-color:#fff}
.counter li input{font-size:20px; width:100%; height:100%; outline:none; -webkit-appearance:none; background:none; margin:0; padding:0; border: 1px solid transparent; border-radius: 0;}
#countnum{ border-left:hidden; border-right:hidden; color:#666}

JavaScript：

function adder(){
    var count=document.getElementById("countnum").innerHTML;
    count=parseInt(count)+1;
    document.getElementById("countnum").innerHTML=count;
}
function minuser(){
    var count=document.getElementById("countnum").innerHTML;
    if(count<=0){
        count=0;
    }else{
        count=parseInt(count)-1;
    }    
    document.getElementById("countnum").innerHTML=count;
}

jQuery：

function adder(){
    var count=$("#countnum").text();
    count=parseInt(count)+1;
    $("#countnum").text(count);
}
function minuser(){
    var count=$("#countnum").text();
    if(count<=0){
        count=0;
    }else{
        count=parseInt(count)-1;
    }    
    $("#countnum").text(count);
}

猜你喜欢