【人数输入后，人数自动显示变化 _事件】

人数输入后，人数自动显示变化

我也踩过这个坑( 1 )

已统计您的踩坑,无需重复点击

回答(1)

事件

详细描述

截图

代码

var btn = document.getElementById('btn-back');//上一步
var begin = document.getElementById('begin');//发牌
var num = document.getElementById('num');//玩家总人数
var set = document.getElementById('btn-num');//设置
var num_man = document.getElementById('num-man'); //平民数量
var num_killer = document.getElementById('num-killer'); //杀手数量
var osliderBlock = document.getElementById("range");//滑块的值
var reduce = document.getElementById('btn-reduce');//减少
var add = document.getElementById('btn-add');//增加
var player = [];//玩家人数


//平民杀手人数
//1杀手
function num_player1 (){
    num_man.innerHTML = num.value - 1;
    num_killer.innerHTML = 1;
    player.length = num.value;
    for (i=0; i<player.length-1; i++){
        player[i] = '平民';
    }
    player[player.length-1] = '杀手';
}
//2杀手
function num_player2 (){
    num_man.innerHTML = num.value - 2;
    num_killer.innerHTML = 2;
    player.length = num.value;
    for (i=0; i<player.length-2; i++){
        player[i] = '平民';
    }
    for (j=player.length-2; j<player.length; j++){
        player[j] = '杀手';
    }
}
省略....

//配比平民杀手
//配比判断
function change() {
    if (4<=num.value && num.value<=5){
        num_player1();
    } else if (6<=num.value && num.value<=8){
        num_player2();
    } else if (9<=num.value && num.value<=13){
        num_player3();
    } else if (14<=num.value && num.value<=15){
        num_player4();
    } else if (16<=num.value && num.value<=18){
        num_player5();
    }
}
//配比匹配
function on_change() {
    if (num.value >= 4 && num.value <= 18) {//设置方框里面玩家人数范围
        osliderBlock.value=num.value;//将玩家总人数赋值给滑块的值，实现动态变化
    } else {
        alert("请输入正确的人数4~18");
        num.value=8;
        osliderBlock.value=8;
        num_player2();
        //人数超出范围的话，弹出警告框，并且将方框和滑块的值重置为8
    }
}

编辑于2024-05-13

时间排序

热门排序

[深圳|结业弟子]JS-钟俊

如何让人数输入后，人数自动显示变化?这里就涉及到一个相互关联，相互联动的问题了；

说下我的思路：这个其实就是让输入框的数值，和杀手的数值，以及滚动条的数值，实现相互关联，

代码如下：

function kiOrCi () {
    if(playersNum.value < 15){
        killers.value = Math.floor(playersNum.value / 3);
    }
    else {
        killers.value = Math.floor((playersNum.value-1) / 3);
    }
    killers.innerText = killers.value;
    //分配杀手数量
    civilians.value = playersNum.value - killers.value;
    civilians.innerText = civilians.value;
    console.log(killers.value,civilians.value);
    //分配平民数量
}

function pNumber(){
    if(playersNum.value>=4&&playersNum.value<=18){
        rangeNumber.value=playersNum.value;
        //设置数值范围
    }
    else{
        alert("请输入正确的玩家数量");
        playersNum.value=4;
        //数值不正确时重置
    }
}

function slid(){
    playersNum.value=rangeNumber.value;
    kiOrCi();
    //设置滑动条的值等于玩家人数
}

function btnLeft(){
    rangeNumber.value--;
    playersNum.value = rangeNumber.value;
}
function btnRight(){
    rangeNumber.value++;
    playersNum.value = rangeNumber.value;
    //+-按钮
}

rangeNumber.oninput = function () {
    slid();
    kiOrCi();
};
btnL.onclick = function () {
    btnLeft();
    kiOrCi();
};
btnR.onclick = function () {
    btnRight();
    kiOrCi();
};
playersNum.onchange = function () {
    pNumber();
    kiOrCi();
};
killers.onchange = function () {
    kiOrCi();
};
//点击，滑动 数值联动

//我这里运用的是设置三个函数，分别为输入框的，上方人数的，和滚动条的，然后

将这三个函数相互调用，从而实现相互关联，相互绑定的作用；

//这是我实现的一种思路，通过多个函数互相调用实现

相互联动，你可以参考一下；

查看全部>

编辑于2018-11-09

去第页