发表于： 2021-03-14 19:23:33
1 1913
今天完成的事情：完成了页面2的JS部分
明天计划的事情：做页面3的JS部分
收获：获取input的value并和range绑定
var inputNumber = document.getElementById("p-num");
var rangeNumber = document.getElementById("setting-range");
function go() { //去发牌按钮点击事件
if (inputNumber.value < 4 || inputNumber.value > 18) { //如果输入框数字大于18或小于4
alert("请输入正确的玩家数量。") //就弹出警告
}
else {
window.location.href="fan.html"; //否则跳到下一个页面
}
}
//玩家人数的输入框与滚动条同步
function getNumber() { //滚动条滚动事件
if (inputNumber.value >= 4 && inputNumber.value <= 18) { //当输入框数字大于等于4且小于等于18时
inputNumber.value = rangeNumber.value; //使range滚动框和输入框值一样
}
var a = parseInt(inputNumber.value); //将字符串转换为数字
rangeNumber.style.backgroundSize = ((a - 4) / 14 * 100)+ "%" + " " + "100%"; //计算background-size属性，为滚动按钮两边设置不同颜色
}
//滚动条改变玩家人数随着改变
function numChange() { //输入框离开事件
if (inputNumber.value < 4 || inputNumber.value > 18) { //当输入框数字小于4或大于18时
alert("请输入正确的玩家数量。") //弹出警告
inputNumber.value = 4; //并把输入框数字重置为4
}
else { //否则是滚动栏的值和输入框一样
rangeNumber.value = inputNumber.value;
}
}
//减号按钮与滚动条同步
function rangeLeft() { //减号按钮点击事件
rangeNumber.value--; //滚动框值自减
if (rangeNumber.value < 4) { //当他小于4时
rangeNumber = 4; //使它变为4
} //即他永远小于不了4
else {
inputNumber.value = rangeNumber.value; //当他不小于4时，使输入框值等于滚动栏值
}
}
//加号按钮与滚动条同步
function rangeRight() { //加号点击事件
rangeNumber.value++; //滚动框值自增
if (rangeNumber.value > 18) { //当他大于18时
rangeNumber = 18; //使它变为18
} //即他永远大于不了18
else {
inputNumber.value = rangeNumber.value; //当他不大于18时，使输入框值等于滚动栏值
}
}
返回列表
评论