[成都|内门弟子]CSS-何俊|2020年08月04日的日报-技能树.IT修真院

发表于： 2020-08-04 22:50:51
1 899
今天完成的事情
完成任务2设置页面的大体布局
            //获取输入玩家input节点
            var player = document.getElementById("player");
            // 获取杀手input节点
            var killer = document.getElementById("killer");
            // 获取平民input节点
            var person = document.getElementById("person");


            // 利用oninput输入事件触发玩家input属性
            player.oninput = function () {
                var x = /\D/g;//定义正则，非数字规则
                this.value = this.value.replace(x, "");// 符合正则规则替换为空值
                gain(this.value);// 获取当前对象输入的值
            }

            var arr = [];


            // 把获取的值赋给killer和person两个input
            function gain(value) {
                killer.value = Math.round(value - (value / 2 + value / 6 + value / 24.1));
                person.value = Math.round(value / 2 + value / 6 + value / 24.1);

                // 当玩家值小于4或大于18赋给killer和person值为空
                if (value < 0 || value > 18) {
                    killer.value = "";
                    person.value = "";
                } else {

                    // 当玩家值小于4或大于18把killer和person以组数形式输出
                    for (var i = 0; i < killer.value; i++) {
                        arr.push("杀手");//输出杀手的数量push到数组
                    }
                    for (var i = 0; i < person.value; i++) {
                        arr.push("平民");//输出平民的数量push到数组
                    }
                }
            }
            gain(player.value);//自运行

            var array = arr;//访问全局变量arr

            // // 点击button按钮判断条件
            function button() {

                // 获取输入玩家input的value的值
                var count = document.getElementById("player").value;

                // 判断条件符合弹出提示窗口,否则进入下一个页面
                if (count < 0 || count > 18) {
                    confirm("请输入正确的玩家数量。");
                } else {

                    // 洗牌算法
                    if (array) {
                        for (var i = array.length - 1; i > 0; i--) {
                            // 打乱数组的玩家
                            var j = Math.floor(Math.random() * (i + 1));
                            var temp = array[i];
                            array[i] = array[j];
                            array[j] = temp;
                        }

                        console.log(array);
                    }
                    // location.href = "check.html";//进入下一个页面
                }
                return false;//冒泡事件
            }
            console.log(array);

            // 键盘事件
            document.onkeydown = function (event) {
                var e = event || window.event || arguments.callee.caller.arguments[0];
                if (e && e.keyCode == 13) {
                    button();
                }
            };

            // 
            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;
                }
            }