diff --git a/04-JavaScript基础/31-BOM简介和navigator.userAgent&History&Location.md b/04-JavaScript基础/31-BOM简介和navigator.userAgent&History&Location.md index ed529d5..2957d6e 100644 --- a/04-JavaScript基础/31-BOM简介和navigator.userAgent&History&Location.md +++ b/04-JavaScript基础/31-BOM简介和navigator.userAgent&History&Location.md @@ -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 个页面。 +备注:浏览器的前进按钮、后退按钮,在这个位置: + +![](http://img.smyhvae.com/20180201_2146.png) + + ## Location 对象 Location 对象:封装了浏览器地址栏的 URL 信息。 @@ -204,14 +211,13 @@ console.log(location.href); // 获取当前页面的url 路径 ### Location 对象的方法 - **方法1**: ```javascript location.assign(str); ``` -解释:用来跳转到其他的页面,作用和直接修改`location.href`一样 +解释:用来跳转到其他的页面,作用和直接修改`location.href`一样。 **方法2**: diff --git a/04-JavaScript基础/32-定时器.md b/04-JavaScript基础/32-定时器.md new file mode 100644 index 0000000..e5bd2d8 --- /dev/null +++ b/04-JavaScript基础/32-定时器.md @@ -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 + + +``` + +## 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 + + +``` + +5秒后关闭广告栏的js代码为: + +```html + +``` + + diff --git a/04-JavaScript基础/BOM的常见内置方法和内置对象.md b/04-JavaScript基础/BOM的常见内置方法和内置对象.md index 4aa166e..bc33869 100644 --- a/04-JavaScript基础/BOM的常见内置方法和内置对象.md +++ b/04-JavaScript基础/BOM的常见内置方法和内置对象.md @@ -249,33 +249,4 @@ window.navigator 的一些属性可以获取客户端的一些信息。 ![](http://img.smyhvae.com/20180201_2140.png) -## history对象 - -1、历史记录管理 - -2、后退: - -- history.back() - -- history.go(-1):0是刷新 - -3、前进: - -- history.forward() - -- history.go(1) - -用的不多。因为浏览器中已经自带了这些功能的按钮: - -![](http://img.smyhvae.com/20180201_2146.png) - - -## 我的公众号 - -想学习**代码之外的技能**?不妨关注我的微信公众号:**千古壹号**(id:`qianguyihao`)。 - -扫一扫,你将发现另一个全新的世界,而这将是一场美丽的意外: - -![](http://img.smyhvae.com/2016040102.jpg) - diff --git a/06-前端基本功:CSS和DOM练习/08-JavaScript基础:定时器.md b/06-前端基本功:CSS和DOM练习/08-JavaScript基础:定时器.md deleted file mode 100644 index 0257cfa..0000000 --- a/06-前端基本功:CSS和DOM练习/08-JavaScript基础:定时器.md +++ /dev/null @@ -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 - - -``` - -## 定时器举例 - -### 举例一:5秒后关闭网页两侧的广告栏 - -假设网页两侧的广告栏为两个img标签,它们的样式为: - - -```html - - -``` - -5秒后关闭广告栏的js代码为: - -```html - -``` - - -### 举例二:关闭京东顶部广告栏(带动画效果关闭) - -我们在[之前的文章](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 - - - - - - - - -
-
- - × -
-
- - - - - -``` - -代码解释: - -注意,我们要实现给顶部的div加一个行内样式`style="opacity: 1"`,然后才能通过定时器判断`topBanner.style.opacity`的值。 - -定时器的返回值其实是number类型的,但我们习惯性地设置初始值为null。 - -实现效果: - -![](http://img.smyhvae.com/20180201_2240.gif) - -