今天完成的事：任务4就差个有限状态机就完成了；有限状态机理解起来不难不过还是有一点不知所措拿着不知道怎么用；

明天要完成的事：完成任务4；看资料；主要还是有限状态机的理解；

难题：虽然思路没问题了实现起来还是困难首先如何判断之前点击过或者执行过这个函数；还有如何点击选中一个人选中一个人并取消之前选中的人；

收获：

早上到公司把之前的思路理了一下，发现之前思路是错的：点击事件是有限制的必须要点击完上一个才能点击下一个；2根据玩家的死活状态来判断玩家的按钮的背景颜色；并且杀人页面同样需要读取死活状态并根据这个来更改背景颜色；也就是先读取每个人的死活状态并据此判断场上的人数和是否达到结束游戏的要求，并储存然后通过点击杀手杀人进入下一个页面的之后提取数据并根据玩家的死活状态修改背景颜色；并且对点击事件进行判断选择的人死活状态为死的话；提示并且重新选择；；正确选择之后；修改被选中者的死活属性并储存然后返回上一个页面；这个流程在重复一次之后在法官界面进行判断玩家投票页面结束；则time加一即时间加一天；

设置属性 - attr()

jQuery attr() 方法也用于设置/改变属性值。

attr() 方法也允许您同时设置多个属性。

(但是只发现他对html的修改)

添加新的 HTML 内容

我们将学习用于添加新内容的四个 jQuery 方法：

• append() - 在被选元素的结尾插入内容
• prepend() - 在被选元素的开头插入内容
• after() - 在被选元素之后插入内容
• before() - 在被选元素之前插入内容
• var txt1="<p>文本。</p>";              // 使用 HTML 标签创建文本 
•     var txt2=$("<p></p>").text("文本。");  // 使用 jQuery 创建文本  
•   var txt3=document.createElement("p");    txt3.innerHTML="文本。";               // 使用 DOM 创建文本 text with DOM   
•  $("body").append(txt1,txt2,txt3);        // 追加新元素
• 有3种方式创建html
• 
  

append/prepend 是在选择元素内部嵌入。

after/before 是在元素外面追加。

• remove() - 删除被选元素（及其子元素）
• empty() - 从被选元素中删除子元素

jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。

该参数可以是任何 jQuery 选择器的语法。

下面的例子删除 class="italic" 的所有 <p> 元素：

jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：

• addClass() - 向被选元素添加一个或多个类
• removeClass() - 从被选元素删除一个或多个类
• toggleClass() - 对被选元素进行添加/删除类的切换操作
• css() - 设置或返回样式属性

（这就是任务3要用的自行添加html和css）

jQuery width() 和 height() 方法

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。

height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。

jQuery innerWidth() 和 innerHeight() 方法

innerWidth() 方法返回元素的宽度（包括内边距）。

innerHeight() 方法返回元素的高度（包括内边距）。

jQuery outerWidth() 和 outerHeight() 方法

outerWidth() 方法返回元素的宽度（包括内边距和边框）。

outerHeight() 方法返回元素的高度（包括内边距和边框）

为啥要异步：

Javascript语言的执行环境是"单线程"（single thread，就是指一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务，以此类推）。

这种模式的好处是实现起来比较简单，执行环境相对单纯；坏处是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。常见的浏览器无响应（假死），往往就是因为某一段Javascript代码长时间运行（比如死循环），导致整个页面卡在这个地方，其他任务无法执行。

为了解决这个问题，Javascript语言将任务的执行模式分成两种：同步（Synchronous）和异步（Asynchronous）。

“同步模式" 就是上一段的模式，后一个任务等待前一个任务结束，然后再执行，程序的执行顺序与任务的排列顺序是一致的、同步的；"异步模式"则完全不同，每一个任务有一个或多个回调函数（callback），前一个任务结束后，不是执行后一个任务，而是执行回调函数，后一个任务则是不等前一个任务结束就执行，所以程序的执行顺序与任务的排列顺序是不一致的、异步的。

“异步模式" 非常重要。在浏览器端，耗时很长的操作都应该异步执行，避免浏览器失去响应，最好的例子就是Ajax操作。在服务器端，"异步模式"甚至是唯一的模式，因为执行环境是单线程的，如果允许同步执行所有http请求，服务器性能会急剧下降，很快就会失去响应。

异步的几种处理办法：

一、回调函数（callback）

二、事件监听

三、发布/订阅

四、promise对象（promise 模式）

五、优雅的async/await

有限状态机：

声明一个对象

var fsm = new StateMachine({ 

当前状态

        init: 'solid',

过渡到其他状态的方法：

 transitions: [

名字这个是状态

      { name: 'melt',     from: 'solid',  to: 'liquid' }, 

      { name: 'freeze',   from: 'liquid', to: 'solid'  }, 

      { name: 'vaporize', from: 'liquid', to: 'gas'    }, 

      { name: 'condense', from: 'gas',    to: 'liquid' }

 ], 

在转换生命周期中自动调用的观察器方法：

 methods:

{      onMelt:     function() { console.log('I melted')    }, 

      onFreeze:   function() { console.log('I froze')     }, 

      onVaporize: function() { console.log('I vaporized') }, 

      onCondense: function() { console.log('I condensed') }    }  });