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

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

1

节点操作

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

none

如何在增加人数使同步到角色安排

0

1

事件

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

function getrmb(number) {
    var num1 = document.getElementById('test').value; //获取第一个输入框的值
    getrmb = number;
    if (isNaN(num1)) { //如果为非数字，结果为空
        document.getElementById('sele').value = "";
    } else { //与第一个输入框相同
        document.getElementById('sele').value = num1;
    }
}

function number() {
    var number = document.getElementById("number");
    var value = number.value;
    //如果文本值为空,设置为1
    if (value=="") {
        number.value = 1;
    }
    //如果文本值为非纯数字,设置为1
    //isNaN()是否为非法数字
    if (isNaN(value)) {
        number.value = 1;
    }
    //如果文本值小于1,设置为1
    if (parseInt(value)<=1) {
        number.value = 1;
    }
}
function subtraction(){
    //获取-号按钮
    var subtraction = document.getElementById("subtraction");
    //获取文本框
    var number = document.getElementById("number");
    if (number.value<=1) {
        //如果文本框的值小于1,则设置值为1
        number.value = 1;
    }else {
        number.value = number.value - 1;
    }
function add(){
    var add = document.getElementsByClassName("add");
    var number = document.getElementById("number");
    //parseInt() 将数值型字符串转换为数值
    number.value = parseInt(number.value) + 1;
}

写的警告框是当除4-18以外的内容出现警告框，但是警告框的出现不太合理。

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

HTML:
    <form action="">
    <div class="number">
        玩家人数 <input type="number" value="4"  id="number" class="numberBox"> 人（4-18人）<br>
        <input type="button" class="reduce" id="reduce">
        <input type="range" value="4" id="myRange" class="range" min="4" max="18" >
        <input type="button" class="plus" id="plus">
    </div>
        <input type="button" value="去发牌" class="start ">
    </form>

JS;
//创建玩家角色数组：
function aPlayer() {
    aKillers = [];
    aPeople = [];
    for (var i = 0; i < killer.innerText; i++) {
        aKillers.push(roleKllers);
    }
    for (i = 0; i < people.innerText; i++) {
        aPeople.push(rolePeople);
    }
    allRole=aKillers.concat(aPeople);
    console.log(allRole);
}
//洗牌
function shuffle() {
    for (var i = allRole.length; i--;) {
        var random = Math.floor(Math.random() * (i + 1));
        var temp = allRole[i];
        allRole[i] = allRole[random];
        allRole[random] = temp;
    }
    console.log(allRole);
}
//数字框与滑块联动
number.oninput = function () {
    aPlayer();
    shuffle();
    if (number.value >= 4 && number.value <= 18) {
        myRange.value = number.value;
        killer.innerText = Math.round((number.value) * 0.25);
        people.innerText = number.value - killer.innerText;
    }
    else {
        alert("请输入正确范围内的数字");
    }
}

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

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

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

    })
});

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

js等比例分配人数

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

暂无

只能渲染一天的状态

0

1

本地储存

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

$(function () {
    $(".fren").eq(day - 1).after("<p>" + ese.ne + "号" + "被杀手杀死,真实身份是" + ese.Identity + "</p>");
})
$(function () {
    $(".fren3").eq(day - 1).after("<p>" + asd.ne + "号" + "被投票投死了,真实身份是" + asd.Identity + "</p>");
})

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

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

玩家人数

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