add: 定时器
This commit is contained in:
@@ -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`)。
|
||||
|
||||
扫一扫,你将发现另一个全新的世界,而这将是一场美丽的意外:
|
||||
|
||||

|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user