发表于: 2017-06-12 21:48:11

2 1023


今天基本完成了任务2

1. 改正了昨天的bug

playerNum.length = playerMember.value;
for (var a=0; a<playerMember.value; a++) {
   playerNum[a] = "平民";
}
for (var b=0; b<killerNum.value; b++) {
   num[b] = (Math.floor(Math.random() * (playerMember.value)));
   if (num.indexOf(num[b]) < 0) {
       num.push(num[b]);
   }
   playerNum[num[b]] = "杀手";
}
console.log(playerNum);

昨天做出来的结果,参与人数改少了之后身份还按照原有的参与人数进行安排,重新捋了一下逻辑发现因为两者的值没有进行同步,通过添加

playerNum.length playerMember.value;

就达成了同步更改

2. 杀手安排

改为

for (var b=0; b<killerNum.value; b++) {
   num[b] = (Math.floor(Math.random() * (playerMember.value)));
   if (num.indexOf(num[b]) < 0) {
       num.push(num[b]);
   }
   playerNum[num[b]] = "杀手";
}

昨天取完数发现无论如何最后一个人不能赋值成杀手,需要注意的是取整范围,改为如上代码可以将最后一个玩家的身份也赋值成杀手

3. 一键生成动态列表

使用这一方式插入html元素

function add() {
   member_setting();
   var player = "";
   for (var y=0; y<playerNum.length; y++) {
       player +=  '<div class="detail">' +
           '<span class="detail-role">'+playerNum[y]+'</span >'+
           '<span class="detail-num">' +(y+1)+ '</span> '+
           '</div>';
   }
   $(".container").eq(0).html(player); // 使用jQuery向元素container元素本身中插入html元素
}

member_setting()是给玩家设置身份的函数,每次先重置列表内容,然后再插入元素,不然会导致每改一次人数原有列表还在

4. 存储

sessionStorage.setItem("playerRole",JSON.stringify(playerNum));

用json转化为字符串,将所有的身份安排内容都进行存储

5. 页面跳转

function skip() {
   if (playerNum != undefined) {
       sessionStorage.setItem("playerRole",JSON.stringify(playerNum));
       window.location.href = "js-2-identification.html";
   } else {
       alert("请设置身份");
   }
}

跳转按钮触发skip(),herf引致跳转页面地址

明天计划继续进行任务3

收获

为什么使用js方式实现跳转而不是使用a标签加入link?

因为需要判断是否满足跳转条件,如果使用a标签,会直接跳转

问题

使用本地存储方式,在application里的storage中找不到存储内容,但是在新页面调出存储内容并console却可以发现存储成功


返回列表 返回列表
评论

    分享到