jQuery做的购买数量好东西

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

先看下效果图：

起始

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

输入正确时提示

当输入非整数时，提示

不铝耍洗氚桑

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>