From 670beb7a40808e03e6eeb4e432234d0746844647 Mon Sep 17 00:00:00 2001
From: qianguyihao <qianguyihao@gmail.com>
Date: Fri, 29 Nov 2019 19:33:05 +0800
Subject: [PATCH] =?UTF-8?q?add:=20=E5=AE=9A=E6=97=B6=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...��介和navigator.userAgent&History&Location.md |  10 +-
 04-JavaScript基础/32-定时器.md                | 139 ++++++++++++
 .../BOM的常见内置方法和内置对象.md            |  29 ---
 .../08-JavaScript基础：定时器.md              | 202 ------------------
 4 files changed, 147 insertions(+), 233 deletions(-)
 create mode 100644 04-JavaScript基础/32-定时器.md
 delete mode 100644 06-前端基本功：CSS和DOM练习/08-JavaScript基础：定时器.md

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
+<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>
+```
+
+
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)
-
-
-## 我的公众号
-
-想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（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
-<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。
-
-实现效果：
-
-![](http://img.smyhvae.com/20180201_2240.gif)
-
-