今天完成的事情：

1、今天基本完成了一个页面，不过今天比较懵逼，接触了不少新的东西，感觉信息量有点大，而且今天的代码看得也比较懵，总体来说，今天的效果不是很好。

2、今天学习了如何理解JS作用域与作用域链和如何阻止事件冒泡和默认事件。

以下是今天所写的js代码视图：

//初次渲染

oodiv=
    '<div class="container">'
    +'<p class="days">'+'</p>'
    +'<ul>'
    +'<li class="step1">'
    +'<img class="img_1" src="images/js2-5_2.png">'
    +'<div class="triangle triangle-1">'+'</div>'+"杀手杀人"
    +'</li>'
    +'<div class="deadMessage">'+'</div>'
    +'<li class="step2">'+'<div>'+'</div>'+"亡灵发表遗言"+'</li>'
    +'<li class="step3">'
    +'<img class="img_2" src="images/js2-5_1.png">'
    +'<div class="triangle  triangle-2">'+'</div>'+"玩家依次发言"
    +'</li>'
    +'<li class="step4">'+'<div>'+'</div>'+"全民投票"+'</li>'
    +'<div class="voteMessage">'+'</div>'
    +'</ul>'
    +'</div>'
    +'<div class="btn">'
    +'<button id="next">'+"进入下一天"+'</button>'
    +'</div>'

$(".main").append(oodiv);


$(".days").on("click",function(){
    $(".container ul").toggle();
})
//返回上一页
//跳转下一页
// var alive=[];
$(".btn button").on("click",function(){
    //去除死者
    for (var i = 0; i < allDeads.length; i++) {
        players.splice(allDeads[i],1);
    }
    //遍历剩余玩家数
    var shaShou=0;
    var pinMin=0;
    for (var j = 0; j <players.length; j++) {
        if (players[j]=="杀手") {
            shaShou++;
            console.log(shaShou);
        }
        if (players[j]=="平民") {
            pinMin++
            console.log(pinMin);
        }
    }
    //游戏结果
    if (shaShou>pinMin) {
        alert("杀手获胜")
    }else if(shaShou==0){
        alert("平民获胜")
    }else {
        $(".container ul").toggle();
        $(".main").append(oodiv)


    }



});


//取玩家身份
var arr = sessionStorage.players;
players = JSON.parse(arr);
console.log("玩家"+players)
//设置天数
var days=1;

for(var d=0;d<days;d++){
    $(".main").append(oodiv);
    sessionStorage.days=days;
    $(".container p").text("第"+days+"天")
}
//本页死亡信息
var deads=sessionStorage.deads;
deads=parseInt(deads);
//本次投票信息
var vote=sessionStorage.vote;
vote=parseInt(vote)
//所有死亡信息
// var allDeads=new Array();
// for (var i = 0; i < 3; i++) {
//     allDeads.push(deads)
//     allDeads.push(vote)
//     str=JSON.stringify(allDeads)
//     sessionStorage.allDeads=str;
// }
//
//
//
//
// console.log(sessionStorage.allDeads);



//显示杀人结果
if(deads){
    var deadMessage='昨天'+(deads+1)+"号玩家被杀，他的身份是"+players[deads];
    $(".deadMessage").text(deadMessage);
}
//显示投票结果
if(vote){
    var voteMessage='昨天'+(vote+1)+"号玩家被投，他的身份是"+players[vote];
    $(".voteMessage").text(voteMessage);
    $(".btn").addClass("show")
    $(".step1").addClass("bRed");
    $(".triangle-1").addClass("triangle2");
    $(".step2").addClass("bRed");
    $(".triangle-2").addClass("triangle2");
    $(".step3").addClass("bRed");
    $(".step4").addClass("bRed");
}else {
    $(".btn").addClass("hidden")

}

//返回页面的样式

if(sessionStorage.kill){
    pages=sessionStorage.kill;
    $(".step1").addClass("bRed");
    $(".triangle-1").addClass("triangle2");
}else {
    pages="0";
}
//事件
$('.step1').on("click",function(){
    if (pages=="0") {
        menu.transition();
    }else{
        alert("请按顺序点击");
    }
})
$('.step2').on("click",function(){
    if (pages=="1") {
        menu.transition();
    }else{
        alert("请按顺序点击");
    }
})
$('.step3').on("click",function(){
    if (pages=="2") {
        menu.transition();
    }else{
        alert("请按顺序点击");
    }
})
$('.step4').on("click",function(){
    if (pages=="3") {
        menu.transition();
    }else{
        alert("请按顺序点击");
    }
})
//
// $(".main li:eq("+pages+")").click(function(){
//
// })

