效果：

代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="Shop.Test" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script src="js/jquery-1.8.3.min.js"></script>

    <!---------------------------------CSS样式------------------------------------>

    <style type ="text/css">

        #ADD, #Subtrct {

            float:left;

            border:1px solid #ccc;

            line-height:26px;

            margin:0px;

            padding:0px;

            text-align:center;

            display:inline-block;

            width:26px;

            height:26px;

            background-color:#ededed;

            color:#666;

            font-weight:bolder;

            font-size:18px;

            text-decoration:none;

        }

        #Number {

            width:48px;

            height:26px;

            padding:0px;

            float:left;

            font-size:16px;

            line-height:26px;

            text-align:center;

            color:#666;

            border:1px solid #ccc;

            border-left:none;border-right:none;

            outline:0px;

            background-color:#fff;

        }

    </style>

    <!-------------------------------------------------------------------------->

    <!------------------------------JavaScript脚本------------------------------>

    <script type ="text/javascript">

        $(document).ready(function () {

            var n = parseInt($("#Number").val());

            //等于1的时候，设置减号颜色变淡

            if ( n== 1) {

                $("#Subtrct").css({color:"#ccc"});

            }

            //点击加号，改变文本框中的值，并设置减号为可使用，且颜色加深。

            $("#ADD").click(function () {

                n += 1;

                $("#Subtrct").css({ cursor: "pointer", color: "#666" });//变为可点击

                $("#Number").val(n);

            });

            //点击减号，改变文本框中的值

            //如果文本卡框的值为1，则设置减号为不可使用，且颜色变淡。

            $("#Subtrct").click(function () {

                if (n == 1) {

                    $("#Subtrct").css({ cursor: "not-allowed", color: "#ccc" });//变为不可点击

                }

                if (n > 1) {

                    n -= 1;

                    $("#Number").val(n);

                }

            });

            //光标经过时，如果文本卡框的值为1，则减号不可点击。

            $("#Subtrct").hover(function () {

                if (n == 1) {

                    $("#Subtrct").css({ cursor: "not-allowed" });

                }

            })

        });

    </script>

    <!-------------------------------------------------------------------------->

</head>

<body>

    <form id="form1" runat="server">

        <!--------------------------前台样式------------------------------------>

        <span>

　　　　　　　<!--使用 “####” ，防止点击之后，页面返回最顶端-->

            <a href="####" id ="ADD">+</a>

            <input id="Number" readonly ="true" type="text" value ="1"/>

            <a href="####" id ="Subtrct">-</a>

        </span>

        <!--------------------------------------------- ------------------------>

    </form>

</body>

</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. pojg2744找一个最长的字符串x，使得对于已经给出的字符串中的任意一个y，x或者是y的子串，或者x中的字符反序之后得到的新字符串是y的子串。

    http://poj.grids.cn/practice/2744 描述现在有一些由英文字符组成的大小写敏感的字符串,你的任务是找到一个最长的字符串x,使得对于已经给出的字符串中的任意一个y,x或者是 ...

  2. JavaScript自调用匿名函数

    Self-Invoking Anonymous Function,即自调用匿名函数.顾名思义,该函数没有名称,不同的是,该函数定义后立即被调用.该函数的作用是在应用中初始化或做一次性工作. 普通匿名函 ...

  3. CSS基础3——使用CSS格式化元素内容的字体

    1.CSS属性单位: (1)长度单位:包含绝对长度单位和相对长度单位 绝对长度单位包含:cm.mm.in.pt.pc等. 绝对长度单位最好用于打印输出设备.在仅作为频幕显示时.绝对长度值并没有什么意义 ...

  4. 数据挖掘算法学习（三）NaiveBayes算法

    算法简单介绍 NBC是应用最广的分类算法之中的一个.朴素贝叶斯模型发源于古典数学理论,有着坚实的数学基础,以及稳定的分类效率.同一时候,NBC模型所需预计的參数非常少,对缺失数据不太敏感,算法也比較简 ...

  5. NanShan即时通讯论——HTML5的优势与劣势

    原文:NanShan即时通讯论--HTML5的优势与劣势 NanShan即时通讯 学习html时才是XHTML 1.0,接着是 HTML4.01,再到HTML5,如今HTML5 開始吸引越来越多的人的 ...

  6. NYOJ-开灯问题

    开灯问题 时间限制:3000 ms  |  内存限制:65535 KB 难度: 描写叙述 有n盏灯,编号为1~n.第1个人把全部灯打开,第2个人按下全部编号为2 的倍数的开关(这些灯将被关掉),第3  ...

  7. 用U盘与移动硬盘制作WIN7启动盘（亲自实践）

    昨晚帮一个娃娃用移动硬盘里面的一个分区帮他制作成一个win7系统盘,为了以后万一换系统的时候方便.我自己有一个U盘坐的启动盘,移动硬盘没有倒腾过,看网上N多都是相互抄,制作都是WINPE系统的,相当蛋 ...

  8. 一天一个类，一点也不累之TreeSet

    一天一个类,一点也不累. 现在要说的是---TreeSet public class TreeSet<E> extends AbstractSet<E> implements ...

  9. UIView详解1

    一个UIView的实例就是一个视图,表示的是屏幕上的一块矩形区域,负责这块矩形区域的描绘以及和用户的交互. 第一.UIView的可视化属性 1. backgroundColor  背景属性 2. hi ...

  10. HDU 4160 Dolls （最小路径覆盖=顶点数-最大匹配数）

    Dolls Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submiss ...