今天基本完成了任务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却可以发现存储成功