IT修真院·坑乎 | Java(后端),CSS(前端),JavaScript(前端),PM(产品经理),UI(交互设计),QA(测试),Android(安卓APP),iOS(苹果APP),OP(运维),Python(后端)日常在线问答学习平台

IT修真院·坑乎 | Java(后端),CSS(前端),JavaScript(前端),PM(产品经理),UI(交互设计),QA(测试),Android(安卓APP),iOS(苹果APP),OP(运维),Python(后端)日常在线问答学习平台

咨询电话 : 010-59478634

全部问题

已收录问题

未收录问题

没有找到答案，去提问>>>

该问题已被官方收录

2

1

节点操作

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

暂时不到方向不知道该怎么写

该问题已被官方收录

如何用滑动条改变输入框的值？

0

1

节点操作

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

//输入框取值
function inputNumber() {
    if (inputNum.value >= 4 && inputNum.value <= 18) {
        slipRange.value = inputNum.value;
    } else {
        alert("游戏限制人数为4~18人");
    }
    peopleNum.innerText = Math.ceil(slipRange.value * 2 / 3);
    ghostNum.innerText = Math.floor(slipRange.value / 3);
}

//滑动条和输入框同步
function change() {
    inputNum.value = slipRange.value;
    peopleNum.innerText = Math.ceil(slipRange.value * 2 / 3);
    ghostNum.innerText = Math.floor(slipRange.value / 3);
}

该问题已被官方收录

数值不正确

0

1

js基础

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

var input = document.getElementById('myinput') //获取节点
var arr = [];
    
function change() { //创建一个人数分配函数组
    var x = document.getElementById("myinput").value; //总人数 
    var z = Math.round(x / 2 + x / 6 + x / 24.1); //平民人数
    var y = x - z; //杀手人数
    document.getElementById("killer").innerHTML = y; //HTML显示杀手人数
    document.getElementById("civ").innerHTML = z; //HTML显示平民人数
    if (4 > x || 18 < x) { //人数不正确判断
        document.getElementById("killer").innerHTML = ""; //输出空
        document.getElementById("civ").innerHTML = ""; //输出空

    } else {
        // arr = [];
        for (var i = 0; i < y; i++) {
            arr.push("杀手")
        }
        for (var i = 0; i < z; i++) {
            arr.push("平民")
        }
        console.log(arr)
    }
}


change() //先运行一遍

input.oninput = function myf() {
    change()
}


// 这是点击事件
function button() {
    var x = document.getElementById("myinput").value; //变量X为输入的总人数
    if (4 > x || 18 < x) { //判断条件
        confirm('人数不对') //对话框
    } else {
        var res = []; //乱序，不过看不懂啊！！！！！！！！！
        for (var i = 0, len = arr.length; i < len; i++) {
            var randomIndex = Math.floor(Math.random() * arr.length);
            res[i] = arr[randomIndex];
            arr.splice(randomIndex, 1);
        }
        localStorage.setItem("key", JSON.stringify(res));
        console.log(res);
    }
    // location.href = "./allot.html";
    return false;
}


var back = document.getElementById("back");
back.onclick = function () {
    console.log(11)
    if (confirm("返回页面")) {
        location.href = "./home.html";
    } else {
        return false;
    }
}





//键盘事件，抬起按键触发
document.onkeyup = function (v) { //a时按键信息对象以函数参数的形式传递进来
    //取出按键信息中的按键代码（大部分浏览器通过keyCode属性获取按键代码，但少部分浏览器使用的是charCode
    var x = v.keyCode;
    if (x === 13) { //13为回车键的编码

        //按下回车键执行如下代码
        var y = document.getElementById("myinput").value;
        if (y < 4 || y > 18) {
            confirm("人数不对")
        } else {

            location.href = "./home.html";
        }
    }
}

该问题已被官方收录

数据如何传输

0

1

url传参

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/log.css">
</head>

<body>
    <header>
        <div class="arrow"></div>
        <span class="header-font">法官日报</span>
        <div class="cross"></div>
    </header>

    <main>
        <div class="box">
            <div class="main_font"></div>
            <span class="main_number"></span>
        </div>
    </main>

    <footer>
        <button onclick="button()" class="footer-box">
            <span class="footer-font">开始游戏</span>
        </button>
    </footer>
