webcourse/Webcourse
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
qianguyihao 2018-02-01 22:59:52 +08:00
parent 4d8585462c
commit 0cc23e835e
1 changed files with 1 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
04-前端基础练习/08-JavaScript基础：定时器.md
View File

@ -1,6 +1,5 @@
## 定时器的常见方法 ## 定时器的常见方法
- setInterval()：循环定时器。周而复始的执行（循环执行） - setInterval()：循环定时器。周而复始的执行（循环执行）
@ -20,7 +19,6 @@
},1000); },1000);
``` ```
**方式二：** **方式二：**
每间隔一秒打印一次： 每间隔一秒打印一次：
@ -35,7 +33,6 @@
``` ```
### 定时器高级：清除定时器 ### 定时器高级：清除定时器
定时器的返回值可以用来清除定时器。具体方法是：假设定时器setInterval()的返回值是`参数1`，那么`clearInterval(参数1)`就可以清除定时器。 定时器的返回值可以用来清除定时器。具体方法是：假设定时器setInterval()的返回值是`参数1`，那么`clearInterval(参数1)`就可以清除定时器。
@ -62,10 +59,8 @@ setTimeout()的道理是一样的。
``` ```
## 定时器举例 ## 定时器举例
### 举例一：5秒后关闭网页两侧的广告栏 ### 举例一：5秒后关闭网页两侧的广告栏
假设网页两侧的广告栏为两个img标签，它们的样式为： 假设网页两侧的广告栏为两个img标签，它们的样式为：
@ -98,7 +93,6 @@ setTimeout()的道理是一样的。
``` ```
### 举例二：关闭京东顶部广告栏（带动画效果关闭） ### 举例二：关闭京东顶部广告栏（带动画效果关闭）
我们在[之前的文章](https://github.com/smyhvae/Web/blob/master/03-JavaScript%E5%9F%BA%E7%A1%80/07-JavaScript%E5%9F%BA%E7%A1%80%EF%BC%9ADOM%E6%93%8D%E4%BD%9C.md)中做过这道题。但是现在，要求广告栏在关闭的时候，带动画效果：**点击关闭按钮后，顶部广告栏慢慢地变透明，直到全部关闭。** 我们在[之前的文章](https://github.com/smyhvae/Web/blob/master/03-JavaScript%E5%9F%BA%E7%A1%80/07-JavaScript%E5%9F%BA%E7%A1%80%EF%BC%9ADOM%E6%93%8D%E4%BD%9C.md)中做过这道题。但是现在，要求广告栏在关闭的时候，带动画效果：**点击关闭按钮后，顶部广告栏慢慢地变透明，直到全部关闭。**
@ -195,7 +189,6 @@ setTimeout()的道理是一样的。
</html> </html>
``` ```
代码解释： 代码解释：
注意，我们要实现给顶部的div加一个行内样式`style="opacity: 1"`，然后才能通过定时器判断`topBanner.style.opacity`的值。 注意，我们要实现给顶部的div加一个行内样式`style="opacity: 1"`，然后才能通过定时器判断`topBanner.style.opacity`的值。
@ -204,11 +197,6 @@ setTimeout()的道理是一样的。
实现效果： 实现效果：
![](http://img.smyhvae.com/20180201_2240.gif)
20180201_2240.gif