今天完成的事情：

1.完成了任务4杀手杀人的js代码：

var f = 0; //设置变量控制被杀人数

var day = 1;

var gamePlayer = [];

var impress = JSON.parse(localStorage.getItem("arr"));

console.log(impress);

//创建杀手和平民的数组

if (day === 1) {

    for (var j = 0; j < impress.length; j++) {

        if (impress[j] === "平民") {

            gamePlayer[j] = { };

            gamePlayer[j].num = j + 1;

            gamePlayer[j].live = "life";

            gamePlayer[j].role = "平民";

        }

        else if (impress[j] === "杀手") {

            gamePlayer[j] = { };

            gamePlayer[j].num = j + 1;

            gamePlayer[j].live = "life";

            gamePlayer[j].role = "杀手";

        }

    }

}

console.log(gamePlayer);

// 将玩家分配页面保存的数据展示在页面上

$(document).ready(function() {

    for (var i = 0; i < impress.length; i++) {

        var n = "<div class=\"degree\"> <div class=\"name\"><span class=\"vocation\">\

        水民</span></div><div class=\"ordinal\"><span class=\"name_number\">1号</span></div> </div>";

        $("#main").append(n);

        var a = document.getElementsByClassName("name_number");

        var b = document.getElementsByClassName("vocation");

        a[i].innerHTML = (i + 1) + "号";

        b[i].innerHTML = impress[i];

    }

    //添加点击事件，使被点击元素发生颜色变化

    var degree = $(".degree");

    degree.click(function () {

        if (f === 0) {

            m = $(this).index() - 1; //获取当前元素的数组下标

            console.log(m);

            if (gamePlayer[m].role === "平民") {

                $(this).css("color", "#ff0000");

                f = f + 1;

                gamePlayer[m].live = "death";

                localStorage.setItem("gamePlayer", JSON.stringify(gamePlayer));

            }

            else if(gamePlayer[m].role === "杀手") {

                alertMsg("杀手不能自杀");

            }

        }

        else {

            alertMsg("一次只能杀一个人");

        }

    });

    $("#btn").click(function() {

        if(f === 0) {

            alertMsg("请杀人后再点确定");

        }

        else if(f === 1) {

            window.location.href = "BRPG-decrypt.html";

            day = day + 1;

            localStorage.setItem("day", JSON.stringify(day));

        }

    });

});

2.完成了黑夜解密的样式和js代码；

3.百度查找资料的时候发现一个挺好用的选择器：

querySelector 和 querySelectorAll

方法是 W3C Selectors API 规范中定义的。他们的作用是根据 CSS 选择器规范，便捷定位文档中指定元素。

目前几乎主流浏览器均支持了他们。包括 IE8(含) 以上版本、 Firefox、 Chrome、Safari、Opera。

不同的是querySelector返回的是一个对象，querySelectorAll返回的一个集合(NodeList)。

获取页面I属性D为test的元素：

1. document.getElementById("test");
2. //or
3. document.querySelector("#test");
4. document.querySelectorAll("#test")[0];

获取页面class属性为”red”的元素:

1. document.getElementsByClassName('red')
2. //or
3. document.querySelector('.red')
4. //or
5. document.querySelectorAll('.red')

Element.querySelector和Element.querySelectorAll和jQuery(element).find(selector)选择器的区别：

querySelectorAll 在文档内找全部符合选择器描述的节点包括Element本身
jQuery(element).find(selector) 在文档内找全部符合选择器描述的节点不包括Element本身

4.获取一个数组中某个元素的下标值可以采用：

jQuery DOM 元素方法 - index() 方法

index() 方法返回指定元素相对于其他指定元素的 index 位置。

这些元素可通过 jQuery 选择器或 DOM 元素来指定。

注释：如果未找到元素，index() 将返回 -1。

这里把获得的值减去1即是下标值。

明天计划的事情：

继续任务4

遇到的问题：

对于杀手杀完人之后跳转到流程页面时，如何使用一个值去判断当前到底是第几天，目前还没有好的思路

收获：

使用了一个对象的方法设置数组中元素的的三个属性值role,live,num各是多少，然后通过判断role是否是杀手来限制杀手不能自杀，通过判断live的值是否是death来进行黑夜解密的展示后后面死了的人不能被杀第二次，我不知道这属不属于面向对象编程，反正挺好用