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

该问题已被官方收录

法官查看界面如何实现盒子编号、玩家身份和分配身份后的状态保持一致

0

1

事件控制流程语句节点操作

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

html:
<div class="main-box">
   <!--<div class="content-box">-->
            <!--<div class="content-top">-->
                <!--<div class="career"></div>-->
                <!--<div class="number"></div>-->
            <!--</div>-->
        <!--<div class="content-bottom"></div>-->
    <!--</div>-->
</div>
CSS：
.main-box {
    width: 100%;
    margin-top: .2rem;
    display: flex;
    flex-wrap: wrap;
}
.content-box {
    width: 30%;
    height: 1.9rem;
    margin: 1.5% 1.66% 0 1.66%;
}
.content-top {
    width: 100%;
    height: 1.36rem;
}
.career {
    width: 100%;
    height: 1.0rem;
    font-size: .3rem;
    color: #565656;
    background-color: #F5C97B;
    box-sizing: border-box;
    border: 2px solid #FFF;
    border-bottom: none;
    display: flex;
    justify-content: center;
    align-items: center;
}
.number {
    width: 100%;
    height: .36rem;
    font-size: .22rem;
    color: #FFF;
    background-color: #83B09A;
    box-sizing: border-box;
    border: 2px solid #FFF;
    border-top: none;
    display: flex;
    justify-content: center;
    align-items: center;
}
.content-bottom {
    width: 100%;
    height: .3rem;
    padding-top: .2rem;
    background-image: url(../image/img1.png);
    background-repeat: no-repeat;
    background-size: .3rem .3rem;
    background-position: center center;
    visibility: hidden;
}
JS:
var player = JSON.parse(sessionStorage.getItem('player'));//取出总玩家人数数组
 for (var i=0; i<player.length; i++){//遍历数组，有几个玩家就循环几次，把所有玩家都遍历出来
        var num = i + 1;//每个角色对应的号码
        var inBox = '<div class=\"content-box\">\n'+//var个变量存储写进文档的标签代码，记住要转义字符
            '<div class=\"content-top\">\n'+
            '<div class=\"career\">\n'+ player[i] +
            '</div>\n'+
            '<div class=\"number\">\n'+ num +
            '</div>\n'+
            '</div>\n'+
            '<div class=\"content-bottom\">\n'+
            '</div>\n'+
            '</div>';
        $('.main-box').append(inBox);//通过append将盒子一个一个的往文档里面装
        }

该问题已被官方收录

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

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

该问题已被官方收录

如何用对象储存数组？

0

1

本地储存

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

var objArr = [];
for(var i = 0;i < value.length; i++){
    objArr[i] = {
        death: true,
    }
    if(value[i] == 0){
        objArr[i].name = "杀手";
    }else{
        objArr[i].name = "平民";
    }
}

设置x=0；函数内设置x=x++； x为什么一直为0，而x=++x；x自增

0

1

js基础

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

var x = 0;
var a = 0;
function myButton1(){
    x = x++;
    a = ++a;
    console.log(x);
    console.log(a);
}

如何理解值传递与引用传递

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<html>

<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<style type="text/css">
		body {
			font-family: "Helvetica", "Arial", serif;
			color: #333;
			background-color: #ccc;
			margin: 1em 10%;
		}

		h1 {
			columns: #333;
			background-color: transparent;
		}

		a {
			color: #c60;
			background-color: transparent;
			font-weight: bold;
			text-decoration: none;
		}

		ul {
			padding: 0;
		}

		li {
			float: left;
			padding: 1em;
			list-style: none;
		}

		img {
			display: block;
			clear: both;
		}

		#imagegallery {
			list-style: none;
		}

		#imagegallery li {
			display: inline;
		}

		#imagegallery li a img {
			border: 0;
			width: 100px;
			height: 100px;
		}
	</style>
</head>

