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

亚马逊运营

全部问题

已收录问题

未收录问题

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

该问题已被官方收录

如何使用洗牌算法

1

1

js随机数

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

//获取幽灵与平民的数组
var sum = [];
for(var i = 0;i<slayerPeople;i++){
    sum.push("幽灵");
}
console.log(sum);
for(var u =0;u<civilian;u++){
    sum.push("平民");
}

//数组乱序
~function disorder(){
    for(var i=0;i<sum.length;i++){
        var ccc = Math.floor(Math.random()*sum.length);
        var ddd = sum[ccc];
        sum[ccc] = sum[i];
        sum[i] = ddd;
    }
}();
console.log(sum);

该问题已被官方收录

洗牌方法使用时的问题

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>

该问题已被官方收录

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

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

该问题已被官方收录

如何限制只能输入数字，不能输入字母，逗号，+号等等其他非数字或空格

3

1

正则表达式

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

function input() { //输入框输入事件
    let n = number.value; //变量n赋值为输入框输入的值
    let killer = document.getElementById('killer'); //获取杀手人数节点
    let villager = document.getElementById('villager'); //获取平民人数节点
   
    switch (true) { //判断输入数字进行动态人数分配
        case n >= 4 && n <= 14 || n >= 16 && n <= 17:
            killer.innerHTML = Math.floor(n / 3);
            villager.innerHTML = n - killer.innerHTML;
            break;
        case n == 15 || n == 18:
            killer.innerHTML = Math.ceil(n / 4);
            villager.innerHTML = n - killer.innerHTML;
            break;
        default: //除以上外人数为空
            killer.innerHTML = "";
            villager.innerHTML = "";
    };

该问题已被官方收录

不能存在数组在localStorage内

0

1

本地储存

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

    let people =  peopleArray();
    localStorage.setItem("peopleArray", JSON.stringify(people) );
    let storedPeople = JSON.parse(localStorage.getItem("peopleArray"));

该问题已被官方收录

sessionstorage中储存数组

1

1

本地储存

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

var obj = { name:'Jim' };
sessionStorage.obj = obj; 
localStorage.obj = obj; 

var arr = [1,2,3]; 
sessionStorage.obj = arr; 
localStorage.obj = arr

该问题已被官方收录

索引数字突然变为汉字

1

1

节点操作变量

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

该问题已被官方收录

没有赋值变量，变量却变了

0

1

变量

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

function shuffle(arr) {
    var _arr=arr,
        r;

    for (i=0;i<arr.length;i++){
        r = ~~(Math.random() * arr.length);
        _arr[i]=arr[r];

    }
    return arr;

}
console.log(shuffle([1,2,3,4,5,6]));

该问题已被官方收录

onchange不能实现输入框和滑动条数值随时同步

1

1

事件

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

此为输入框input
 <input type="text" class="player-num" id="player" max="18" min="6" value="12" onchange="on_change()">
此为滑动条input
<input type="range" class="slider-block" id="slider" min="6" max="18" step="1" value="12" onchange="moveChange()">

该问题已被官方收录

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

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

去第页

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