效果：
代码：
<%@ 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>
时间： 2024-10-12 10:03:36