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>
    

      

      

  • 相关阅读:
    非线性方程(组):高维方程解法
    非线性方程(组):一维非线性方程(二)插值迭代方法 [MATLAB]
    非线性方程(组):一维非线性方程(一)二分法、不动点迭代、牛顿法 [MATLAB]
    非线性方程(组):计算基本理论
    常微分方程初值问题:多步预测-修正方法 [MATLAB]
    你会使用super()吗?你确定你了解它吗?
    Django简介
    Web框架的原理
    Django ORM 中的批量操作
    Python的切片
  • 原文地址:https://www.cnblogs.com/KTblog/p/4760075.html
Copyright © 2011-2022 走看看