今天完成的事情：任务二算是完成了，但是仍是瑕疵品，下面问题的不会
明天计划的事情：
遇到的问题：（遇到什么困难，怎么解决的） 

遇到的问题：

目的样式每行的前面的小方块样式不一样，暂时没有思路去做出一样的效果

我目前做成的样式

收获：

onchange事件 ：

文本内容或下拉菜单发生改变时发生

滑动条 ：

input     的     type="range"

<input type="range" id="slider" onchange="sliderChange()" value="4" min="4" max="18" step="1">

 min="4" max="18" 设置滑块最大值和最小值，即临界值
 step="1" 设置每次滑动的增量，

例如：设置step="3"时，滑块滑动时value的取值是 4,7,10,13,16,19；由于最大值是18，所以19是取不到的，因此滑块的最大位置也就只能滑到16的位置

修改默认样式采用

     appearance: none;来清除默认样式

注意兼容性:谷歌浏览器需 -webkit-appearance: none;方可有效，否则更改样式不生效

所谓的洗牌法乱序：

原理是取一个未知未知的元素与当前元素的一个位置交换，从而达到数据的的乱序

1 2 3 4 5 6  （取3）

1 2 6 4 5 3  （3和6位置交换）（取2）

1 5 6 4 2 3  （2和5位置交换）

依次来达乱序的结果 

什么是 HTML5 Web 存储?

　　使用HTML5可以在本地存储用户的浏览数据。

　　早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能.

　　数据以 键/值 对存在, web网页的数据只允许该网页访问使用。

localStorage 和 sessionStorage 

　　客户端存储数据的两个对象为：

• localStorage - 没有时间限制的数据存储
• sessionStorage - 针对一个 session 的数据存储（关闭窗口，存储的数据清空）

setItem存储value

　　用途：将value存储到key字段
　　用法：.setItem( key, value)
　　代码示例：

　sessionStorage.setItem("offsetTop", $(window).scrollTop());

　getItem获取value

　　用途：获取指定key本地存储的值
　　用法：.getItem(key)
　　代码示例：

var _offset = sessionStorage.getItem("offsetTop");

storage只能存储字符串的数据，对于JS中常用的数组或对象不能直接存储。所以在存储的时候，要把数据类型转化为字符串，提取的时候，再把字符串转换为原数据类型，可以采用JSON对象提供的parse和stringify对数据进行转换。

var data = { 1,2,3,4 };//这是一个数组

var send = JSON.stringify(data);//转换为字符串

sessionStorage.data = send;//存入

var get = sessionStorage.data;//读取

var new = JSON.parse(get);//重新转换为数组