var menu = {

    // 当前状态
    currentState: pages,

    // 状态转换
    transition: function(event){
        switch(this.currentState) {
            case "0":
                $(".step1").addClass("bRed");
                $(".triangle-1").addClass("triangle2");
                alert("进入杀人页")
                $(".step1").addClass("bRed");
                location.href="js2-6.html";
                this.currentState = "1";
                sessionStorage.kill=this.currentState;
                pages=sessionStorage.kill;
                break;
            case "1":
                $(".step1").addClass("bRed");
                $(".triangle-1").addClass("triangle2");
                $(".step2").addClass("bRed");
                console.log(pages)
                this.currentState = "2";
                sessionStorage.kill=this.currentState;
                pages=sessionStorage.kill;
                alert("请亡灵发表遗言")
                break;
            case "2":
                $(".step1").addClass("bRed");
                $(".triangle-1").addClass("triangle2");
                $(".step2").addClass("bRed");
                $(".triangle-2").addClass("triangle2");
                $(".step3").addClass("bRed");
                this.currentState = "3";
                sessionStorage.kill=this.currentState;
                pages=sessionStorage.kill;
                alert("请玩家依次发言")
                break;
            case "3":
                $(".step1").addClass("bRed");
                $(".triangle-1").addClass("triangle2");
                $(".step2").addClass("bRed");
                $(".triangle-2").addClass("triangle2");
                $(".step3").addClass("bRed");
                $(".step4").addClass("bRed");
                this.currentState = "0";
                sessionStorage.kill=this.currentState;
                pages=sessionStorage.kill;
                alert("进入全民投票");
                location.href="js2-7.html";
                break;
        }
    }
};

var arr;
arr=sessionStorage.players;
players=JSON.parse(arr)

console.log(arr);
//杀手和平民数量



var allDeads;
if (sessionStorage.allDeads) {
    str=sessionStorage.allDeads;
    allDeads=JSON.parse(str)

}else {
    var allDeads=new Array();
    sessionStorage.allDeads=JSON.stringify(allDeads);
}


console.log("allDeads所有死亡信息"+sessionStorage.allDeads);

//初始状态
var stateInit = {
    step: {
        "1": true,
        "2": false,
        "3": false,
        "4": false
    },
    isClick: {
        "1": false,
        "2": false,
        "3": false,
        "4": false
    },

    day: 1
}
//构造死亡对象




var state;
var sessionState=sessionStorage.state;
if (sessionState) {
    state=JSON.parse(sessionStorage.state);
}else{
    state=stateInit;
}

function init(){
    var arrNode=[];
    sessionStorage.days=state.day;
    for (var k = 0; k <state.day; k++) {
        arrNode.push(
            '<div class="container">'
            +'<p class="days">'+"第"+(k+1)+"天"+'</p>'
            +'<ul>'
            +'<li class="step1">'
            +'<img class="img_1" src="images/js2-5_2.png">'
            +'<div class="triangle triangle-1">'+'</div>'+"杀手杀人"
            +'</li>'
            +'<div class="Message">'+'</div>'
            +'<li class="step2">'+'<div>'+'</div>'+"亡灵发表遗言"+'</li>'
            +'<li class="step3">'
            +'<img class="img_2" src="images/js2-5_1.png">'
            +'<div class="triangle  triangle-2">'+'</div>'+"玩家依次发言"
            +'</li>'
            +'<li class="step4">'+'<div>'+'</div>'+"全民投票"+'</li>'
            +'<div class="Message">'+'</div>'
            +'</ul>'
            +'</div>')
        var bug=arrNode.join("");
        $(".main").html(bug);
        //
        // $(".main").html(oodiv)
        // if (sessionStorage.state) {
        //   $(".step1").addClass("Rred");
        //   $(".triangle-1").addClass("triangle2");
        //
        //   }
    }
}
init();
//点击折叠
$(".days").on("click",function(){
    // $(this).parent().siblings("div").children("ul").toggle();
    $(this).parent().children("ul").toggle();
})
//变色与返回页面折叠
var asd=state.day-1;
$("ul:eq("+asd+")").parent().siblings(".container").find("ul").addClass("hidden");
$("ul:eq("+asd+")").parent().siblings(".container").find("ul li").addClass("Rred");
$("ul:eq("+asd+")").parent().siblings(".container").find("ul li .triangle").addClass("triangle2");





