今天完成的任务

1.js任务四的基本js

明天计划

2.任务四剩下的

遇到的问题

1.获取点击对象的class在整个数组中的位置

自己陷入了怪圈，一开始听师兄，用indexOf或者target，但是怎么都解决不来，后来经明月师兄指点一句。。。

发现原来那么简单的东西

代码如下

var a =document.getElementsByClassName('role-name');
var b =document.getElementsByClassName('kill');
var c =document.getElementsByClassName('role-name');

for (k=0; k<role.length; k++) {
    (function (k) {
             a[k].onclick = function (){
            
      for (m=0; m<role.length; m++) {           
         if (b[m].style.display !='none') {
                               b[m].style.display='none';         //重置之前被点击的kill类                      }
        }
                     b[k].style.display='block';
         return k;
       };
    })(k)
}

取出三个class的数组，然后我们的目标是提取出来点击获取的class的下标，一个for循环，本来是没有那个function（k）的，但是。。。。这样k只能返回最后一个，后来添加了function（k），也就是涉及到闭包。

2.localStorage

//构造的函数，role对象
function Role(name,state,date,reason) {
       this.name  =name;                   //玩家身份
    this.state =state;                  //状态，1是活着，0是死了
    this.date  =date;                   //第几天死的，初始值为0
    this.reason=reason;                 //死的方式，默认0，被杀1，投票2
}

var oRole = new Array (role.length);
for (i=0; i<role.length; i++) {
     oRole[i]=new Role(role[i],1,0,0);
}

这样一个对象，我把他存在localStorage里，一开始我是把上面这块放在了一个函数里面。

localStorage['oRole']=JSON.stringify(function（）);

结果发现，当我修改了里面的值，没办法把值传回去。。

这个不能用函数来传啊！！！如下就好了。。。

localStorage['oRole']=JSON.stringify(oRole);

3.关于字符串的相加

document.getElementsByClassName('btn')[n].innerHTML='第'+n+1+'天';

这个为什么得出的是把i和1当作字符串处理了，结果是01 11 21 这样的天数。。。。。

kill_info[n].innerHTML = m + 1 + '号被杀死，真实身份是' + oRole[m].name;

这样就能完美的算出来 m和1的和。。。求解。。。。

4.页面重新加载之后，之前的杀人信息和投票信息都会没掉

这个bug很莫名的被解决了，思路就是每次页面加载的时候，杀人信息和投票信息都重新加载。两个for循环

第一个，这个是加载主要的部分

for (n=0; n<day; n++) {
       var div = document.createElement('div');
    var button = document.createElement('button');
    var section = document.createElement('section');
    div.className='day-box';
    button.className='btn';
    section.className='day-info';
    section.innerHTML='<a class="kill">杀手杀人</a> <p class="kill-info"></p> <a class="ghost">死者遗    言</a>'+
        '<a class="argue">大家讨论</a> <a class="vote">投票杀人</a> <p class="vote-info"></p>';
    document.getElementsByClassName('main')[0].appendChild(div);
    document.getElementsByClassName('day-box')[n].appendChild(button);
    document.getElementsByClassName('day-box')[n].appendChild(section);
    document.getElementsByClassName('btn')[n].innerHTML='第'+n+1+'天';
}

第二个，这个是重新加载每天的杀人信息

for (n=0; n<day; n++) {
      for (m=0; m<role.length; m++) {
            if (oRole[m].date == n+1 && oRole[m].state == 0 && oRole[m].reason == 1) {
                  kill_info[n].innerHTML = m + 1 + '号被杀死，真实身份是' + oRole[m].name;
            break;
        }
    }
      for (m=0; m<role.length; m++) {
            if (oRole[m].date== n+1  && oRole[m].state==0 && oRole[m].reason==2 ) {
                  vote_info[n].innerHTML=m + 1 +'号被投票杀死，真实身份是'+oRole[m].name;
        }
   }
}

解决归解决，只是感觉这样的解决方式有点繁杂。有更好的思路么。。。

5.关于闭包

还没看懂！！！！还在继续看！！！

收获

以上