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

该问题已被官方收录

如何用js改变滑动条的样式？

0

1

节点操作

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 <input type="range" value="4" min="4" max="18" step="1" id="Range"/>

该问题已被官方收录

用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');

该问题已被官方收录

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

1

本地储存

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

如上

该问题已被官方收录

如果按照杀人游戏3.0版本的人数分配有没有更方便的方法？

1

js随机数

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

function judgeNumber() {
    if (impotContent > 4 && impotContent < 21) {
        sharpShootNumber = "1";
        doctorNumber = "1";
    }

    switch (impotContent) {
        case 5:
            killerNumber = "1";
            policeNumber = "1";
            roturierNumber = "1";
            break;
        case 6:
            killerNumber = "1";
            policeNumber = "1";
            roturierNumber = "2";
            break;
        case 7:
            killerNumber = "1";
            policeNumber = "1";
            roturierNumber = "3";
            break;
        case 8:
            killerNumber = "1";
            policeNumber = "1";
            roturierNumber = "4";
            break;
        case 9:
            killerNumber = "2";
            policeNumber = "1";
            roturierNumber = "4";
            break;
        case 10:
            killerNumber = "2";
            policeNumber = "1";
            roturierNumber = "5";
            break;
        case 11:
            killerNumber = "2";
            policeNumber = "1";
            roturierNumber = "6";
            break;
        case 12:
            killerNumber = "3";
            policeNumber = "2";
            roturierNumber = "5";
            break;
        case 13:
            killerNumber = "3";
            policeNumber = "2";
            roturierNumber = "6";
            break;
        case 14:
            killerNumber = "3";
            policeNumber = "2";
            roturierNumber = "7";
            break;
        case 15:
            killerNumber = "4";
            policeNumber = "3";
            roturierNumber = "6";
            break;
        case 16:
            killerNumber = "4";
            policeNumber = "3";
            roturierNumber = "7";
            break;
        case 17:
            killerNumber = "5";
            policeNumber = "4";
            roturierNumber = "6";
            break;
        case 18:
            killerNumber = "5";
            policeNumber = "4";
            roturierNumber = "7";
            break;
        case 19:
            killerNumber = "5";
            policeNumber = "4";
            roturierNumber = "8";
            break;
        case 20:
            killerNumber = "5";
            policeNumber = "4";
            roturierNumber = "9";
            break;
    } /*  */
} /* 输入的人数判断、分配人数 */

该问题已被官方收录

关于任务三之后如何跳转到任务四。

0

1

控制流程语句本地储存

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, shrink-to-fit=no">
    <link rel="stylesheet" href="../jscss/task2-id.css">
    <title>task2-查看身份</title>
</head>
<body>
<div class="max-wid">
    <header>
        <img src="../jsimages/task2-Icon.png" alt="书签">
        <div>查看身份</div>
        <img src="../jsimages/task7-2-close.png" alt="关闭">
    </header>
    <div class="main">
        <div class="number"><span class="id">1</span> </div>
        <div class="view  ss"></div>
        <div class="view1  ss"></div>
        <div id ="water">水民</div>
    </div>

    <div class="bottom">
        <button class="bottom-vote ttt"  value="查看1号身份"><p>查看<span class="now">1</span>号身份</p > <p class="p"><a id="a"href="#">查看并隐藏身份给<span class="next">1</span>号</a></p></button>

    </div>
</div>
<script src="../js/jquery-3.3.1.min.js"></script>
<script src="../js/task2-id.js"></script>
</body>
</html>

var key = sessionStorage.getItem("Arr");
var kk = JSON.parse(key);
var test;
console.log(kk)

// var link=kk.length;

var count = 1;
var cnt = 1;
let cto =1;
let ceo =1;
let num=0;
//声明一个变量，变量等于布尔值真。

$(".bottom-vote").click(function(){
    topnum();
    backgro();
    next();
    now();
    show();
    name();
    Nextpage();
});

}

//----------------------------用来改变顶部数字身份身份使用

//----------------------------用来改变第变化背景图片使用
function  backgro(){
    $(".ss").toggle();
    $(".bottom-vote p").toggle();
}
//----------------------------用来影藏初始的水民使用
$(".p").hide();
//----------------------------用来改变第一个按钮的文字使用
function next() {
    $(".next").text(another());
}
//----------------------------用来改变第一个按钮的文字使用
function now() {
    $(".now").text(math1());
}
//----------------------------用来影藏初始的水民使用
$("#water").hide();

//----------------------------用来跳转页面使用和显示身份

function show() {

$("#water").toggle();
}
//----------------------------用来跳转页面使用

该问题已被官方收录

输入玩家为非数字后，杀手和平民显示NAN

2

