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>