jQuery做的購買數(shù)量好東西
昨晚在群里看它們聊類似于這東東的玩意，與是就花點(diǎn)時(shí)間搞了個(gè)，還湊合著吧
十年的金華網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。成都全網(wǎng)營銷的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整金華建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)從事“金華網(wǎng)站設(shè)計(jì)”,“金華網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。
先看下效果圖：
起始
當(dāng)為0時(shí)，再點(diǎn)擊 減 就會(huì)提示
輸入正確時(shí)提示
當(dāng)輸入非整數(shù)時(shí)，提示
不啰嗦了，上代碼吧：
#p#
HTML：
-
-
- 請(qǐng)輸入購買數(shù)量：
-
*請(qǐng)輸入購買數(shù)量
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}
-
JS：
-
-
- $(document).ready(function(){
- var curVal = $("#txtNum");
- var temp; //得到文本框當(dāng)前的數(shù)據(jù)
- var tipMsg = $(".mark_tip"); //提示信息
- $(".addOne").click(function(){
- temp = curVal.val()
- if(temp<=0){
- tipMsg.text("親，當(dāng)前購買數(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;
- }
- });
- //處理點(diǎn)擊鏈接時(shí)的虛線框
- function doDashed(){
- $('a').focus(function(){
- if(this.blur){
- this.blur();
- }
- });
- }
-
代碼就是這些了，JQ做滴，用JS也可以，不過麻煩，再說叨叨自從用了JQ后就特別懶了，不想用JS了。
附上下載原件吧： DEMO.rar (32.92 KB)
【編輯推薦】
- jQuery旋轉(zhuǎn)輪播式插件 CarouFredSel
- jQuery:讓文盲秀網(wǎng)頁
- 10個(gè)基于jQuery的Web交互插件
- jQuery--聯(lián)動(dòng)日歷
- jQuery圖片延遲加載技術(shù)的應(yīng)用
分享名稱：jQuery做的購買數(shù)量好東西
轉(zhuǎn)載來于：
http://uogjgqi.cn/article/cdphpch.html