</body>
<script src="../JavaScript2/js/player.js"></script>
</html>


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/log.css">
    
</head>

<body>
    <header>
        <div class="arrow"></div>
        <span class="header-font">法官日报</span>
        <div class="cross"></div>
    </header>

    <nav>
        <span class="nav-font">杀手请睁眼，杀手请选择要杀的对象</span>
        <div class="triangle"></div>
        <span class="out-font">点击下方玩家头像，对被杀的玩家进行标记</span>
    </nav>

    <main>
        <div class="box" >
            <div class="main_font"></div>
            <span class="main_number"></span>
        
        <div class="skill-box">
            <div class="skill">
                <img class="killer" src="img/knife.png">
            </div>
        </div>
</div>

该问题已被官方收录

使用localStorage传递数组到第二个页面怎么恢复成正常的数组？

1

1

本地储存

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

如上

该问题已被官方收录

把杀手和平民转换为数组打乱，控制台打印出来的不会重置

2

1

js基础

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

// 点击顶部返回按钮返回到游戏主页
function start() {
    // 点击返回弹出提示窗口
    if(confirm("是否要退出游戏，并返回到主页面")){     
        location.href = "start.html";//点击确定返回到主页面
     }else{
        return false;//点击取消停留在当前页面
    }
}


//获取输入玩家input节点
var quantity = document.getElementById("content");
// 获取杀手input节点
var Killer = document.getElementById("Killer");
// 获取平民input节点
var civilian = document.getElementById("civilian");


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

var arr=[];


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

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

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

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

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

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

    // 判断条件符合弹出提示窗口,否则进入下一个页面
    if (count < 4 || 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;//冒泡事件
}


// 键盘事件，onkeydown事件当用户按下按键触发
document.onkeydown = function (a) {//a是按键信息对象以函数参数的形式传递进来
   
     //取出按键信息中的按键代码(大部分浏览器通过keyCode属性获取按键代码，但少部分浏览器使用的却是charCode
    var code = a.charCode || a.keyCode;  

        //13为回车键的编码
    if (code === 13) {   
        button();//调用button函数
    }
}

该问题已被官方收录

多次点击设置时会产生多余

1

1

函数

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" name ="viewport" content ="width=device-width,initial-scale=1.0">
    <title>杀人游戏</title>
    <link href="proportion.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<header>
    <a class="back"></a>
    <h2>参数设置</h2>
    <a class="circled-help"></a>
</header>
<main>
    <div class="box-top">
    <h3 class="bor-r">玩家配比</h3>
        <div class="bg-fff">
                <ul id="player" class="player">
                    
                </ul>
        </div>
        <button class="cl-blue" onclick="Playermix()" id="btm-set">
            点击设置
        </button>
    </div>
    <div class="box-container">
        <input class="input-top" type="text" placeholder="水民词组">
        <input class="input-button" type="text" placeholder="杀手词组">
    </div>
    <div class="box-bottom">
        <div class="box-bottom-player">
            玩家人数
            <input id="PlayerNumber" class="box-bottom-people" type="text" value="4" onchange="playernumber()">
            人
        </div>
        <div class="box-bottom-input">
            <input class="bottom-input-minus" type="button" onclick="btmmin()">
            <input class="bottom-input-slider" type="range" id="RangeNumber" value="4" min="4" max="18" step="1" onchange="rangenumber()">
            <input class="bottom-input-add" type="button" onclick="btmadd()">
        </div>
    </div>
</main>
<footer>
    <button class="footer-button-start" onclick="Start()">去发牌</button>
</footer>
<script src="task-2.js"></script>
</body>
</html>

