JS

效果:

代码:

<%@ 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;
            26px;
            height:26px;
            background-color:#ededed;
            color:#666;
            font-weight:bolder;
            font-size:18px;
            text-decoration:none;
        }
        #Number {
            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>

  

  

原文地址:https://www.cnblogs.com/KTblog/p/4760075.html