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

亚马逊运营

全部问题

已收录问题

未收录问题

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

该问题已被官方收录

动态添加标签的时候，只添加文字，但是，不影响样式处理办法。

0

1

节点操作

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

var entranceNum = document.getElementById('entrance');
var slideNum = document.getElementById('slide');

slideNum.onchange = function () {
    entranceNum.value = slideNum.value;
};

entranceNum.onchange = function () {
    if (entranceNum.value >3 && entranceNum.value<19){
        entranceNum.value = slideNum.value;
    }else{
        alert('请输入正确的人数')
    }
};
var left = document.getElementById('left');
left.onclick = function () {
    if (entranceNum.value > 4){
        entranceNum.value--;
        slideNum.value = entranceNum.value;
    }  else {
    }
};
var right = document.getElementById('right');
right.onclick = function () {
    if (entranceNum.value < 18){
        entranceNum.value++;
        slideNum.value = entranceNum.value;
    }  else {
        alert('人太多了');
    }
};
document.getElementsByClassName('go')[0].addEventListener('click',function () {
    if (document.getElementsByClassName('add-flat').length<2){
        alert('请分配好人数')
    }else{
        window.location.href='./JS3.html'
    }
});




setting.onclick = function () {
    var entrance = [];
      var str ="";
    entrance.length = entranceNum.value;
    var slayer = Math.floor(entranceNum.value/3);
var q=[];
while(q.length<slayer){
    var stochastic= Math.floor(Math.random()*entranceNum.value);
    if(q.indexOf(stochastic)<0){
        q.push(stochastic);
    }
    // console.log(out);
}
 for (i =0; i<q.length; i++){
     entrance[q[i]] ='<li class="add-slayer">' + '杀手' + '</li>';
     // console.log(i);
     // console.log(out)
     // console.log(entrance)
}
for (i=0; i<entrance.length; i++){
    if(entrance[i] !=='<li class="add-slayer">' + '杀手' + '</li>'){
        entrance[i] ='<li class="add-flat">' + '平民' + '</li>';
    }
    // console.log(entrance.length)
    // console.log(i)
}

console.log(entrance);
for (var i=0;i<entrance.length;i++){
     str +=entrance[i];

}



 document.getElementById('info').innerHTML = str;
sessionStorage.setItem('dog',JSON.stringify(entrance))
};
console.log(entrance);

该问题已被官方收录

输入框如何与滑动条相互关联

1

1

节点操作

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

无

该问题已被官方收录

如何通过JS动态生成HTML

1

1

函数节点操作

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<body>
    <header>
        <img src="../img/left.png">
    </header>
    <main>
        <div class="container">
        </div>
    </main>

    <footer>
        <button id="btn">继续游戏</button>
    </footer>
</body>

该问题已被官方收录

在任务二的时候，在页面的人数输入完成然后分配下去以后，跳转到下个页面如何去识别

1

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>
                <p id="killer">杀手<span></span>人</p>
            </Div>
            <Div class="box2">
                <div class="civilian"></div>
                <p id="people">平民<span></span>人</p>
            </Div>
        </div>
        <!-- 玩家数量 -->
        <div class="quantity">
            <span>请输入玩家数量</span>
                <input type="text" name="name" id="value" placeholder="" maxlength="2">
            <span>玩家数量为4-18</span>                     
        </div>
    </main>
    <button type="button" value="去发牌" onclick="huoqu()">去发牌</button>
    <script  src="./js2-2.js"></script>
</body>
</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;
}
// 获取inout的值
var G = document.getElementById('value');

function huoqu() {
    if (G.value < 4 || G.value > 18) {
        alert("请输入正确的玩家数量");
    } else {
        console.log(1);
        location.href = "./../js2-3/js2-3.html"
    }
}
// 获取杀手玩家DOM
var K = document.getElementById("killer");
var P = document.getElementById("people");

// 实时监听输入的值
G.oninput = function () {
    console.log(G)

    var killerNumber;
    var peopleNumber;

    // 分配杀人平民人数
    if (G.value < 4 || G.value > 18) {
        K.innerHTML = '杀手人'
        P.innerHTML = '平民人'
    } else if (G.value == 15 || G.value == 18) {
        killerNumber = Math.floor(G.value / 3 - 1)
        peopleNumber = G.value - killerNumber;

        K.innerHTML = '杀手' + killerNumber + '人'
        P.innerHTML = '平民人' + peopleNumber + '人'

    } else if (G.value > 4 || G.value < 18) {
        killerNumber = Math.floor(G.value / 3)
        peopleNumber = G.value - killerNumber;
        K.innerHTML = '杀手' + killerNumber + '人'
        P.innerHTML = '平民人' + peopleNumber + '人'
    }

}
// 禁止输入汉字
G.onkeyup = function () {
    if (!/^\d+$/.test(this.value)) {
        alert('禁止输入汉字');
        this.value = '';
    }
}
// 只能输入数字
G.onkeyup = function () {
    if (/[^\d]/g.test(this.value)) {
        alert('只能整数');
        this.value = '';
    }
}

该问题已被官方收录

洗牌方法使用时的问题

1

1

js随机数

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>demo"flex"</title>
    <link rel="stylesheet" type="text/css" href="试验.css" />

</head>

<body>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">8</div>
    <div class="box">9</div>

    <button onclick="shuffle()" id="start">开始闪</button>
    <button id="over">结束闪</button>
    <script>
        // console.log(a.length)
       function shuffle() {
            var a = document.getElementsByClassName("box");
            var b = [];
            while (a.length) {
                var index = Math.floor((Math.random() * a.length));
                b.push(a[index]);
                a.splice(index, 1);
            }
            return b;
        }
        console.log(shuffle())
        
    </script>

</body>

</html>

该问题已被官方收录

要怎么才能判断数字的奇偶性？

0

1

控制流程语句事件

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

for(var i = 0; i < day_1; i++){
    $('.p-killerdeath').eq(i).append( who[i].numb + '被杀死，他的真实身份是' + who[i].who);
    
};
//投票杀人以后，按数量添加号码
var vote = sessionStorage.getItem('vote');
for(var i = 0; i < vote; i++){
    $('.p-killerdeath-second').eq(i).append( who[i+1].numb + '被杀死，他的真实身份是' + who[i+1].who);
}

该问题已被官方收录

js的index属性怎么使用？

0

1

函数变量

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

如图

该问题已被官方收录

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

该问题已被官方收录

如何用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"/>

该问题已被官方收录

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

去第页

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