1

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 () {
    gain(this.value);// 获取当前对象输入的值
}
// 把获取的值赋给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 = "";
    }
}
gain(quantity.value);//自运行



quantity.addEventListener('input',function(){
    var x=/\D/g;//定义正则，非数字规则
    this.value=this.value.replace(x,"");// 符合正则规则替换为空值
    if (value="") {
        Killer.value = "";
        civilian.value = "";
    }
})

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

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

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

}


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

        //13为回车键的编码
    if (code === 13) {   
          
        //当按下回车后执行如下代码
        var count = document.getElementById("content").value;
        
        // 按下回车后判断条件符合弹出提示窗口,否则进入下一个页面
        if (count < 4 || count > 18) {
            confirm("请输入正确的玩家数量。");
        } else {
            location.href = "start.html";
        }
    }
}

该问题已被官方收录

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

1

事件

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

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

该问题已被官方收录

在JS的任务二里面，如何去设置以下，监听，就是根据输入的玩家数量来分配角色数量

2

1

事件 js随机数

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" type="text/css" href="./js2-2.css">
   
</head>

<body>

    <!-- 头部部分  -->
    <header>
        <a href="./../js2-1/js2-1.html" class="return"></a>
    </header>
    <main>
        <!-- 玩家配比部分 -->
        <h2>玩家配比</h2>
        <!-- 几个人数 -->
        <div class="number">
            <Div class="box1">
                <Div class="werwolf">
                </Div>
                <span>杀手2人</span>
            </Div>
            <Div class="box2">
                <div class="civilian"></div>
                <span>平民2人</span>
            </Div>
        </div>
        <!-- 玩家数量 -->
        <div class="quantity">
            <span>请输入玩家数量</span>
                <input type="text" name="name" id="value" placeholder=""/>
            <span>玩家数量为4-18</span>
        </div>
    </main>
    <button type="button" value="去发牌" onclick="huoqu()">去发牌</button>
    <script  src="./js2-2.js"></script>
</body>
</html>
上面的是HTML部分
/* 全局字体样式设置 */
html{
    font-size: 62.5%;
}

body{
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 1.6rem;
    background-color: #F0F0F0;
}
h1,h2,h3,h4,h5,h6{
    margin: 0;
    padding: 0;
}
header{
    display: flex;
    align-items: center;
    background-color: #29BDE0;
    width: 100%;
    height: 4.25rem;
}
.return{
    display: inline-block;
    width: 17px;
    height: 17px;
    border: 3px solid white;
    border-right: 0;
    border-bottom: 0;
    margin-left: 5%;
    transform: rotate(-45deg);
}
main h2{
    height: 3.3rem;
    width: 90%;
    margin: auto;
    margin-top: .4rem;
    text-align: center;
    line-height: 3.1rem;
    background-color: white;
    box-shadow: 0px 3px 13px #888888;
}
.number{
    width: 90%;
    background-color: white;
    height: 30rem;
    margin: auto;
    margin-top: .5rem;
    box-shadow: 0px 3px 13px #888888;

}
.box1{
    display: inline-flex;
    align-items: center;  
    width: 40%;
    margin-left: 2rem;
    margin-top: 1rem;
}
.box2{
    display: inline-flex;
    align-items: center;
     width:41%;
}
.werwolf{
    display: inline-block;
	width: 40px;
    height: 36px;
    border-radius: 50%;
    background: url(./css_sprites.png) no-repeat 90% 19.608%;
}
.civilian{
    display: inline-block;
    width: 60px;
	height: 51px;;
    background: url(./css_sprites.png) no-repeat 12.5% 50%;
    border-radius: 50%;
    zoom: .7;
}
input{
    width: 16px;
    background-color: #F0F0F0;
    border: 0;
    margin-left: 10px;
    text-align: center;
    color: orange;
}
.quantity{
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    margin-top: .5rem;
    width: 90%;
    margin-left: 5%;
    box-shadow: 0px 3px 13px #888888;
}
input+span{
    display: inline-block;
    font-size: 12px;
    margin-left: 11px;
    color: orange;
}
button{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    height: 4rem;
    background-color: #FAB344;
    margin-left: 5%;
    margin-top: 4rem;
    margin-bottom: 2.9rem;
    border: 0;
    outline: none;
     color: white;
    font-size: 2rem;
}
上面的是CSS部分
// 获取inout的值
function huoqu() {
    var G = document.getElementById('value').value;
    if ( G< 4  ) {
        G = "请输入正确的玩家数量";
    }
    else if(G>18){
        G = "请输入正确的玩家数量";
    }
    else {
        location.href = "./../js2-3/js2-3.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>

该问题已被官方收录

通过点击事件点击生成人数的按钮，是怎么出来人数分配的样式

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

无