昨晚在群里看它們聊類似于這東東的玩意，與是就花點時間搞了個，還湊合著吧

先看下效果圖：
 

起始

當為0時，再點擊 減 就會提示

輸入正確時提示

當輸入非整數(shù)時，提示

不啰嗦了，上代碼吧：

#p#

HTML：

<div id="box_wrapper"> 
    <div id="box"> 
        <span class="mark">請輸入購買數(shù)量：</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">*請輸入購買數(shù)量</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; //得到文本框當前的數(shù)據(jù)  
var tipMsg = $(".mark_tip"); //提示信息  
$(".addOne").click(function(){  
    temp = curVal.val()  
    if(temp<=0){  
        tipMsg.text("親，當前購買數(shù)量已經(jīng)為0了 *_*").css("color","#F30")  
        return false;  
    }  
    if(testNum(temp)){  
         curVal.val(--temp); //數(shù)量減1  
    }else{  
        curVal.val(0)  
}  
});  
$(".jianOne").click(function(){  
    temp = curVal.val()  
    if(testNum(temp)){  
        curVal.val(++temp); //數(shù)量加1  
 
    }else{  
        curVal.val(0)  
    }  
});  
doDashed();  
//得到購買數(shù)量，并判斷是否是正確格式  
function testNum(tempNum){  
    if(/^[0-9]+$/.test(tempNum)){  
        tipMsg.text("親，輸入正確哦 *_*").css("color","#03F")  
        return true;  
    }  
    tipMsg.text("親，你輸入的不是正確數(shù)字啦 ^_^").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)

【編輯推薦】

1. jQuery旋轉(zhuǎn)輪播式插件 CarouFredSel
2. jQuery:讓文盲秀網(wǎng)頁
3. 10個基于jQuery的Web交互插件
4. jQuery--聯(lián)動日歷
5. jQuery圖片延遲加載技術(shù)的應用