jQuery做的购买数量好东西

开发 前端
昨晚在群里看它们聊类似于这东东的玩意,与是就花点时间搞了个,还凑合着吧。代码就是这些了,JQ做滴,用JS也可以,不过麻烦,再说叨叨自从用了JQ后就特别懒了,不想用JS了。

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

先看下效果图:
 

1.png 

起始

2.png 

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

3.png 

输入正确时提示

4.png 

当输入非整数时,提示

不啰嗦了,上代码吧:

#p#

HTML:

  1. <div id="box_wrapper"> 
  2.     <div id="box"> 
  3.         <span class="mark">请输入购买数量:</span> 
  4.         <div class="num_wrap"><input name="txtNum" value="0" type="text" id="txtNum" /></div> 
  5.         <div class="arrow_wrap"> 
  6.             <a href="javascript:void(0)" class="addOne"></a> 
  7.             <a href="javascript:void(0)" class="jianOne"></a> 
  8.         </div> 
  9.         <span class="mark_tip">*请输入购买数量</span> 
  10.     </div> 
  11. </div> 

CSS:

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

JS:

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

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

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

【编辑推荐】

责任编辑:张伟 来源: 前端学院
相关推荐

2019-12-10 10:03:18

Linux命令行工具

2010-03-18 17:43:16

云计算

2020-07-30 14:20:16

操作系统

2018-09-06 09:41:29

人工智能AI

2021-12-26 14:20:13

5G星链网络

2012-04-25 10:18:49

jQuery

2022-10-21 09:23:31

脑累计算深度学习

2011-07-25 17:01:43

虚拟化服务器

2011-07-25 10:47:40

虚拟化服务器

2019-04-09 10:57:19

JDKJDK8Oracle

2022-04-28 23:19:58

元宇宙NFT数字资产

2021-05-20 15:03:22

Google Play支付应用程序

2011-08-24 10:43:35

2010-02-26 09:29:15

2011-03-28 16:14:38

jQuery

2023-12-25 19:09:59

PipeWire

2009-08-17 18:31:39

C# 枚举

2016-11-03 13:35:00

云产品购买攻略双十一

2015-07-17 18:59:08

无线音箱

2009-06-15 15:37:24

网管软件购买摩卡
点赞
收藏

51CTO技术栈公众号