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

点击 b页面的投死时改变a页面杀手杀人的背景颜色，保存其状态。

1

本地储存

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

如何取到数组前几位的值?

1

数据类型操作DOM

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

success: function (res) {
					let resd = res.data.data;
					console.log(resd.review.list);
					let lists = resd.review.list;
					console.log(lists.slice(0, 2));
					let xinlist = lists.slice(0, 2);

					that.setData({
						total: resd.review.total,
						total_percent: resd.review.total_percent,
						list: resd.review.list,
						xinlist: xinlist
					})

为什么我的经常会只出现两次，一次盒子的变色

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

js
var smallBox = document.getElementsByName("box");
var x;//定义定时的变量。
var startDiv;//定义开始按钮所在地盒子有在的变量

function color () {
    var a,b,c;//定义三个自变量来储存三个颜色值
    var arr = [a,b,c];
    for (var i = 0;i < arr.length;i++){
        arr[i] = Math.floor(Math.random() * 256).toString(16);
    }
    var newColor = "#" + arr[1] + arr[2] + arr[0];
    return newColor;
}

function reset() {//重新设置颜色
    for (var j = 0;j < 9;j++) {
        smallBox[j].style.backgroundColor = "yellow";
    }
}

function a () {//在1~9中随机取三个数
    var arr1 = [];
    var arr = [0,1,2,3,4,5,6,7,8];
    for (var x = 0;x < 3;x++) {
        var index = ~~(Math.random() * arr.length);
        arr1.push(arr[index]);
        arr.splice(index,1);
    }
    return arr1;
}

function staticState () {
    reset();
    var umber = a();
    for (var i = 0;i < umber.length;i++) {
        smallBox[umber[i]].style.backgroundColor = color();
    }
}

function start () {
    startDiv = document.getElementById("start");
    startDiv.style.background = "yellow";
    clearInterval(x);
    x = setInterval("staticState()",1000);
}

function stop () {
    reset();
    clearInterval(x);
    startDiv.style.background = "";//重置开始键的背景
}

在按顺序点击投票之后，回到杀人页面，被杀的玩家div框背景色变化了，怎么做？

1

本地储存

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

var player = JSON.parse(sessionStorage.getItem("all"));
var num = 1;
var obj = []

function addPlay() {
    for (var i = 0; i < player.length; i++) {
        if (player[i] == "平民") {
            obj.push({
                name: "平民",
                death: true
            })
        } else {
            obj.push({
                name: "杀手",
                death: true
            })
        }
        $('<div class="box-content"></div>').appendTo($("main"))
        $('<div class="box-name"></div>').appendTo($(".box-content")[i])
        $('<div class="box-number"></div>').appendTo($(".box-content")[i])
        $('.box-name')[i].innerHTML = player[i];
        $('.box-number')[i].innerHTML = num;
        num++;
    }
}
//运行函数addPlay
addPlay();
var days = 1;
var deathClick;
$('.box-content').click(function (e) {
    var cli = $(e.target.parentNode).index();
    deathClick = cli;
    // console.log(obj[cli].name)
    if (obj[cli].name == "平民") {
        for (i = 0; i < obj.length; i++) {
            $('.box-content').css("border-color", "#fff")
            this.index = i;
            $(this).css("border-color", "red")
        }
        days = 2
    } else {
        $('.box-content').css("border-color", "#fff")
        alert('请不要自相残杀')
        days = 1
    }

})

function ensure() {
    if (days == 2) {
        var kilClick = 1;
        var flow = 1;
        obj[deathClick].death = false;
        sessionStorage.setItem('flow    ', JSON.stringify(flow))
        sessionStorage.setItem('kilClick', JSON.stringify(kilClick))
        sessionStorage.setItem("deathObj", JSON.stringify(obj))
        window.location.href = '../html/gameFlow.html'
    } else {
        alert("请杀人")
    }

}
var deathPeople = JSON.parse(sessionStorage.getItem('deathObj'))
for(var i = 0; i < deathPeople.length; i++) {
    if(deathPeople[i].death == false){
        $('.box-name').eq(i).css("background-color", "gray")
    }
    console.log(deathPeople)
}
if(JSON.parse(sessionStorage.getItem('vote'))) {
    $('.headText').html('全民投票')
    $('.ensureBtn').html('投死')
    for (i = 0; i < obj.length; i++) {
        $('.box-content').css("border-color", "#fff")
        this.index = i;
        $(this).css("border-color", "red")
    }
}

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

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

ui-touter,为什么没有加载小页面

1

angular基础

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

var myApp = angular.module("myApp", ['ui.router']);

myApp.config(function ($stateProvider, $urlRouterProvider) {

     $urlRouterProvider.when("", "/PageTab");

     $stateProvider
        .state("PageTab", {
            url: "/PageTab",
            templateUrl: "PageTab.html"
        })
        .state("PageTab.Page1", {
            url:"/Page1",
            templateUrl: "Page-1.html"
        })
        .state("PageTab.Page2", {
            url:"/Page2",
            templateUrl: "Page-2.html"
        })
        .state("PageTab.Page3", {
            url:"/Page3",
            templateUrl: "Page3.html"
        });
});

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="userCtrl">

<h3>Users</h3>

<table class="table table-striped">
  <thead>
    <tr>
      <th>编辑</th>
      <th>名</th>
      <th>姓</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="user in users">
      <td>
        <button class="btn" ng-click="editUser(user.id)">
          <span class="glyphicon glyphicon-pencil"></span>编辑
        </button>
      </td>
      <td>{{ user.fName }}</td>
      <td>{{ user.lName }}</td>
    </tr>
  </tbody>
</table>

<hr>
<button class="btn btn-success" ng-click="editUser('new')">
<span class="glyphicon glyphicon-user"></span>创建新用户
</button>
<hr>

<h3 ng-show="edit">创建新用户:</h3>
<h3 ng-hide="edit">编辑用户:</h3>

</div>

</body>
</html>

二级菜单多选与深拷贝的问题

0

1

js基础 vue相关

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="search-list-first">
            <span>职位类别：</span>
            <div class="search-list-second pointer"
                 v-for="(item, index) in jobtypes"
                 @click="changeType(index)"
                 :class="{selected:item.btn}"
            >
              {{item.type}}
            </div>
          </div>
          <div class="search-list-third" v-if="on">
            <span class="list-third-text pointer"
                  v-for="(item, index) in joblevel"
                  @click="changeLevel(index)"
            >
              {{item.name}}
            </span>
          </div>

data () {
      return {
        on: false,
        jobtypes: [
          {type: '不限', btn: true},
          {id:0, type: '产品', btn: false},
          {id:1, type: 'UI', btn: false},
          {id:2, type: 'QA', btn: false},
          {id:3, type: 'Android', btn: false},
          {id:4, type: 'IOS', btn: false},
          {id:5, type: 'WEB', btn: false},
          {id:6, type: 'OP', btn: false},
          {id:7, type: 'Java', btn: false},
          {id:8, type: 'NLP', btn: false},
          {id:9, type: 'DM', btn: false},
          {id:10, type: 'DL', btn: false}
        ],
        joblevel: [
          {
            name: "产品",
            data: [
              {name: "不限", choose: true},
              {id: 1, name: "助理", choose: false},
              {id: 2, name: "初级", choose: false},
              {id: 3, name: "中级", choose: false},
              {id: 4, name: "高级", choose: false},
              {id: 5, name: "总监", choose: false}
            ]
          },
          {
            name: "UI",
            data: [
              {name: "不限", choose: true},
              {id: 1, name: "初级", choose: false},
              {id: 2, name: "中级", choose: false},
              {id: 3, name: "高级", choose: false},
              {id: 4, name: "总监", choose: false}
            ]
          },

methods: {
      //职业类别多选
      changeType (index) {
        //选项开关
        this.jobtypes[index].btn = !this.jobtypes[index].btn
        //遍历取出不限选项外的btn布尔值
        let arr = []
        for (let i=1; i<this.jobtypes.length; i++) {
          arr.push(this.jobtypes[i].btn)
        }
        //多选数量
        let num = 0
        for (let i=1; i<this.jobtypes.length; i++) {
          if (index !== 0 && this.jobtypes[i].btn === true) {
            num++
          }
        }
        console.log(num)
        //joblevel深拷贝
        // console.log(this.joblevel)
        for (let i=0; i<this.joblevel.length; i++) {
          this.arrlevel.push({name:this.joblevel[i].name,data:this.joblevel[i].data})
        }
        console.log(this.arrlevel)
        console.log(this.joblevel)
        //除不限外的选项都未选
        function check(btn) {
          return btn === false
        }
        let checkBtn = arr.every(check)
        //选项状态变化
        //状态1，不限外的选项都未选
        if (checkBtn === true) {
          this.on = false
          this.jobtypes[0].btn = true
        }
        //状态2，不限外的选项有选
        else if (index !== 0 ) {
          this.jobtypes[0].btn = false
          if (num === 1) {
            this.on = true
            this.joblevel = this.joblevel[index].data
          } else if (num > 1) {
            this.on = false
            this.joblevel = this.arrlevel
          }
        }
        //状态4，选中不限
        else if (index === 0) {
          this.on = false
          this.joblevel = this.arrlevel
          for (let i=1; i<this.jobtypes.length; i++) {
            this.jobtypes[i].btn = false
          }
        }
      },

配置HBuilder x打包app的时候。

0

1

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

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

面向对象

0

1

js基础

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" />
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css"
		integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
	<style type="text/css">

	</style>
</head>

<body>
	<p title="qqqWWWSS">this a test</p>
	<script>
		var paras = document.getElementsByTagName("p");
		for (var i = 0; i < paras.length; i++) {
			var title_test = paras[0].getAttribute("title");
			if (title_test != null) {
				alert(title_test);
			}
		}
	</script>

	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js"
		integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
		crossorigin="anonymous"></script>
	<script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js"
		integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
		crossorigin="anonymous"></script>
	<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"
		integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
		crossorigin="anonymous"></script>
</body>

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

v-for报"Elements in iteration expect to h

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

Elements in iteration expect to have 'v-bind:key' directives