<body>
	<h1>Snapshots</h1>
	<ul id="imagegallery">
		<li>
			<a href="TestImages/53c73d41t6347a2a44ad5.jpg" title="A firewoks display">
				<img src="TestImages/53c73d41t6347a2a44ad5.jpg" alt="Fireworks">
			</a>
		</li>
		<li>
			<a href="TestImages/876591bf226b002640f252e0fecf0275.jpg" title="A cuo of black coffee">
				<img src="TestImages/876591bf226b002640f252e0fecf0275.jpg" alt="Coffee">
			</a>
		</li>
		<li>
			<a href="TestImages/Img262780588.jpg" title="A red, red rose">
				<img src="TestImages/Img262780588.jpg" alt="Rose">
			</a>
		</li>
		<li>
			<a href="TestImages/U2184P28T3D2092234F326DT20080708102538.jpg" title="The famous clock">
				<img src="TestImages/U2184P28T3D2092234F326DT20080708102538.jpg" alt="Big Ben">
			</a>
		</li>
	</ul>
	<img id="placeholder" src="TestImages/U2184P28T3D2092234F326DT20080708102538.jpg" alt="my image gallery">
	<p id="description">Choose an image.</p>
	<a href="http://www.example.com/" class="popup">Example</a>
	<script>


		function prepareGallery() {
			if (!document.getElementsByTagName) { return false }
			if (!document.getElementById) { return false }
			if (!document.getElementById("imagegallery")) { return false }
			var gallery = document.getElementById("imagegallery");
			var links = gallery.getElementsByTagName("a");
			for (var i = 0; i < links.length; i++) {
				links[i].onclick = function () {
					return showPic(this) ? false : true;
				}
			}
		}
		addLoadEvent(prepareGallery);
		function addLoadEvent(func) {
			var olaonload = window.onload;
			if (typeof window.onload != 'function') {
				window.onload = func;
			} else {
				window.onload = function () {
					olaonload();
					func();
				}
			}
		}

		function showPic(whichpic) {
			if (!document.getElementById("placeholder")) { return false }
			var source = whichpic.getAttribute("href");
			var placeholder = document.getElementById("placeholder");
			if (placeholder.nodeName != "IMG") { return false }
			placeholder.setAttribute("src", source);
			if (document.getElementById("description")) {
				var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title") : "";
				var description = document.getElementById("description");
				if (description.firstChild.nodeType == 3) {
					description.firstChild.nodeValue = text;
				}
			}
			return true;
		}


		function popUp(winURL) {
			window.open(winURL, "popup", "width:320,height:480");
		}
		var links = document.getElementsByTagName("a");
		for (var i = 0; i < links.length; i++) {
			if (links[i].getAttribute("class") == "popup") {
				links[i].onclick = function () {
					popUp(this.getAttribute("href"));
					return false;
				}
			}
		}
		// function changeAgeAndReference(person) {
		// 	person.age = 25;
		// 	person = {
		// 		name: 'John',
		// 		age: 50
		// 	};

		// 	return person;
		// }
		// var personObj1 = {
		// 	name: 'Alex',
		// 	age: 30
		// };
		// var personObj2 = changeAgeAndReference(personObj1);
		// console.log(personObj1); // -> ?
		// console.log(personObj2); // -> ?
		var rotate = function (nums, k) {
			var len = nums.length;
			var newArr = nums.splice(0, len - k)
			var temp = nums.concat(newArr)
			nums = temp
			return nums;
		};
		var a = [1, 2, 3, 4, 5, 6, 7];
		rotate(a, 3);
		console.log(a);


		var a = [1, 2, 3, 4, 5, 6, 7];
		var len = a.length;
		var newArr = a;
		newArr = newArr.splice(0, len - 3);
		console.log(a);

		module.exports = {
			prepareGallery: prepareGallery
		}
	</script>
</body>

</html>
<!-- test vs code git git git -->

点击查看身份，再点击隐藏身份，再点击查看下一个身份，而且图片和序号也对应的在变

1

事件

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

var num=1;
$('#circle').text(num);
$('#num').text(num);

$(document).ready(function () {
    $('#deliver').click(function () {
        $('#icon').text(player[num])
     if($('#image').attr('src')=='../img/myking.png'){
         $('#image').attr('src',"../img/headicon.png")
     }else{
         $('#image').attr('src','../img/myking.png')
     }

    })
});

玩家人数

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

 // var people = player.value - killer.innerHTML;



    // let value =  player.val(); //利用jQuery来获取player总人数的value值

    // console.log(value);


    // var playerNum = player.value,
    //     killerNum = killer.innerHTML,
    //     manNum = man.innerHTML;



    //如果不在 4--18的范围内，就为空，不显示内容
    // if (player.value < 4 || player.value > 18) {
    //     killer.innerHTML = "";
    //     man.innerHTML = "";
    // }


    // 计算每次杀手和平民的人数，用math.floor向下取整，先算出每次杀手的人数
    // if (player.value == 15 || player.value == 18) {
    //     killer.innerHTML = ~~((player.value) / 3 - 1);
    //     man.innerHTML = player.value - killer.innerHTML;
    // } else if (player.value >= 4 && player.value <= 18) {
    //     killer.innerHTML = ~~((player.value) / 3);
    //     man.innerHTML = player.value - killer.innerHTML;
    // }

js等比例分配人数

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

暂无

如何使用div + CSS +JS 来模拟滑动条？

1

节点操作

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

none

input [ type = range ]滚动条的值增减量错误。

0

1

节点操作

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="adjust">
                <p class="players">玩家人数 <input type="number" id="input" value="6" title="游戏人数为4~18人"> 人 <span class="orange">游戏人数为4~18人</span></p>
                <div class="slide clearfix">
                    <button class="minus lfloat" onclick="numMinus()"></button>
                    <input type="range" id="range" class="lfloat" name="num" min="4" max="18" value="6" title="人数范围">
                    <button class="plus lfloat" onclick="numPlus()"></button>
                </div>
            </div>

var inputValue = document.getElementById("input");
var rangeValue = document.getElementById("range");
// 给滚动条绑定“减少”事件
function numMinus () {
    rangeValue.value = rangeValue.value - 1;
    inputValue.value = rangeValue.value;
    console.log('value=' + rangeValue.value);
}
// 给滚动条绑定“增加”事件
function numPlus () {
    rangeValue.value = rangeValue.value + 1;
    inputValue.value = rangeValue.value;
    console.log('value=' + rangeValue.value);
}
// 给 input 绑定事件监听，即时改变数据
inputValue.addEventListener('input',pushValue);
rangeValue.addEventListener('input',getValue);