今天完成：

1、今天把任务2的页面写完，在制作底部滑块的时候遇到了困难，由于滑块属性是h5新加入的， 所以浏览器对其支持不是很好，用js写的话还不是很熟练，所以研究了一下，最后在国宝师兄的指点下成功完成！！

2、在思考完成任务的思路，正常的逻辑就是跳转后先设置人数，这一步也可以使用滑块进行设置，所以滑块和input的数据应该是相互作用的；然后在人数里显示出杀手几人，平民几人，这一步的规则要实现设置好，使用if判断语句应该能实现，然后就是点击设置随机分配身份，重复点击可以使身份打乱重分，使用数组乱序实现，大概的流程就是这样吧。

明天计划：

进行任务的逻辑部分，这应该是困难的，虽然有思路了，但是把想法用代码呈现出来就考验对基础知识的理解了，

遇到困难：

在定义button的时候出现了不知什么原因的下沉，包裹在div里的按钮竟然飘出了很远，虽然最后使用定位实现复原，但具体是什么愿意还不清楚。

今天主要就是滑块的部分耽误时间了，幸亏国宝的代码，这里贴一波，

.slider-block{outline: none; /*去掉点击时出现的外边框*/   -webkit-appearance: none;   -moz-appearance: none;            appearance: none; /*这三个是去掉那条线原有的默认样式，划重点！！*/  width: 30%;   height: 0.3rem;    background: orange; /*这三个是设置滑块下面那条线的样式*/        }       

 input[type="range"]::-webkit-slider-thumb { /*::-webkit-slider-thumb是代表给滑块的样式进行变更*/   -webkit-appearance: none;    -moz-appearance: none;  appearance: none; /*//这三个是去掉滑块原有的默认样式，划重点！！*/   -webkit-box-shadow:0 0 2px ;/*设置滑块的阴影*/     width: 2.6rem;  height:1.6rem;   background: url("images/js2-d_03.png");            background-size: cover; /*//这几个是设置滑块的样式*/    }

收获：

学会了使用css自定义range滑块的样式