jQuery做的购买数量好东西-jquery购物车数量加减

昨晚在群里看它们聊类似于这东东的玩意，与是就花点时间搞了个，还凑合着吧

先看下效果图：

起始

当为0时，再点击减就会提示

输入正确时提示

当输入非整数时，提示

不啰嗦了，上代码吧：

#p#

HTML：

<div id="box_wrapper"> 
    <div id="box"> 
        <span class="mark">请输入购买数量：</span> 
        <div class="num_wrap"><input name="txtNum" value="0" type="text" id="txtNum" /></div> 
        <div class="arrow_wrap"> 
            <a href="javascript:void(0)" class="addOne"></a> 
            <a href="javascript:void(0)" class="jianOne"></a> 
        </div> 
        <span class="mark_tip">*请输入购买数量</span> 
    </div> 
</div>

CSS：

<style type="text/css">  
* {margin:0;padding:0}  
body {font-size:12px;font-family:SimSun;background:#FFF;color:#666}   
#box_wrapper {width:500px;margin:100px auto}  
#box {width:450px;height:28px}  
.num_wrap {width:100px;height:25px;overflow:hidden;float:left;border:1px solid #CCC;border-right:none;}  
#txtNum {width:100px;height:22px;padding-top:3px;border:none;text-align:center;vertical-align:middle}  
.arrow_wrap {background:url(arrowa.gif) no-repeat center 2px;height:25px;width:30px;border:1px solid #CCC;float:left;position:relative}  
.addOne {position:absolute;left:8px;top:0px;width:14px;height:11px}  
.jianOne {position:absolute;left:8px;top:13px;width:14px;height:11px}  
.mark {float:left;padding:7px 0 0 0}  
.mark_tip {float:left;color:#0033FF;padding:7px 0 0 20px}  
</style>

JS：

<script type="text/javascript" src="jquery-1.7.1.min.js"></script>  
<script type="text/javascript">  
$(document).ready(function(){  
var curVal = $("#txtNum");  
var temp; //得到文本框当前的数据  
var tipMsg = $(".mark_tip"); //提示信息  
$(".addOne").click(function(){  
    temp = curVal.val()  
    if(temp<=0){  
        tipMsg.text("亲，当前购买数量已经为0了 *_*").css("color","#F30")  
        return false;  
    }  
    if(testNum(temp)){  
         curVal.val(--temp); //数量减1  
    }else{  
        curVal.val(0)  
}  
});  
$(".jianOne").click(function(){  
    temp = curVal.val()  
    if(testNum(temp)){  
        curVal.val(++temp); //数量加1  
 
    }else{  
        curVal.val(0)  
    }  
});  
doDashed();  
//得到购买数量，并判断是否是正确格式  
function testNum(tempNum){  
    if(/^[0-9]+$/.test(tempNum)){  
        tipMsg.text("亲，输入正确哦 *_*").css("color","#03F")  
        return true;  
    }  
    tipMsg.text("亲，你输入的不是正确数字啦 ^_^").css("color","#F30")  
    return false;  
}  
});  
//处理点击链接时的虚线框  
function doDashed(){  
    $('a').focus(function(){  
        if(this.blur){  
             this.blur();  
         }  
    });  
}   
</script>

代码就是这些了，JQ做滴，用JS也可以，不过麻烦，再说叨叨自从用了JQ后就特别懒了，不想用JS了。

附上下载原件吧： DEMO.rar (32.92 KB)

【编辑推荐】