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

全部问题

已收录问题

未收录问题

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

该问题已被官方收录

任务二怎么设置滑动条?

4

4

节点操作

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

该问题已被官方收录

滑动条滚动如何与input里输入的值实现联动

3

3

节点操作

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 <input type="button" name="button" value="获取" onclick="get()"/>

该问题已被官方收录

游戏天数数据清零

1

2

本地储存

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

  <ul>
            <li>杀手杀人</li>
            <li>亡灵发表遗言</li>
            <li>玩家依次发言</li>
            <li>全民投票</li>
        </ul>

该问题已被官方收录

js的数据本地存储

3

2

本地储存

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

该问题已被官方收录

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

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

该问题已被官方收录

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

1

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

该问题已被官方收录

如何设置一个判断语句,使玩家人数不符合要求时,禁止分配玩家

1

1

js随机数

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

// window.location.href="../html/task234-peibi.html";  //不停的重复跳转
// window.open('../html/task234-peibi.html');

//玩家人数显示框
var txt2 = document.getElementsByTagName('input')[2];
//滚动条滚动数值
var txt3 = document.getElementsByTagName('input')[3];
//按钮一,递减;
var less = document.getElementsByTagName('button')[0];
//按钮二,递增;
var plus = document.getElementsByTagName('button')[1];
//文本:点击设置
var set = document.getElementById('click-set')
//给文本绑定点击事件
set.onclick = function set() {
  //杀手数量
  num1 = Math.floor(txt2.value / 3);
  //平民数量
  num2 = txt2.value - num1;
  //杀手数组
  var sha = Array(num1);
  //平民数组
  var pin = Array(num2);
  //历遍杀手数组
  for (i = 0; i < num1; i++) {
    sha[i] = "<li><img src='../images/13.png'> 杀手1人</li>";
  }
  //历遍平民数组
  for (i = 0; i < num2; i++) {
    pin[i] = "<li><img src='../images/14.png'> 平民1人</li>";
  }
  //合并杀手和平民数组
  var allplayer = sha.concat(pin);
  //玩家数组乱序输出
  for (var i=0;i<txt2.value;i++){
    var all = i + Math.floor( Math.random()*(txt2.value - i));
    var temp = allplayer[i];
    allplayer[i]=allplayer[all];
    allplayer[all] = temp;
  }
  //输出杀手和平民数组到HTML,并取消分隔符
  document.getElementsByTagName("ul")[0].innerHTML = allplayer.join("");
}
//当输入框数字修改时,滑动块也跟着改变;
txt2.onchange = function changenumber() {
  if (txt2.value <= 16 && txt2.value >= 4) {
    txt3.value = txt2.value;
  }
  else {
    alert("请保证玩家人数在4~16之间");
  }
}
//当滑动条改变时,输入框数字也跟着改变;
txt3.oninput = function changethumb() {
  txt2.value = txt3.value;
}
//右边加号按钮,点击实现递增;
plus.onclick = function() {
  if (txt3.value < 16) {
    txt3.value++;
    txt2.value = txt3.value;
  }
  else {
    alert("玩家人数已经满啦!");
  }
  //滑动块所在的值距最左边的长度占滑动条总长度的百分比
  var suibian = (txt2.value - 4)/12*100 + '%';
  console.log(suibian);
  txt3.style.backgroundSize=suibian ;//给滑动条添加属性(驼峰法)
}
//左边减号按钮,点击实现递减;
less.onclick = function() {
  if (txt3.value > 4) {
    txt3.value--;
    txt2.value = txt3.value;
  }
  else {
    alert("玩家人数不能再少啦!");
  }
  //滑动块所在的值距最左边的长度占滑动条总长度的百分比
  var suibian = (txt2.value - 4)/12*100 + '%';
  txt3.style.backgroundSize=suibian ;//给滑动条添加属性(驼峰法)
}
//跳转至玩家配比页面
function peibi() {
  window.location.href = "../html/task234-peibi.html";
}
//跳转至上一个页面
function backto() {
  window.location.href = "../html/task234-01.html";
}
//在鼠标指针移动到元素上时触发。
txt3.onmousemove= function(){
  //滑动块所在的值距最左边的长度占滑动条总长度的百分比
  var suibian = (txt2.value - 4)/12*100 + '%';
  console.log(suibian);
  
  txt3.style.backgroundSize=suibian ;//给滑动条添加属性(驼峰法)
}
//元素上发生鼠标点击时触发。
txt3.onclick = function(){
  //滑动块所在的值距最左边的长度占滑动条总长度的百分比
  var suibian = (txt2.value - 4)/12*100 + '%';
  txt3.style.backgroundSize=suibian ;//给滑动条添加属性(驼峰法)
}
//设置 "去发牌"点击事件,页面跳转至查看身份页面;
document.getElementsByTagName("button")[2].onclick = function(){
  window.location.href = "../html/task234-watch.html";
}

该问题已被官方收录

for循环没有进入函数内部进行赋值

0

1

控制流程语句变量

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

for(;i>=0;i--){
    console.log("选择元素下角标"+i);
    $(".titleDate").eq(i).click(function(){  /*i的赋值到这里就结束了*/
        $(".content").eq(i).toggle();          /*没有对子函数进行循环赋值*/
        console.log("被控制元素的序号i="+i)
    });
}

该问题已被官方收录

如何通过本地缓存传递到新页面后变成数组

1

1

本地储存

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

sessionStorage.setItem("killercivilian",empty);  // 保存杀手平民人数保存在killercivilian中
   console.log(empty);

该问题已被官方收录

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

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