jQuery做的购买数量好东西

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

十年的金华网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。成都全网营销的优势是能够根据用户设备显示端的尺寸不同，自动调整金华建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。成都创新互联从事“金华网站设计”,“金华网站推广”以来，每个客户项目都认真落实执行。

先看下效果图：

起始

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

输入正确时提示

当输入非整数时，提示

不啰嗦了，上代码吧：

#p#

HTML：

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.      
    3.   
  
  
  
  3.         请输入购买数量： 
    4.   
  
  
  
  4.         
 
  •          
  •              
  •              
  •         
    •  
  •         *请输入购买数量 
  •     
    •  
  •  

    • CSS：

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

    JS：

     
 
 
 
        
  
  
  
    1.   
      2.   
  
  
  
    2.   
      3.   
  
  
  
    3. $(document).ready(function(){  
      4.   
  
  
  
    4. var curVal = $("#txtNum");  
      5.   
  
  
  
    5. var temp; //得到文本框当前的数据  
      6.   
  
  
  
    6. var tipMsg = $(".mark_tip"); //提示信息  
      7.   
  
  
  
    7. $(".addOne").click(function(){  
      8.   
  
  
  
    8.     temp = curVal.val()  
      9.   
  
  
  
    9.     if(temp<=0){  
      10.   
  
  
  
    10.         tipMsg.text("亲，当前购买数量已经为0了 *_*").css("color","#F30")  
      11.   
  
  
  
    11.         return false;  
      12.   
  
  
  
    12.     }  
      13.   
  
  
  
    13.     if(testNum(temp)){  
      14.   
  
  
  
    14.          curVal.val(--temp); //数量减1  
      15.   
  
  
  
    15.     }else{  
      16.   
  
  
  
    16.         curVal.val(0)  
      17.   
  
  
  
    17. }  
      18.   
  
  
  
    18. });  
      19.   
  
  
  
    19. $(".jianOne").click(function(){  
      20.   
  
  
  
    20.     temp = curVal.val()  
      21.   
  
  
  
    21.     if(testNum(temp)){  
      22.   
  
  
  
    22.         curVal.val(++temp); //数量加1  
      23.   
  
  
  
    23.  
      24.   
  
  
  
    24.     }else{  
      25.   
  
  
  
    25.         curVal.val(0)  
      26.   
  
  
  
    26.     }  
      27.   
  
  
  
    27. });  
      28.   
  
  
  
    28. doDashed();  
      29.   
  
  
  
    29. //得到购买数量，并判断是否是正确格式  
      30.   
  
  
  
    30. function testNum(tempNum){  
      31.   
  
  
  
    31.     if(/^[0-9]+$/.test(tempNum)){  
      32.   
  
  
  
    32.         tipMsg.text("亲，输入正确哦 *_*").css("color","#03F")  
      33.   
  
  
  
    33.         return true;  
      34.   
  
  
  
    34.     }  
      35.   
  
  
  
    35.     tipMsg.text("亲，你输入的不是正确数字啦 ^_^").css("color","#F30")  
      36.   
  
  
  
    36.     return false;  
      37.   
  
  
  
    37. }  
      38.   
  
  
  
    38. });  
      39.   
  
  
  
    39. //处理点击链接时的虚线框  
      40.   
  
  
  
    40. function doDashed(){  
      41.   
  
  
  
    41.     $('a').focus(function(){  
      42.   
  
  
  
    42.         if(this.blur){  
      43.   
  
  
  
    43.              this.blur();  
      44.   
  
  
  
    44.          }  
      45.   
  
  
  
    45.     });  
      46.   
  
  
  
    46. }   
      47.   
  
  
  
    47.  
      48.

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

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

    【编辑推荐】

    1. jQuery旋转轮播式插件 CarouFredSel
    2. jQuery:让文盲秀网页
    3. 10个基于jQuery的Web交互插件
    4. jQuery--联动日历
    5. jQuery图片延迟加载技术的应用

    名称栏目：jQuery做的购买数量好东西
    网址分享：http://www.hantingmc.com/qtweb/news29/492829.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    品牌网站建设知识

    行业网站建设

    成都关键词SEO优化　　 　成都网站建设　　 　成都全屋定制　　 　圣月阀门　　 　成都学生服定制　　 　成都翻译公司　　 　广安网站设计　　 　seo优化排名　　 　微信小程序开发　　 　全网品牌营销　　 　绵阳网站制作　　 　成都网络营销公司　　 　西信中心　　 　蓬安网站建设　　 　成都托管服务器　　 　手机网站制作　　 　西部信息服务器托管　　 　网站排名　　 　成都免费网站建设公司　　 　一带一路