var playerNumber = document.getElementById("PlayerNumber");
var rangeNumber = document.getElementById("RangeNumber");
//关联rangeNumber和playerNumber两个input
function playernumber() {
    if (playerNumber.value >=4 && playerNumber.value <=18) {
        rangeNumber.value = playerNumber.value;
    }
    else {
        alert("玩家数应在4-18人");
    }
}
function rangenumber() {
    playerNumber.value = rangeNumber.value;
}
//关联加号和减号按钮
function btmadd() {
    rangeNumber.value++;
    if (playerNumber.value >= 18) {
         alert("玩家人数必须小于等于18");
     }
     else {
        playerNumber.value = rangeNumber.value;
     }
}
function btmmin() {
    rangeNumber.value--;
    if (playerNumber.value <= 4) {
        alert("玩家人数必须大于等于4");
    }
    else {
        playerNumber.value = rangeNumber.value;
    }
}
//设置玩家配比
function Playermix() {
    //玩家人数
    var people = playerNumber.value;
    //杀手
    var killerNumber = Math.floor(people / 4);
    //平民
    var civilianNumber = people - killerNumber;
    if (people < 4 || people > 18) {
        alert("玩家人数不能小于4大于18");
    }
    else {
        //增加杀手
        for (var i = 0; i < killerNumber; i++) {
            var element = document.getElementById("player");
            var Killer = document.createElement("li");
            var Square = document.createElement("span");
            var node = document.createTextNode("杀手1人");
            element.appendChild(Killer);
            Killer.appendChild(Square);
            Killer.appendChild(node);
            Killer.className = 'killer';
            //console.log(i)
            //console.log(killerNumber)
        }
        //增加平民
        for (var o = 0; o < civilianNumber; o++) {
            var element = document.getElementById("player");
            var Civilian = document.createElement("li");
            var Square = document.createElement("span");
            var node = document.createTextNode("平民1人");
            element.appendChild(Civilian);
            Civilian.appendChild(Square);
            Civilian.appendChild(node);
            Civilian.className = 'civilian';
            //console.log(o)
            //console.log(civilianNumber)
        }
    }
}

该问题已被官方收录

js 如何实现分配好人和坏人

1

1

js随机数

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

    function y() {
            var a = document.getElementById('dome').value;
            

            if (a < 6 && a > 3) {
                arr[0] = 1;
                

            } else if (a > 5 && a < 9) {
                arr[0] = 2;
                

            } else if (a > 8 && a < 12) {
                arr[0] = 3;
                

            } else if (a > 11 && a < 15) {
                arr[0] = 4;
                

            } else if (a > 14 && a < 18) {
                arr[0] = 5;
                

            } else if (a == 18) {
                arr[0] = 6;
                

            } else {
                
                
                bad.innerText = 0;
                good.innerText = 0;
                return
                
            }
            arr[1] = a - arr[0];
            bad.innerText = arr[0];
            good.innerText = arr[1];
            
        }
        






        function qqq() {
            var a=document.getElementById('dome').value;
           if (a<4) {
            pop.style.display = 'block';
           }
           else if (a>18) {
            pop.style.display = 'block';
           }
        }

该问题已被官方收录

如何使滑轨左右轨颜色不同？

1

1

节点操作

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; /*清除系统默认样式*/
    height: 22px; /*拖动块高度*/
    width: 34px; /*拖动块宽度*/
    background: #fff url("image/rangeimg.png") no-repeat 9px;
    background-size: 40% 50%;
    /*background: url("");*/
    /*background: #fff; !*拖动块背景*!*/
    border-radius: 5px; /*外观设置为圆形*/
    border: solid 2px #fab344; /*设置边框*/
}

.rolerange input[type="range"] {
    /*margin-top: 8px;*/
    outline: none;
    -webkit-appearance: none; /*清除系统默认样式*/
    width: 68% !important;
    background: -webkit-linear-gradient(#fcc671, #fcc671) no-repeat, #ffe6be;
    background-size: 50% 100%; /*设置左右宽度比例*/
    height: 3px;
    /*color: #ffa600;*/
}

该问题已被官方收录

用class 属性获取的DOM 不能触发事件

3

1

节点操作

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="slider">
          <div class="minus"></div>
          <input type="range" name="range" id="range" value="8" step="1" min="4" max="18">
          <div id="plus" class="plus"></div>
        </div>


minus = document.getElementsByClassName('minus'),
  plus = document.getElementById('plus');

去第页

Copyright ©2015 北京葡萄藤信息技术有限公司 All Rights Reserved | 京ICP备15035574号-1