点击按钮实现文本框数字增加或者减少代码实例
HTML5已经提供了这样的控件，但是外观实在不怎么美观，免费的东西通常不够完美。
关于HTML5提供的控件可以参阅<input type="number" >用法简单介绍一章节。
下面介绍一下如何使用javascript实现此功能。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
.item-amount {
width: 110px;
height: 30px;
overflow: hidden;
position: relative;
z-index: 1;
}
.item-amount a {
display: block;
height: 28px;
width: 30px;
border: 1px solid #ccc;
background: #f0f0f0;
text-align: center;
text-decoration: none;
line-height: 28px;
color: #444;
position: absolute;
top: 0;
}
.item-amount .minus,.item-amount .no-minus {
border-radius: 5px 0 0 5px;
left: 0;
}
.item-amount .plus,.item-amount .no-plus {
border-radius: 0 5px 5px 0;
right: 0;
}
.item-amount .no-minus,.item-amount .no-plus {
color: #EAEAEA;
border-color: #EAEAEA;
background-color: #F7F6F6;
}
.item-amount .minus:hover, .item-amount .plus:hover {
border-color: #acacac;
background-color: #eaeaea;
}
.item-amount .no-minus:hover, .item-amount .no-plus:hover {
color: #EAEAEA;
border-color: #EAEAEA;
background-color: #F7F6F6;
cursor: default;
}
.text-amount {
width: 46px;
height: 26px;
line-height: 30px;
border-width: 1px 0;
border-style: solid;
border-color: #ccc;
text-align: center;
background-color: #fff;
position: absolute;
z-index: 2;
left: 32px;
top: 0;
font-size:12px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(document).ready(function () {
$(".item-amount a").click(function () {
var count = $(this).attr("data");
$("#itemAmount").val(function () {
var value = $(this).val();
count == "-" ? value-- : value++;
if (value > 1) {
$(".item-amount .minus").removeClass("no-minus");
return value;
}else if (value = 1) {
$(".item-amount .minus").addClass("no-minus");
var value = 1;
return value;
}
})
});
})
</script>
</head>
<body>
<div class="item-amount ">
<a href="javascript:void(0);" class="minus no-minus" data="-">-</a>
<input type="text" value="1" id="itemAmount" class="text-amount">
<a href="javascript:void(0);" class="plus" data="+">+</a>
</div>
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
（1）.$(document).ready(function () {})，当文档结构完全加载完毕再去执行函数中的代码。
（2）.$(".item-amount a").click(function () {})，为链接a注册click事件处理函数。
（3）.var count = $(this).attr("data")，获取链接的data属性值。
（4）.$("#itemAmount").val(function () {})，设置文本框的value属性值。
（5）.var value = $(this).val()，获取当前文本框value属性值。
（6）.count == "-" ? value-- : value++;，判断点击的是哪个按钮，然后决定是进行加运算还是减运算。
（7）.if (value > 1) {
$(".item-amount .minus").removeClass("no-minus");
return value;
}，如果value值大于1，那么就移除no-minus样式类。
（8）.else if (value = 1) {
$(".item-amount .minus").addClass("no-minus");
var value = 1;
return value;
}，这个很有技巧，通过if后面的括号中的代码，顺便将文本框的值设置为1。
二.相关阅读:
（1）.attr()可以参阅jQuery attr()一章节。
（2）.val()可以参阅jQuery val()一章节。
（3）.removeClass()可以参阅jQuery removeClass()一章节。
（4）.addClass()可以参阅jQuery addClass()一章节。
点击按钮实现文本框数字增加或者减少代码实例，这样的场景在实际项目中还是用的比较多的，关于点击按钮实现文本框数字增加或者减少代码实例就介绍到这了。
点击按钮实现文本框数字增加或者减少代码实例属于前端实例代码，有关更多实例代码大家可以查看。