for (var i = 0; i < $(".main li").length; i++) {
    $(".main li").eq(i).attr("index",i);
    $(".main li").eq(i).on("click",function(){
            var index=parseInt($(this).attr("index"))+1;
            var stepGo = state.step[index];
            var canClick = state.isClick[index];
            if(!canClick) {
                if(stepGo) {

                    state.step[(index + 1)] = true;
                    //点击当前的置为true
                    state.isClick[index] = true;
                    this.style.backgroundColor = 'red';
                    $(this).children(".triangle").addClass("red");
                    if (index%4==1) {
                        sessionStorage.state=JSON.stringify(state);
                        location.href="js2-6.html"
                    }
                    if (index%4==2) {
                        sessionStorage.state=JSON.stringify(state);
                        alert("请亡灵发表遗言")
                    }
                    if (index%4==3) {
                        sessionStorage.state=JSON.stringify(state);
                        alert("请玩家依次发言")
                    }
                    if(index%4==0){
                        alert("进入投票页")
                        state.day++;
                        sessionStorage.state=JSON.stringify(state);
                        location.href="js2-7.html"

                    }
                } else {
                    alert('请按顺序操作');
                }
            } else {
                alert('请不要重复操作');
            }
        }
    )}

for ( i = 0; i < allDeads.length; i++) {
    if (i%2==0) {
        message="<p>"+"昨天"+(allDeads[i]+1)+"号死亡，被杀手杀死,他的身份是"+(players[allDeads[i]])+"</p>";
        var show=state.day-1;


    }else {
        message="<p>"+"昨天"+(allDeads[i]+1)+"号死亡，被玩家投死,他的身份是"+(players[allDeads[i]])+"</p>";
    }
    $(".Message:eq("+i+")").append(message)
    a=allDeads.length;
    if(!(a%2)==0){
        $(".step1:eq("+show+")").addClass("Rred")
        $(".triangle-1:eq("+show+")").addClass("triangle2");
    }
}

// //

总体来说对自己今天不是很满意，感觉脑子懵懵的，学得不太扎实，还需继续努力吧。

明天计划的事情：

1、明天首先要把今天所学的东西好好地巩固一下，然后继续做任务，感觉最近有些带急于求成了，很多知识点学得不是很扎实。

遇到的问题：

1、今天没有遇到太难的问题，遇到问题都百度了或者直接找师哥解决了。

收获：

1、今天学习了如何理解JS作用域与作用域链和如何阻止事件冒泡和默认事件：

1.背景介绍

JavaScript 中存在两种作用域：全局作用域和函数作用域，不存在块级作用域。全局作用域在浏览器中是window对象。

执行环境（execution context）是JavaScript 中最为重要的一个概念，定义了变量和函数访问其它数据的权力。

全局作用域： 

最外层函数定义的变量拥有全局作用域，即对任何内部函数来说，都是可以访问的。

局部作用域： 

和全局作用域相反，局部作用域一般只在固定的代码片段内可访问到，而对于函数外部是无法访问的。

像在C/C++中，花括号内中的每一段代码都具有各自的作用域，而且变量在声明它们的代码段之外是不可见的，但是javascript不同，并没有所谓的块级作用域，javascript的作用域是相对函数而言的。

js为每一个执行环境关联了一个变量对象。环境中定义的所有变量和函数都保存在这个对象中。 

全局执行环境是最外围的执行环境，全局执行环境被认为是window对象，因此所有的全局变量和函数都作为window对象的属性和方法创建的。 

js的执行顺序是根据函数的调用来决定的，当一个函数被调用时，该函数环境的变量对象就被压入一个环境栈中。而在函数执行之后，栈将该函数的变量对象弹出，把控制权交给之前的执行环境变量对象。 

2.知识剖析

变量的可访问性

1 非严格模式下不声明直接使用变量，变量会成为全局变量

2 和作用域对应的全局变量和局部变量（函数内变量）

作用域链

执行环境会创建变量对象的作用域链。

作用域链的用途是保证对执行环境有权访问的所有变量和函数的有序访问。

作用域链的前端始终是当前执行代码所在环境的变量对象。全局执行环境的变量对象始终是作用域链中最后一个对象。

这有两方面的影响：1 变量只能沿着自身所在的作用域链查找，直到找到为止，否则返回错误；2 隔离其它变量。

简化来说：就是一个调用变量形成的查找过程；把它再和执行环境结合起来包装形成作用域链。

3.常见问题

延长作用域链

4.解决方案

try - catch 语句的 catch 块

with 语句

在作用域链前端临时增加一个变量对象，该对象会在代码执行之后移除

5.编码实战

demo

更多讨论

问：严格模式下直接使用变量会发生什么？

答：抛出错误 ReferenceError: n is not defined

问：函数怎么查找变量

答：调用变量时，首先在当前函数对象中查找，如果没有找到就顺着作用域链向上，在外层对象中查找变量，如果没有找到再顺着作用域链向上查找，直到在最后Global对象中找到为止，否则报错。

问：js 有块级作用域？

答：没有块级作用域。

像在C/C++中，花括号内中的每一段代码都具有各自的作用域，而且变量在声明它们的代码段之外是不可见的，但是javascript不同，并没有所谓的块级作用域，javascript的作用域是相对函数而言的。