代码：https://github.com/mrfangbin/js/tree/master/task2

网页： http://jnshu.applinzi.com/task2/index.html

一句话总结，代码可读性差。

和Css一样，任务二明显是有弄成一道坎的企图。差点卡住我了。磨蹭的四天还是五天，做出了任务2和3的壳子，不中看也不中用。好在，归根到底，基本功能是有了。没有考虑ie11以下，只考虑了edge chrome 和firefox，已经惨不忍睹了。个人认为任务的砍还是偏多的。罗列一下，任务2和任务3我遇到的坎。

1、主页的汉堡图标点击唤出菜单，以及游戏选择的轮播图

     这个其实不算什么问题，顺带一提而已，css轮播图的任务做过的话，估计就不是什么问题。基本算是用css3的transition完成的。

2、input，type为range的样式自定义。

     考虑过用div和js模拟，这应该才是任务2的目的吧。犹豫再三还是觉得用css个性化定义。直接忽略在低版本ie效果。尽管如此还是在chrome上遇到问题了，edge有-ms-fill-lower 和-ms-fill-upper。firefox有-moz-range-progress。可chrome没有啊，于是chrome的range没能很好下显示颜色。这是待处理的问题。

3、参数设置页面的表单数据保存

     一开始直接用表单action发送，后来反应过来我不会后端代码，都考虑去网上扒一个node.js来了。又反应过来，我method是用的get啊，不是什么加密信息，直接把action设置为任务3的html，然后在任务3里用js调用location，在把字符串变成数组就行了。结果有遇到坎的，卧底词如果是英文，什么问题都没有。可卧底词如果是中文会被转成utf-8字符编码啊。有头疼了。

       然后有反应过来了，我可有用cookie啊，结果发现我不会用。查一遍w3c，明白了，用sessionStorage啊。本以为一帆风顺了。又遇到麻烦了。存储失败，失败，一直失败。得知sessionStorage不能存对象。好吧。记得看过有JSON对象。查书吧。用Json.stringify方法。可算把数据传递搞定了。测试兼容性吧。ie、edge失败，失败，一直失败。没道理啊，w3c说了ie8就支持了啊，查吧。是file协议不支持sessionStorage。

4、表单数据验证

      我几乎没验证，只用js检查了一下玩家总数和角色总算是否相等。卧底游戏是，卧底词汇必须输入而已。明显是取巧了，避过去这个问题了。

5、发牌页面翻拍效果

      这个勉强也是css的问题，方法还是很暴力，写两个div，一个display为none。然后css里写一个 class的样式transform: rotateY(180deg);用js添加class，配合原本有的transition:transform 1.75s ease-in 0s 就勉强实现翻牌效果。在用js把翻牌后display为none。非常费力不讨好的做法。

6、根据游戏类型，显示卡牌内容

      实现是实现了，可一点也不美。一开始还打算做两个，和参数设置页面一样（其实没必要，但是做了已经）。最后是，读取表单里面的内容，有killer和没有killer判断是杀人游戏，还是卧底游戏。用if语句实现，根据情况添加innerHTML的值。

7、随机排序

     这个其实没怎么卡住我。重排数组没什么困难，主要是算法的问题。一开始自己写了一个。不知道是不是幻觉，总感觉不太随机。然后查了几个洗牌算法，选了一个和自己思路最近（但明显），理解起来最容易的用了。

大概就这几个问题，回想起来真不多，也都不难。我现在是明白了html结构还重要了。我有三分之一的时间是被html没做好坑的。css和js没能分离。我根本搞不明白什么地方该分离，什么样是分离了。非常失败。整个任务2-3我都打算重新写了。太丑。可读性太差。我自己都看不懂。而且我现在只有基础js知识，不看书不能写东西的水平，jquery也还没看，估计会有重新发明轮子的可能性，还是蹩脚轮子。计划把任务4写了。然后去把jquery看一看，在把js高阶和DOM编程艺术重读一下。