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>
    

      

      

  • 相关阅读:
    Android_1_渐变背景色
    js 数组常用方法说明
    js模拟键盘按键事件
    SqlServer中截取字符串
    SqlServer将日期格式DateTime转换成varchar类型
    如何经营好(开好)一家淘宝店铺
    如何才能学好javascript
    前端常用的正则表达式
    淘宝中的一些基本CSS代码
    CSS样式中伪类和伪类元素的区别(css中一个冒号和两个冒号的区别)
  • 原文地址:https://www.cnblogs.com/KTblog/p/4760075.html
Copyright © 2011-2022 走看看