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; 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>
posted on 2015-08-26 12:56 ultrastrong 阅读(610) 评论(0) 编辑 收藏 举报