zoukankan      html  css  js  c++  java
  • 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>
    

      

      

  • 相关阅读:
    Count and Say leetcode
    Find Minimum in Rotated Sorted Array II leetcode
    Find Minimum in Rotated Sorted Array leetcode
    Search in Rotated Sorted Array II leetcode
    search in rotated sorted array leetcode
    Substring with Concatenation of All Words
    Subsets 子集系列问题 leetcode
    Sudoku Solver Backtracking
    Valid Sudoku leetcode
    《如何求解问题》-现代启发式方法
  • 原文地址:https://www.cnblogs.com/KTblog/p/4760075.html
Copyright © 2011-2022 走看看