发表于： 2019-05-15 21:50:54
1 811
今天完成的事情：
1.将数组乱序
js
2.CSS实现自定义滑动条(input)
1）建立一个input元素，最小值为4，最大值为18，每次加1，默认值为8。
- <input type="range" min="4" max="18" step="1" value="8">
- 2)修改默认样式
- css
-
- 3）js关联滑动条与输入框的value值
- html，滑动条
-
- js
-
- 4）两边加减号点击使滑动条value值变化
明天计划的事情：
1.开始js任务3
2.检查js任务2
2.继续学习JavaScript
遇到的问题：
暂无
收获：
1.Input Range 对象
Range是HTML5中新出现的滑块控件，也是常见的控件的之一，不过这个控件的原始样式略丑，所以想对它进行一些改造。需要注意的是Internet Explorer 9及更早IE版本并不支持这个控件。
滑动条各浏览器原始样式
| 属性 | 描述 |
|---|---|
| max | 设置或返回滑块控件的最大值 |
| min | 设置或返回滑块控件的最小值 |
| step | 设置或返回每次拖动滑块控件时的递增量 |
| value | 设置或返回滑块控件的 value 属性值 |
| defaultValue | 设置或返回滑块控件的默认值 |
| autofocus | 设置或返回滑块控件在页面加载后是否应自动获取焦点 |
需要完成以下的五个步骤
- 去除系统默认的样式；
- 给滑动轨道(track)添加样式；
- 给滑块(thumb)添加样式；
- 根据滑块所在位置填充进度条；
- 实现多浏览器兼容。
最终运行效果
返回列表
评论