干杯!我对前端不太擅长,所以,设计师们,你们知道如何实现类似这样的输入吗?我应该从哪里开始?
最佳答案
这里是非常基本的示例,说明如何完成此操作。当然,您需要根据需要更改样式并调整元素。不过这个想法应该是可以理解的。
HTML:
<div class="spin"><span>–</span><input value="0" /><span>+</span></div>
CSS:
.spin {
display: inline-block;
}
.spin span {
display: inline-block;
width: 20px;
height: 22px;
text-align: center;
padding-top: 2px;
background: #ff0;
border: 1px solid #aaa;
border-radius: 0 4px 4px 0;
cursor: pointer;
}
.spin span:first-child {
border-radius: 4px 0 0 4px;
}
.spin input {
width: 40px;
height: 20px;
text-align: center;
font-weight: bold;
}
JavaScript:
var spins = document.getElementsByClassName("spin");
for (var i = 0, len = spins.length; i < len; i++) {
var spin = spins[i],
span = spin.getElementsByTagName("span"),
input = spin.getElementsByTagName("input")[0];
input.onchange = function() { input.value = +input.value || 0; };
span[0].onclick = function() { input.value = Math.max(0, input.value - 1); };
span[1].onclick = function() { input.value -= -1; };
}
关于javascript - 自定义数字输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15615355/