今天完成的事情：今天状态非常差，脑袋昏昏沉沉的，只学习了一点juqery。明天要好好休息一下了。

明天计划的事情：明天花一天的时间把CSS任务都提交了。

遇到的困难： js任务二添加滑动条后，如何将滑动条和输入的总人数相匹配？

收获：

主要还是学习了滑动条。首先，可以通过设置<input type="range" value=0>来实现滑动条样式，然后通过设置max,min,step属性来设置滑动条的最大，最小，还有递增量。defaultValue设置默认值。autofocus设置页面加载后是否自动获取焦点。

关于滑动条如何美化。比较简单的方法是可以直接通过css样式完成滑动条样式的美化。美化滑动条样式，需要以下几个步骤。

1.去除系统默认样式。

2.给滑动轨道添加样式。

3.给滑块添加样式

4.根据滑块填充位置填充进度条。

5.兼容性。

关于去除系统默认样式。代码如下

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
}   

给滑动条添加样式：

input[type=range]::-webkit-slider-runnable-track {
    height: 15px;
    border-radius: 10px; /*将轨道设为圆角的*/
    box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112; /*轨道内置阴影效果*/
}

原始的控件获取到焦点时，会显示包裹整个控件的边框，所以还需要把边框取消。

input[type=range]:focus {
    outline: none;
}

然后对滑块样式进行变更

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 25px;
    width: 25px;
    margin-top: -5px; /*使滑块超出轨道部分的偏移量相等*/
    background: #ffffff;
    border-radius: 50%; /*外观设置为圆形*/
    border: solid 0.125em rgba(205, 224, 230, 0.5); /*设置边框*/
    box-shadow: 0 .125em .125em #3b4547; /*添加底部阴影*/
}

一个滑动条初步就做出来了