<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document
</title>
<style>
.left { float: left; }
.right { float: right; }
.abled { color: #db3652; }/*可点击*/
.disabled { background: #e7e7e7; color: #000; }/*不可点击*/
.settle { overflow: hidden; }
input { width: 40px; height: 30px; border: 2px solid #e7e7e7; border-left: 0px; border-right: 0px; text-align: center; padding:0px;}
span { font-size: 1.4em; width: 30px; height: 30px; line-height: 26px; border: 2px solid #e7e7e7; text-align: center; }
span.color { color: #db3652; border: 0px; }
</style>
</head>
<body>
<div class="settle">
<p class="left">剩余：
<span class="color left_count valid_quantity">180
</span> </p>
<span class="sub left abled disabled">-
</span>
<input type="text" id="buy_amount" class="left" name="total_count" value="1" />
<span class="add left abled ">+
</span>
</div>
<script src="js/jquery.js"></script>
<script>
function loadCount() {
var buyAmountInput = $('#buy_amount'),subBtn = $('.sub'),addBtn = $('.add'),leftCountSpan = $('.left_count');
subBtn.click(function () {
var inputValue = parseInt(buyAmountInput.val());
addBtn.removeClass('disabled');
buyAmountInput.val(--inputValue);
if (buyAmountInput.val() < 2) {
$(this).addClass('disabled');
buyAmountInput.val('1');
}
})
addBtn.click(function () {
var inputValue = parseInt(buyAmountInput.val());
var left_count = parseInt(leftCountSpan.text());
inputValue++;
if (inputValue > 1) {
subBtn.removeClass('disabled');
}
if (inputValue >= left_count) {
$(this).addClass('disabled');
buyAmountInput.val(left_count);
} else {
buyAmountInput.val(inputValue);
}
})
buyAmountInput.focus(function () {
subBtn.removeClass('disabled');
addBtn.removeClass('disabled');
})
buyAmountInput.blur(function () {
var inputValue = parseInt(buyAmountInput.val());
var left_count = parseInt(leftCountSpan.text());
if (inputValue < 2) {
subBtn.addClass('disabled');
buyAmountInput.val('1');
}else if (inputValue >= left_count) {
addBtn.addClass('disabled');
buyAmountInput.val(left_count);
}else{
buyAmountInput.val(inputValue);
}
})
}
$(function(){
loadCount();
})
</script>
</body>
</html>
转载于:https://www.cnblogs.com/yanyan1114/p/5717220.html
相关资源：JAVA上百实例源码以及开源项目
