JavaScript提高班笔记(四)

// 5. 注意此元素需要添加定位， 才能使用element.style.left

var div = document.querySelector(‘div’);

var timer = setInterval(function() {

if (div.offsetLeft >= 400) {

// 停止动画 本质是停止定时器

clearInterval(timer);

}

div.style.left = div.offsetLeft + 1 + ‘px’;

}, 30);

6.2函数封装

---

– 注意函数需要传递2个参数

1. 动画对象

2. 移动到的距离

夏雨荷

6.3给不同元素记录不同定时器

---

• 如果多个元素都使用这个动画函数，每次都要var 声明定时器，我们可以给不同的元素使用不同的定时器(自己专门用自己的定时器)

• 核心原理：利用JS是一门动态语言，可以很方便的给当前对象添加属性

点击夏雨荷才走

夏雨荷

6.4缓动动画

---

– 缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来

思路：

1. 让盒子每次移动的距离慢慢变小，速度就会慢慢落下来

2. 核心算法：（目标值 - 现在的位置）/ 10 作为每次移动的距离 步长

3. 停止的条件：让当前盒子位置等于目标位置就停止定时器

4. 注意步长值需要取整

点击夏雨荷才走

夏雨荷

• 匀速动画 就是 盒子是当前的位置 + 固定的值 10

• 缓动动画就是 盒子当前的位置 + 变化的值(目标值 - 现在的位置) / 10）

6.5缓存动画多个目标值之间移动

---

点击夏雨荷到500

点击夏雨荷到800

夏雨荷

6.6缓存动画添加回调函数

---

回调函数原理：

• 函数可以作为一个参数，将这个函数作为参数传到另一个函数里面

• 当那个函数执行完之后，再执行传进去的这个函数，这个过程就叫做回调

• 回调函数写的位置：定时器结束的位置

点击夏雨荷到500

点击夏雨荷到800

夏雨荷

6.7动画函数封装到JS文件

---

1. 新建一个JS文件： animate.js

2. HTML文件引入JS文件

7.本地存储

========================================================================

– 本地存储特性：

1. 数据存储在用户浏览器中

2. 设置、读取方便、甚至页面刷新不丢失数据

3. 容量较大、sessionStrorage 约5M，localStrage约20M

4. 只能存储字符串，可以讲对象JSON。stringfy()编码后存储

• 生命周期为关闭浏览器窗口

• 在同一个窗口(页面)下数据可以共享

• 以键值对的形式存储使用

7.1window.sessionStorage

---

1. 存储数据

sessionStorage.setItem(key,value)

2. 获取数据

sessionStorage.getItem(key)

3. 删除数据

sessionStorage.removeItem(key)

4. 删除所有数据

sessionStorage.clear()

存储数据

获取数据

删除数据

清空所有数据

7.2window.localStorage

---

1. 声明周期永久生效，除非手动删除，否则关闭页面也会存在

2. 可以多窗口（页面）共享（同一浏览器可以共享）

3. 以键值对的形式存储使用

4. 存储数据：

localStorage.setltem(key,value)

2. 获取数据：

localStorage.getltem(key)

3. 删除数据：

localStorage.removeltem(key)

4. 删除所有数据：

localStorage.clear()

存储数据

获取数据

删除数据

清空所有数据