效果：

代码：

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="Shop.Test" %>
  2.  
  3. <!DOCTYPE html>
  4.  
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head runat="server">
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  8.     <title></title>
  9.     <script src="js/jquery-1.8.3.min.js"></script>
  10.  
  11.     <!---------------------------------CSS样式------------------------------------>
  12.     <style type ="text/css">
  13.         #ADD, #Subtrct {
  14.             float:left;
  15.             border:1px solid #ccc;
  16.             line-height:26px;
  17.             margin:0px;
  18.             padding:0px;
  19.             text-align:center;
  20.             display:inline-block;
  21.             width:26px;
  22.             height:26px;
  23.             background-color:#ededed;
  24.             color:#666;
  25.             font-weight:bolder;
  26.             font-size:18px;
  27.             text-decoration:none;
  28.         }
  29.         #Number {
  30.             width:48px;
  31.             height:26px;
  32.             padding:0px;
  33.             float:left;
  34.             font-size:16px;
  35.             line-height:26px;
  36.             text-align:center;
  37.             color:#666;
  38.             border:1px solid #ccc;
  39.             border-left:none;border-right:none;
  40.             outline:0px;
  41.             background-color:#fff;
  42.         }
  43.     </style>
  44.     <!-------------------------------------------------------------------------->
  45.  
  46.     <!------------------------------JavaScript脚本------------------------------>
  47.     <script type ="text/javascript">
  48.         $(document).ready(function () {
  49.             var n = parseInt($("#Number").val());
  50.             //等于1的时候，设置减号颜色变淡
  51.             if ( n== 1) {
  52.                 $("#Subtrct").css({color:"#ccc"});
  53.             }
  54.             //点击加号，改变文本框中的值，并设置减号为可使用，且颜色加深。
  55.             $("#ADD").click(function () {
  56.                 n += 1;
  57.                 $("#Subtrct").css({ cursor: "pointer", color: "#666" });//变为可点击
  58.                 $("#Number").val(n);
  59.             });
  60.             //点击减号，改变文本框中的值
  61.             //如果文本卡框的值为1，则设置减号为不可使用，且颜色变淡。
  62.             $("#Subtrct").click(function () {
  63.                 if (n == 1) {
  64.                     $("#Subtrct").css({ cursor: "not-allowed", color: "#ccc" });//变为不可点击
  65.                 }
  66.                 if (n > 1) {
  67.                     n -= 1;
  68.                     $("#Number").val(n);
  69.                 }
  70.             });
  71.             //光标经过时，如果文本卡框的值为1，则减号不可点击。
  72.             $("#Subtrct").hover(function () {
  73.                 if (n == 1) {
  74.                     $("#Subtrct").css({ cursor: "not-allowed" });
  75.                 }
  76.             })
  77.         });
  78.     </script>
  79.     <!-------------------------------------------------------------------------->
  80.  
  81. </head>
  82. <body>
  83.     <form id="form1" runat="server">
  84.  
  85.         <!--------------------------前台样式------------------------------------>
  86.         <span>
  87. 　　　　　　　<!--使用 “####” ，防止点击之后，页面返回最顶端-->
  88.             <a href="####" id ="ADD">+</a>
  89.             <input id="Number" readonly ="true" type="text" value ="1"/>
  90.             <a href="####" id ="Subtrct">-</a>
  91.         </span>
  92.         <!--------------------------------------------- ------------------------>
  93.  
  94.     </form>
  95. </body>
  96. </html>

　　

　　

