在点击“+”,“-”号时能改变中间数字的大小,实现代码如下:
在dom层
<div class="control-num">
<span class="control-num-icon jian"></span>
<input id="Number" readonly="true" type="text" value="500" /> <span class="control-num-icon jia"></span>
</div>
css代码:
.control-num{
display:inline-block;
span{
font-size: 12px;
font-family: SourceHanSansCN-Regular, SourceHanSansCN;
font-weight: 400;
color: #FFFFFF;
}
.control-num-icon{
width: 20px;
height: 20px;
display: inline-block;
vertical-align: middle;
cursor: pointer;
}
.jian{
background:url("../img/jian-num-icon.png") no-repeat;
background-size: 100% 100%;
}
.jia{
background:url("../img/jia-num-icon.png") no-repeat;
background-size: 100% 100%;
}
#Number{
display:inline-block;
width: 21px;
text-align:center;
}
// 需要先去除input框的默认样式
input {
background: none;
outline: none;
border: none;
color: transparent;
text-shadow: 0 0 0 #fff;
}
}
js代码:
$(document).ready(function () {
// 增减数字
var n = parseInt($("#Number").val());
//等于1的时候,设置减号不可点击
if (n == 1) {
$(".jian").css({ cursor: "not-allowed" });
}
//点击加号,改变文本框中的值,并设置减号为可使用。
$(".jia").click(function () {
n += 1;
$(".jian").css({ cursor: "pointer"});//变为可点击
$("#Number").val(n);
});
//点击减号,改变文本框中的值
//如果文本框的值为1,则设置减号为不可使用。
$(".jian").click(function () {
if (n == 1) {
$(".jian").css({ cursor: "not-allowed"});//变为不可点击
}
if (n > 1) {
n -= 1;
$("#Number").val(n);
}
});
//光标经过时,如果文本框的值为1,则减号不可点击。
$(".jian").hover(function () {
if (n == 1) {
$(".jian").css({ cursor: "not-allowed" });
}
})
})