发表于： 2020-08-01 23:04:19
1 1267
今天完成的事情：
绑定input滑动条
css:
.box {
display: flex;
justify-content: space-around;
align-items: center;
width: 50%;
margin: .2rem auto 0 auto;
}
/*横条样式*/
input[type=range] {
-webkit-appearance: none;
/*清除系统默认样式*/
width: 90%;
height: 5px;
/*横条的高度*/
background-color: #fab344;
outline: none;
cursor: pointer;
}
/*拖动块的样式*/
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
/*清除系统默认样式*/
width: 3.7rem;
height: 2.2rem;
background: url("./images/设置页面_01.png") no-repeat;
border: none;
cursor: pointer;
}
.pic1 {
width: 2.2rem;
height: 2.2rem;
background: url("./images/设置页面_02.png") no-repeat 50%;
outline: none;
border: none;
}
.pic2 {
width: 2.2rem;
height: 2.2rem;
background: url("./images/设置页面_03.png") no-repeat 50%;
outline: none;
border: none;
}
js
<div class="box">
<input type="button" class="pic1" onclick="btLeft()">
<input type="range" id="rangeNumber" oninput="change()" name="change" value="4" min="4" max="18" step="1">
<input type="button" class="pic2" onclick="btRight()">
</div>
<script>
var inputNumber = document.getElementById("inputNumber");
var rangeNumber = document.getElementById("rangeNumber");
//玩家人数的输入框与滚动条同步
function getNumber() {
if (inputNumber.value >= 4 && inputerNumber.value <= 18) {
inputNumber.value = rangeNumber.value;
}
else {
alert("请输入玩家人数");
}
}
//滚动条改变玩家人数随着改变
function change() {
inputNumber.value = rangeNumber.value;
}
//减号按钮与滚动条同步
function btLeft() {
rangeNumber.value--;
if (inputNumber.value <= 4) {
alert("人数不足");
}
else {
inputNumber.value = rangeNumber.value;
}
}
//加号按钮与滚动条同步
function btRight() {
rangeNumber.value++;
if (inputNumber.value >= 18) {
alert("人数太多");
}
else {
inputNumber.value = rangeNumber.value;
}
}
返回列表
评论