JS - 点击 “+” 、“-” 改变数字的更多相关文章

  1. Js 通过点击改变css样式

    通过js 点击按钮去改变目标原始的背景颜色 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ...

  2. js如何实现动态点击改变单元格颜色？

    js如何实现动态点击改变单元格颜色? 一.总结 1.通过table的rows属性,遍历表格所有行,然后通过cells属性,遍历每一行中的单元格. 2.遍历的过程中,动态的为每一个单元格定义单击事件,改 ...

  3. 一款基于jquery的下拉点击改变背景图片

    今天给大家介绍一款基于jquery的下拉点击改变背景图片.单击右上角的图片,下拉显示可选择的背景图片,单击图片变为背景图.效果图下: 在线预览   源码下载 实现的代码. html代码: <a ...

  4. Js点击触发Css3的动画Animations、过渡Transitions效果

    关键是首先指定动画效果的CSS属性名称,然后在Js中改变这个属性 如果不使用Js触发,可以选择利用css的状态:hover,focus,active 来触发,也可以一开始就触发 下例为Js点击触发过渡 ...

  5. js字符串转换成数字与数字转换成字符串的实现方法

    转载:点击查看地址 js字符串转换成数字 将字符串转换成数字,得用到parseInt函数.parseInt(string) : 函数从string的开始解析,返回一个整数. 举例:parseInt(' ...

  6. html js点击按钮滚动跳转定位到页面指定位置（DIV）的方法代码

    一:通过html锚点实现滚动定位到页面指定位置(DIV):    如果我们要点击实现跳转的地方是一个html锚点,也就是点击一个A标签超链接实现跳转,可以把A标签的href属性直接指向跳转指定位置的d ...

  7. js中关于带数字类型参数传参丢失首位数字0问题

    最近在项目中遇到一个问题,js中传带有数字的参数时,如果参数开头有数字0,会把0给去掉. 例如: 方法abc(0123456,789); 方法abc中获取的参数0123456就会变为123456. 原 ...

  8. JS点击显示隐藏内容

    JS点击显示隐藏密码 思路:获取元素,判断点击,如果DIV显示就隐藏,如果DIV隐藏就显示出来. 1 if(DIV是显示的){ 2 div.style.display='none'; 3 } 4 el ...

  9. JS验证只能输入数字，数字和字母等的正则表达式

    JS判断只能是数字和小数点 0.不能输入中文1)<input onpaste="return false;" type="text" name=" ...

  10. js判断只能输入数字和只能输入

    JS判断只能是数字和小数点 1.文本框只能输入数字代码(小数点也不能输入) <input onkeyup="this.value=this.value.replace(/\D/g,'' ...

随机推荐

  1. partial_sort_百度百科

    partial_sort_百度百科 partial_sort

  2. 构件图（Component Diagram）—UML图（八）

    构件图是显示代码自身结构的实现级别的图表.构件图由诸如源码文件.二进制代码文件.可运行文件或动态链接库 (DLL) 这种构件构成,并通过依赖关系相连接 以下这张图介绍了构件图的基本内容: 以下这张图是 ...

  3. Android 实现在线程中联网

    其实我们要牢记的是,对数据流的操作都是阻塞的,在一般情况下,我们是不需要考虑这个问题的,但是在Android 实现联网的时候,我们必须考虑到这个问题.比如:从网络上下载一张图片: Java代码: pu ...

  4. Lua学习笔记6：C++和Lua的相互调用

        曾经一直用C++写代码.话说近期刚换工作.项目组中的是cocos2dx-lua,各种被虐的非常慘啊有木有.     新建cocos2dx-lua项目.打开class能够发现,事实上就是C++项 ...

  5. QTP实践总结

    QTP实践总结 查询数据库修改freq 1.Testcasetable创建查询select * from testcasetable order by fseq desc 2.设计表-选项-修改自动递 ...

  6. 原生app与web app的比较

    http://www.2ee9.com/news/news_show_36_237.html http://zhidao.baidu.com/link?url=7lWq2tgqiMiDmsRd54hO ...

  7. ant 关键字和关键语句

    学习ant推荐的两个blog http://www.cnblogs.com/huozhicheng/archive/2010/04/08/2533199.htmlhttp://www.cnblogs. ...

  8. 基于visual Studio2013解决C语言竞赛题之0906文件插入

       题目

  9. Swift - 网络请求报App Transport Security has blocked a cleartext错

    使用Xcode7编写iOS9应用时,如果获取http://数据时会报如下错误: App Transport Security has blocked a cleartext HTTP (http:// ...

  10. WS_EX_TOOLWINDOW 属性的陷阱

    WS_EX_TOOLWINDOW,带有这个属性的窗口有以下特点: 1. 不在任务栏显示. 2. 不显示在Alt+Tab的切换列表中. 3. 在任务管理器的窗口管理Tab中不显示. 我们可能会出于某种目 ...