今天完成的事情：

首先修改了之前没写的滑块，清除了系统默认的样式，点击特效，分别设定横条的样式，和滑块的样式。

接下来写js关联 text框和 range。第一次写失败，直接关联两个input 的 value，也许只是因为他们在读取阶段关联了就不再关联了。

看了下师兄的代码，需要使用onchange进行关联。搜索了下onchange：

重写一下关联：

写完试了一下，并没有关联到。我这个相当于给 range 赋值 text的值。而没有给range赋值text的值。

在写一次 range = text就完成了。，同时也出现了卡顿，也就是滑块代表的数字并没有即时反应在输入框内。

后面改用的oninput进行关联，因为oninput是即时关联，而onchange是失去焦点时触发，所以会有一些卡顿的现象。

然后试着把text框也写成即时触发的oninput，导致里面数字一旦输入错误或者删除立马跳出弹框，所以又改成了onchange，输入完成时在改变。

oninput的：

关联了加号减号按钮和 range ，text的值

接下来就是如何创建动态的杀手平民的分配。

首先是根据游戏规则创建条件，然后点击分配根据获取的range的value进行生产乱序数组，但是产生一个小问题

就是数组的储存，每次点击都把新的数组加进了空数组，想了想试因为空数组没有写进点击事件的函数方法里，空数组写进去相当于每次点击重置，解决。

因为不知道如何使用js创建元素，搜索了下如何创建：

看了下师兄的代码，分解他的步骤：

师兄使用的是createElement进行创建，样式都是事先调好的，

变量= 获取ul 的节点，

变量=createElement 创建子级 li               

变量=createTextNode 创建文本 杀手1人      

变量=createElement创建元素 span              

使用变量.appendChild(变量)进行生成，

ul.appendChild(li)生成一个新的子级li

li。appendChild（text）添加文本，再添加span(也就是文字前的格子），

样式都是事先调好写在css里的，所以只需要调用生成就行了，

然后根据杀手平民的数量，写一个循环动态创建就行了。

写的时候遇到点问题

把设定写进函数里声明，而不是写进 if 判断里面的时候，只会生成一个杀手一个平民，不知道是不是作用域问题？

我觉得应该是，分别把声明写进if判断里面就没事了。

想了一下应该是作用域的问题。我的let a 作用于块级，var作用于函数内，if，＋ for的块级作用域太深，导致无法读取到函数表层的var声明吧，这是我的解读。

然后和生成动态数组一样，每次点击需要清空原有产生的。遍历数组长度，删除之前产生的每一个。

后面写进入游戏的按钮，想写一个如果填充的数组长度为0 时，跳出提示框，并且不进行跳转，因为把数组组成和打乱都放在设置人数按钮的点击事件上了，导致数组无法导出，尝试了return，设置全局变量=arr，依然报错，只能把生成数组写到进入游戏里了。

第二页的跳转页面前两天就写完了，接下来就是攻略一下第三页的法官页面，

思路是根据数组长度，建立动态的格子，然后再把前面页面储存的乱序数组填到分配到建立的格子里。

基本上和思路一样。

直接把以前写好的任务7的代码搬过来，优化部分不合适的尺寸，完成。和第一页配置的差不多吧，直接生成就完了。样式都是先写好的。

就是hidden开始忘记添加进父级盒子，其他的按着html写好的盒子来就行。

今天基本就这样了。

明天计划的事情： 

开始任务4，估计又得卡好几天

遇到的问题和收获：

range的滑动特效

暂时没有思路，先搁置。

看了下搜索到的方法，监听滑块，生成一个新的横向条，长度等同于滑块左边的长度，然后颜色可以自由设定。

但是看了下百度是示例确实没看懂。

其中的css。（）是设置样式倒是理解，linear-gradient是渐变色属性，后面的。mousemove是鼠标移动，但是这个$(this)没搞懂，

后面知道这个this根据执行的时候指向调用它的对象。由于看不懂，问了下师兄，根据师兄的说法，这个是vue的写法，

首先是这个input的value值，字符串转数字，然后@input是指这个事件，获取这个事件的值，然后就是改变style背景色渐变属性，根据ratio的位置（value）加百分比进行变色，但是js部分的渐变属性没去了解，尝试更改几次都失败了，先搁置。

尝试更改颜色，变为其他渐变的颜色的话是成功的，但是变更为一个颜色的话，就直接整条都变成一个颜色了。

现在变成鼠标挪过去就变成深色了，只更改了颜色但是效果变成了鼠标过去就变色，类似于hover效果，不可控。还是得看看如何用监听属性，进行动态覆盖颜色。vue的实现方法暂时没能解读。先搁置了，等后面慢慢研究。

js任务上要学的东西比起css的难不少。很多属性，变量以及jQuery的用法之类的，开始用老是报错，不是忘了加“”，就是忘了是等于号还是 . 号，使用变量 = dom.$(")  进行赋值还给我报错几次，我也是佛了。。

对于变量如何引出函数还是有些懵逼，虽然查了教程，是说设置全局变量，然后在函数里 赋值要引出来的变量，依然是报错。