add: 定时器
This commit is contained in:
qianguyihao
parent
f96c37b47a
commit
670beb7a40
@ -160,6 +160,8 @@ history.go( 1 ); // 向前跳转一个页面，相当于 history.forward()
|
||||
|
||||
history.go( 2 ); // 表示向前跳转两个页面
|
||||
|
||||
history.go( 0 ); // 刷新当前页面
|
||||
|
||||
history.go( -1 ); // 向后跳转一个页面，相当于 history.back()
|
||||
|
||||
history.go( -2 ); // 向后跳转两个页面
|
||||
@ -168,6 +170,11 @@ history.go( -2 ); // 向后跳转两个页面
|
||||
|
||||
解释：向前/向后跳转 n 个页面。
|
||||
|
||||
备注：浏览器的前进按钮、后退按钮，在这个位置：
|
||||
|
||||
|
||||
|
||||
|
||||
## Location 对象
|
||||
|
||||
Location 对象：封装了浏览器地址栏的 URL 信息。
|
||||
@ -204,14 +211,13 @@ console.log(location.href); // 获取当前页面的url 路径
|
||||
|
||||
### Location 对象的方法
|
||||
|
||||
|
||||
**方法1**：
|
||||
|
||||
```javascript
|
||||
location.assign(str);
|
||||
```
|
||||
|
||||
解释：用来跳转到其他的页面，作用和直接修改`location.href`一样
|
||||
解释：用来跳转到其他的页面，作用和直接修改`location.href`一样。
|
||||
|
||||
**方法2**：
|
||||
|
||||
|
||||
139
04-JavaScript基础/32-定时器.md
Normal file
139
04-JavaScript基础/32-定时器.md
Normal file
@ -0,0 +1,139 @@
|
||||
|
||||
|
||||
## 定时器的常见方法
|
||||
|
||||
- setInterval()：循环调用。将一段代码，**每隔一段时间**执行一次。（循环执行）
|
||||
|
||||
- setTimeout()：延时调用。将一段代码，等待一段时间之后**再执行**。（只执行一次）
|
||||
|
||||
备注：在实际开发中，二者是可以根据需要，互相替代的。
|
||||
|
||||
## setInterval() 的使用
|
||||
|
||||
`setInterval()`：循环调用。将一段代码，**每隔一段时间**执行一次。（循环执行）
|
||||
|
||||
**参数**：
|
||||
|
||||
- 参数1：回调函数，该函数会每隔一段时间被调用一次。
|
||||
|
||||
- 参数2：每次调用的间隔时间，单位是毫秒。
|
||||
|
||||
**返回值**：返回一个Number类型的数据。这个数字用来作为定时器的**唯一标识**，方便用来清除定时器。
|
||||
|
||||
### 定义定时器
|
||||
|
||||
**方式一：**匿名函数
|
||||
|
||||
每间隔一秒，将 数字 加1：
|
||||
|
||||
```javascript
|
||||
let num = 1;
|
||||
setInterval(function () {
|
||||
num ++;
|
||||
console.log(num);
|
||||
}, 1000);
|
||||
```
|
||||
|
||||
**方式二：**
|
||||
|
||||
每间隔一秒，将 数字 加1：
|
||||
|
||||
```javascript
|
||||
setInterval(fn,1000);
|
||||
|
||||
num ++;
|
||||
console.log(num);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
### 清除定时器
|
||||
|
||||
定时器的返回值是作为这个定时器的**唯一标识**，可以用来清除定时器。具体方法是：假设定时器setInterval()的返回值是`参数1`，那么`clearInterval(参数1)`就可以清除定时器。
|
||||
|
||||
setTimeout()的道理是一样的。
|
||||
|
||||
代码举例：
|
||||
|
||||
```html
|
||||
<script>
|
||||
let num = 1;
|
||||
|
||||
const timer = setInterval(function () {
|
||||
console.log(num); //每间隔一秒，打印一次num的值
|
||||
num ++;
|
||||
if(num === 5) { //打印四次之后，就清除定时器
|
||||
clearInterval(timer);
|
||||
}
|
||||
|
||||
}, 1000);
|
||||
</script>
|
||||
|
||||
```
|
||||
|
||||
## setTimeout() 的使用
|
||||
|
||||
`setTimeout()`：延时调用。将一段代码，等待一段时间之后**再执行**。（只执行一次）
|
||||
|
||||
**参数**：
|
||||
|
||||
- 参数1：回调函数，该函数会每隔一段时间被调用一次。
|
||||
|
||||
- 参数2：每次调用的间隔时间，单位是毫秒。
|
||||
|
||||
**返回值**：返回一个Number类型的数据。这个数字用来作为定时器的**唯一标识**，方便用来清除定时器。
|
||||
|
||||
### 定义和清除定时器
|
||||
|
||||
代码举例：
|
||||
|
||||
```javascript
|
||||
const timer = setTimeout(function() {
|
||||
console.log(1); // 3秒之后，再执行这段代码。
|
||||
}, 3000);
|
||||
|
||||
clearTimeout(timer);
|
||||
|
||||
```
|
||||
|
||||
代码举例：（箭头函数写法）
|
||||
|
||||
```javascript
|
||||
setTimeout(() => {
|
||||
console.log(1); // 3秒之后，再执行这段代码。
|
||||
}, 3000);
|
||||
```
|
||||
|
||||
|
||||
### setTimeout() 举例：5秒后关闭网页两侧的广告栏
|
||||
|
||||
假设网页两侧的广告栏为两个img标签，它们的样式为：
|
||||
|
||||
|
||||
```html
|
||||
<style>
|
||||
...
|
||||
...
|
||||
|
||||
</style>
|
||||
|
||||
```
|
||||
|
||||
5秒后关闭广告栏的js代码为：
|
||||
|
||||
```html
|
||||
<script>
|
||||
window.onload = function () {
|
||||
//获取相关元素
|
||||
var imgArr = document.getElementsByTagName("img");
|
||||
//设置定时器：5秒后关闭两侧的广告栏
|
||||
setTimeout(fn,5000);
|
||||
function fn(){
|
||||
imgArr[0].style.display = "none";
|
||||
imgArr[1].style.display = "none";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
|
||||
@ -249,33 +249,4 @@ window.navigator 的一些属性可以获取客户端的一些信息。
|
||||
|
||||
|
||||
|
||||
## history对象
|
||||
|
||||
1、历史记录管理
|
||||
|
||||
2、后退：
|
||||
|
||||
- history.back()
|
||||
|
||||
- history.go(-1)：0是刷新
|
||||
|
||||
3、前进：
|
||||
|
||||
- history.forward()
|
||||
|
||||
- history.go(1)
|
||||
|
||||
用的不多。因为浏览器中已经自带了这些功能的按钮：
|
||||
|
||||
|
||||
|
||||
|
||||
## 我的公众号
|
||||
|
||||
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
|
||||
|
||||
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,202 +0,0 @@
|
||||
|
||||
|
||||
## 定时器的常见方法
|
||||
|
||||
- setInterval()：循环定时器。周而复始的执行（循环执行）
|
||||
|
||||
- setTimeout()：定时炸弹。用完以后立刻报废（只执行一次）
|
||||
|
||||
|
||||
### 定义定时器的方式
|
||||
|
||||
**方式一：**匿名函数
|
||||
|
||||
每间隔一秒打印一次：
|
||||
|
||||
```javascript
|
||||
setInterval(function () {
|
||||
console.log(1);
|
||||
},1000);
|
||||
```
|
||||
|
||||
**方式二：**
|
||||
|
||||
每间隔一秒打印一次：
|
||||
|
||||
|
||||
```javascript
|
||||
setInterval(fn,1000);
|
||||
|
||||
function fn(){
|
||||
console.log(1);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
### 定时器高级：清除定时器
|
||||
|
||||
定时器的返回值可以用来清除定时器。具体方法是：假设定时器setInterval()的返回值是`参数1`，那么`clearInterval(参数1)`就可以清除定时器。
|
||||
|
||||
setTimeout()的道理是一样的。
|
||||
|
||||
代码举例：
|
||||
|
||||
|
||||
|
||||
```html
|
||||
<script>
|
||||
var num = 1;
|
||||
|
||||
var timer = setInterval(function () {
|
||||
console.log(num); //每间隔一秒，打印一次num的值
|
||||
num ++;
|
||||
if(num ===5) { //打印四次之后，就清除定时器
|
||||
clearInterval(timer);
|
||||
}
|
||||
|
||||
}, 1000);
|
||||
</script>
|
||||
|
||||
```
|
||||
|
||||
## 定时器举例
|
||||
|
||||
### 举例一：5秒后关闭网页两侧的广告栏
|
||||
|
||||
假设网页两侧的广告栏为两个img标签，它们的样式为：
|
||||
|
||||
|
||||
```html
|
||||
<style>
|
||||
...
|
||||
...
|
||||
|
||||
</style>
|
||||
|
||||
```
|
||||
|
||||
5秒后关闭广告栏的js代码为：
|
||||
|
||||
```html
|
||||
<script>
|
||||
window.onload = function () {
|
||||
//获取相关元素
|
||||
var imgArr = document.getElementsByTagName("img");
|
||||
//设置定时器：5秒后关闭两侧的广告栏
|
||||
setTimeout(fn,5000);
|
||||
function fn(){
|
||||
imgArr[0].style.display = "none";
|
||||
imgArr[1].style.display = "none";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
|
||||
### 举例二：关闭京东顶部广告栏（带动画效果关闭）
|
||||
|
||||
我们在[之前的文章](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)中做过这道题。但是现在，要求广告栏在关闭的时候，带动画效果：**点击关闭按钮后，顶部广告栏慢慢地变透明，直到全部关闭。**
|
||||
|
||||
我们可以用定时器来做。完整版代码如下：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style>
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.top-banner {
|
||||
background-color: pink;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.w {
|
||||
width: 1210px;
|
||||
margin: 10px auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 1210px;
|
||||
height: 80px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
a {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
color: #fff;
|
||||
background-color: #000;
|
||||
text-decoration: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
font: 700 14px/20px "simsum";
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hide {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.search {
|
||||
width: 1210px;
|
||||
height: 80px;
|
||||
background-color: green;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="top-banner" id="topBanner" style="opacity: 1">
|
||||
<div class="w">
|
||||
<img src="blue" alt=""/>
|
||||
<a href="#" id="closeBanner">×</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="search">
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
//需求：点击关闭按钮，先让top-banner这个盒子透明度变为0，紧接着display：none;
|
||||
|
||||
//1.获取事件源和相关元素
|
||||
var closeBanner = document.getElementById("closeBanner");
|
||||
var topBanner = document.getElementById("topBanner");
|
||||
//定义定时器
|
||||
var timer = null;
|
||||
//2.绑定事件
|
||||
closeBanner.onclick = function () {
|
||||
//3.书写事件驱动程序（定时器，透明度变为0，清除定时器，并隐藏盒子）
|
||||
timer = setInterval(function () {
|
||||
topBanner.style.opacity -= 0.1;
|
||||
if (topBanner.style.opacity < 0) {
|
||||
topBanner.style.display = "none";
|
||||
clearInterval(timer);
|
||||
}
|
||||
}, 50);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
代码解释：
|
||||
|
||||
注意，我们要实现给顶部的div加一个行内样式`style="opacity: 1"`，然后才能通过定时器判断`topBanner.style.opacity`的值。
|
||||
|
||||
定时器的返回值其实是number类型的，但我们习惯性地设置初始值为null。
|
||||
|
||||
实现效果：
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user