Merge pull request soyaine#49 from dashnowords/master

soyaine · web-flow · commit 84f6d0bfcb2a · 2018-10-30T15:13:58.000+08:00
由于误删了自己的仓库，一部分示意图链接失效了，已更新
diff --git a/.gitattributes b/.gitattributes
@@ -0,0 +1 @@
+*.html linguist-language=javascript
diff --git a/16 - Mouse Move Shadow/README.md b/16 - Mouse Move Shadow/README.md
@@ -1,6 +1,6 @@
 # 16 文字阴影的鼠标随动效果
 
-> 本篇作者：©[大史快跑Dashrun](https://github.com/dashrun)——Chinasoft Frontend Web Developer
+> 本篇作者：©[大史不说话](https://github.com/dashnowords)——Chinasoft Frontend Web Developer
 
 > 简介：[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 16 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*)
 
@@ -11,7 +11,7 @@
    初始文件`index-start.html`中提供了一个包含了`h1`元素的`div`元素，`h1`元素已经设置了`text-Shadow`的样式。本次编程挑战中需要完成的效果是根据用户当前的鼠标位置来操纵文字阴影的位置。
 
 ## 实现效果
-![结果展示](https://github.com/dashrun/vanilla-javascript-30/blob/master/day16-mouseMoveShadow/effects.png)
+![结果展示](https://github.com/dashnowords/JavaScript30/blob/master/16%20-%20Mouse%20Move%20Shadow/effects.png)
 
 ## 基本知识
 `text-shadow`样式为标准CSS3样式，用于添加**一个或多个**文字阴影，用于其的语法格式为：
diff --git a/17 - Sort Without Articles/README.md b/17 - Sort Without Articles/README.md
@@ -1,6 +1,6 @@
 # 17 数组的去前缀排序
 
-> 本篇作者：©[大史快跑Dashrun](https://github.com/dashrun)——Chinasoft Frontend Web Developer
+> 本篇作者：©[大史不说话](https://github.com/dashnowords)——Chinasoft Frontend Web Developer
 
 > 简介：[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 17 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*)
 
@@ -11,7 +11,7 @@
    初始文件`index-start.html`中提供了一个无序列表元素，并在`script`标签中提供了一个字符串数组。请为这些字符串排序，要求去除字符串中的`The`，`A`以及`An`的前缀后再进行排序，并把排序后的结果作为列表项展示在无序列表中。
 
 ## 实现效果
-![结果展示](https://github.com/dashrun/vanilla-javascript-30/blob/master/day17-SortWithoutArticles/effects.png)
+![结果展示](https://github.com/soyaine/JavaScript30/blob/master/17%20-%20Sort%20Without%20Articles/effects.png)
 
 ## 基本思路
 1.基本的编程任务有两个要点，即**排序**和**展示**;<br>
diff --git a/18 - AddingUpTimesWithReduce/README.md b/18 - AddingUpTimesWithReduce/README.md
@@ -1,6 +1,6 @@
 # 18 使用reduce进行时间累加
 
-> 本篇作者：©[大史快跑Dashrun](https://github.com/dashrun)——Chinasoft Frontend Web Developer
+> 本篇作者：©[大史不说话](https://github.com/dashnowords)——Chinasoft Frontend Web Developer
 
 > 简介：[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 18 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*)
 
@@ -11,7 +11,7 @@
    初始文件`index-start.html`中提供了一个包含多个列表项的无序列表元素，每一个列表项均添加了`data-time`属性，该属性用**分**和**秒**表示了时间。要求将所有的时间累加在一起，并用`时:分:秒`来表示计算的结果。
 
 ## 实现效果
-![结果展示](https://github.com/dashrun/vanilla-javascript-30/blob/master/day18-AddingUpTimesWithReduce/effects.png)
+![结果展示](https://github.com/soyaine/JavaScript30/blob/master/18%20-%20AddingUpTimesWithReduce/effects.png)
 
 ## 基本思路
 1.取得所有`li`中`data-time`属性的值，将时间换算为秒并累加求得总时间（单位：秒）;<br>
diff --git a/19 - Webcam Fun/README.md b/19 - Webcam Fun/README.md
@@ -1,6 +1,6 @@
 # 19 Webcam Fun 中文指南
 
-> 本篇作者：©[大史快跑Dashrun](https://github.com/dashrun)——Chinasoft Frontend Developer
+> 本篇作者：©[大史不说话](https://github.com/dashnowords)——Chinasoft Frontend Web Developer
 
 > 简介：[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 19 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*)
 
@@ -16,7 +16,7 @@
 4.及使用滑块来改变图像的色彩。   
 
 ## 实现效果
-![结果展示](https://github.com/dashrun/vanilla-javascript-30/blob/master/19%20-%20Webcam%20Fun/effects.png)
+![结果展示](https://github.com/soyaine/JavaScript30/blob/master/19%20-%20Webcam%20Fun/effects.png)
 
 ## 相关知识
 1.`window.navigator`对象   
diff --git a/20 - Speech Detection/README.md b/20 - Speech Detection/README.md
@@ -1,6 +1,6 @@
 # 20 Speech Detection 中文指南
 
-> 本篇作者：©[大史快跑Dashrun](https://github.com/dashrun)——Chinasoft Frontend Developer
+> 本篇作者：©[大史不说话](https://github.com/dashnowords)——Chinasoft Frontend Web Developer
 
 > 简介：[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 20 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*)
 
@@ -12,7 +12,7 @@
 说明：由于只有chrome浏览器实现了该接口，而语音识别需要将捕捉到的信息发送至google服务器进行处理，故本文档只提供解决思路和参考代码。
 
 ## 实现效果
-![结果展示](https://github.com/dashrun/vanilla-javascript-30/blob/master/20%20-%20Speech%20Detection/effects.png)
+![结果展示](https://github.com/soyaine/JavaScript30/blob/master/20%20-%20Speech%20Detection/effects.png)
 
 ## 相关知识
 有关语音识别接口`SpeechRecognition`的说明，可查看[MDN](https://developer.mozilla.org/zh-CN/docs/Web/API/SpeechRecognition)中的相关解释。
diff --git a/21 - Geolocation/README.md b/21 - Geolocation/README.md
@@ -1,6 +1,6 @@
 # 21 Geolocation 中文指南
 
-> 本篇作者：©[大史快跑Dashrun](https://github.com/dashrun)——Chinasoft Frontend Developer
+> 本篇作者：©[大史不说话](https://github.com/dashnowords)——Chinasoft Frontend Web Developer
 
 > 简介：[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 21 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*)
 
@@ -11,7 +11,7 @@
 本次的挑战任务，是利用浏览器内置`Web Geolocation API`,将获取到的地理位置及相关坐标，与`index-start.html`中的可视化指南针连接在一起。
 
 ## 实现效果
-![结果展示](https://github.com/dashrun/vanilla-javascript-30/blob/master/21%20-%20Geolocation/effects.png)
+![结果展示](https://github.com/soyaine/JavaScript30/blob/master/21%20-%20Geolocation/effects.png)
 由于笔记本电脑一般不带速度及方向传感器，从结果中可以看到返回值中`heading`及`speed`键值均为`null`,为演示可视化效果，代码中采用手动赋值的方式进行演示。   
 
 ## 相关知识
diff --git a/22 - Follow Along Link Highlighter/README.md b/22 - Follow Along Link Highlighter/README.md
@@ -1,6 +1,6 @@
 # 22 Follow Along Link Highliter 中文指南
 
-> 本篇作者：©[大史快跑Dashrun](https://github.com/dashrun)——Chinasoft Frontend Developer
+> 本篇作者：©[大史不说话](https://github.com/dashnowords)——Chinasoft Frontend Web Developer
 
 > 简介：[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 22 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*)
 
@@ -11,7 +11,7 @@
 初始文档`index-start.html`提供了一组使用`<ul>`及`<li>`标签包裹的导航标签。本次的编程挑战任务是完成如下动画效果：当鼠标移动至某个对应标签上时，为标签添加一个白色的背景框，高亮表示该标签被选中，当鼠标移动至其他标签后，白色背景框不消失，而是直接跟随鼠标平移至新的标签，实现效果见下图展示。
 
 ## 实现效果
-![结果展示](https://github.com/dashrun/vanilla-javascript-30/blob/master/22%20-%20Follow%20Along%20Link%20Highlighter/effects.gif)
+![结果展示](https://github.com/soyaine/JavaScript30/blob/master/22%20-%20Follow%20Along%20Link%20Highlighter/effects.gif)
 
 
 ## 相关知识
diff --git a/23 - Speech Synthesis/README.md b/23 - Speech Synthesis/README.md
@@ -1,6 +1,6 @@
 # 23 Speech Synthesis 中文指南
 
-> 本篇作者：©[大史快跑Dashrun](https://github.com/dashrun)——Chinasoft Frontend Developer
+> 本篇作者：©[大史不说话](https://github.com/dashnowords)——Chinasoft Frontend Web Developer
 
 > 简介：[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 23 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*)
 
@@ -15,7 +15,7 @@
 4.拖动`rate`和`pitch`滑块可改变阅读速度和音高。
 
 ## 实现效果
-![结果展示](https://github.com/dashrun/vanilla-javascript-30/blob/master/23%20-%20Speech%20Synthesis/effects.png)
+![结果展示](https://github.com/soyaine/JavaScript30/blob/master/23%20-%20Speech%20Synthesis/effects.png)
 
 ## 相关知识   
 1.`SpeechSynthesisUtterance`接口   
diff --git a/24 - Sticky Nav/README.md b/24 - Sticky Nav/README.md
@@ -1,6 +1,6 @@
 # 24 Sticky Nav 中文指南
 
-> 本篇作者：©[大史快跑Dashrun](https://github.com/dashrun)——Chinasoft Frontend Developer
+> 本篇作者：©[大史不说话](https://github.com/dashnowords)——Chinasoft Frontend Web Developer
 
 > 简介：[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 24 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*)
 
@@ -11,7 +11,7 @@
 初始文档`index-start.html`提供了一篇仿博客文章的HTML文件布局，包括标题栏，导航以及正文部分，本次的编程挑战任务为：编写代码，使得当页面向下滚动至标题栏从可视区消失时，将导航栏固定在页面顶部，并显示页面LOGO（初始文档中已提供）以便后续导航；当页面向上滚动至标题栏重新出现在可视区域时，导航栏恢复初始设置。
 
 ## 实现效果
-![结果展示](https://github.com/dashrun/vanilla-javascript-30/blob/master/24%20-%20Sticky%20Nav/effects.gif)
+![结果展示](https://github.com/soyaine/JavaScript30/blob/master/24%20-%20Sticky%20Nav/effects.gif)
 
 ## 编程思路
 通过为指定元素设置`position:fixed`样式即可将其固定至页面指定位置。代码编写中配合监听页面滚动事件，判断页面的当前滚动位置，动态切换指定元素的`position`属性即可。
diff --git a/25 - Event Related/README.md b/25 - Event Related/README.md
@@ -1,6 +1,6 @@
 # 25 Event Related 中文指南
 
-> 本篇作者：©[大史快跑Dashrun](https://github.com/dashrun)——Chinasoft Frontend Developer
+> 本篇作者：©[大史不说话](https://github.com/dashnowords)——Chinasoft Frontend Web Developer
 
 > 简介：[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 25 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*)
 
@@ -11,7 +11,7 @@
 初始文档`index-start.html`提供了3个尺寸不一的`<div>`元素，本次挑战是一次学习任务，主要了解学习DOM的事件机制，包括事件捕获，事件冒泡，单次触发等。
 
 ## 结果展示
-![结果展示](https://github.com/dashrun/vanilla-javascript-30/blob/master/25%20-%20Event%20Related/effects.png)
+![结果展示](https://github.com/soyaine/JavaScript30/blob/master/25%20-%20Event%20Related/effects.png)
 
 ## 相关知识
 [addEventListener文档](https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener)
diff --git a/26 - Strip Follow Along Nav/README.md b/26 - Strip Follow Along Nav/README.md
@@ -1,6 +1,6 @@
 # 26 Strip Follow Along Nav 中文指南
 
-> 本篇作者：©[大史快跑Dashrun](https://github.com/dashrun)——Chinasoft Frontend Developer
+> 本篇作者：©[大史不说话](https://github.com/dashnowords)——Chinasoft Frontend Web Developer
 
 > 简介：[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 26 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*)
 
@@ -11,7 +11,7 @@
 初始文档`index-start.html`中提供了一组导航按钮，本次的编程任务需要实现的效果是当鼠标悬停于导航按钮时，显示对应下拉菜单的内容。（说明：下拉菜单内容及白色背景已写好，只需要根据需要改变其CSS属性使元素显示出来或改变其位置即可）。
 
 ## 实现效果
-![结果展示](https://github.com/dashrun/vanilla-javascript-30/blob/master/26%20-%20Strip%20Follow%20Along%20Nav/effect.png)
+![结果展示](https://github.com/soyaine/JavaScript30/blob/master/26%20-%20Strip%20Follow%20Along%20Nav/effect.png)
 
 ## 编程思路  
 监听每一个导航栏按钮绑定鼠标移入和移出的事件，在对应的回调函数中为相应的元素增加已经编写好的类名即可。
diff --git a/27 - Click and Drag/README.md b/27 - Click and Drag/README.md
@@ -1,6 +1,6 @@
 # 27 Click And Drag 中文指南
 
-> 本篇作者：©[大史快跑Dashrun](https://github.com/dashrun)——Chinasoft Frontend Developer
+> 本篇作者：©[大史不说话](https://github.com/dashnowords)——Chinasoft Frontend Web Developer
 
 > 简介：[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 27 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*)
 
@@ -11,7 +11,7 @@
 初始文档`index-start.html`中提供了一组条幅，本次的编程任务需要实现的效果是当鼠标拖动画面移动时，条幅同步向水平方向移动。
 
 ## 实现效果
-![结果展示](https://github.com/dashrun/vanilla-javascript-30/blob/master/27%20-%20Click%20and%20Drag/effect.png)
+![结果展示](https://github.com/soyaine/JavaScript30/blob/master/27%20-%20Click%20and%20Drag/effect.png)
 
 ## 编程思路  
 在最外层的items元素上监听鼠标的按下，移动，弹起事件并编写相应的回调函数即可，在对应的回调函数中获取到鼠标横向滑动的距离，将该距离值翻倍后赋值予条幅的scrollLeft属性可调整元素在水平方向上滚动的位置。   
diff --git a/28 - Video Speed Controller/README.md b/28 - Video Speed Controller/README.md
@@ -1,6 +1,6 @@
 # 28 Video Speed Controller 中文指南
 
-> 本篇作者：©[大史快跑Dashrun](https://github.com/dashrun)——Chinasoft Frontend Developer
+> 本篇作者：©[大史不说话](https://github.com/dashnowords)——Chinasoft Frontend Web Developer
 
 > 简介：[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 28 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*)
 
@@ -11,7 +11,7 @@
 初始文档`index-start.html`中提供了一个视频播放区域（使用的是H5原生的控制器）以及一个表示播放速度的滑块区域，本次的编程任务需要实现的效果是当鼠标拖动滑块时，实时改变视频播放的速度。
 
 ## 实现效果
-![结果展示](https://github.com/dashrun/vanilla-javascript-30/blob/master/28%20-%20Video%20Speed%20Controller/effect.png)
+![结果展示](https://github.com/soyaine/JavaScript30/blob/master/28%20-%20Video%20Speed%20Controller/effect.png)
 
 ## 编程思路  
 本次的编程任务难度系数较低，在右侧速度条上监听鼠标点击事件，调整滑块的高度来表示不同的填充百分比，即不同的播放速度，将速度赋值给video对象的`playbackRate`属性即可实时改变播放速度。难点在于高度的百分比转换。
diff --git a/29 - Countdown Timer/README.md b/29 - Countdown Timer/README.md
@@ -1,6 +1,6 @@
 # 29 Countdown Timer 中文指南
 
-> 本篇作者：©[大史快跑Dashrun](https://github.com/dashrun)——Chinasoft Frontend Developer
+> 本篇作者：©[大史不说话](https://github.com/dashnowords)——Chinasoft Frontend Web Developer
 
 > 简介：[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 29 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*)
 
@@ -12,7 +12,7 @@
 本次编程挑战的任务是通过javascript代码基于当前时间生成一个倒计时，将`结束时间`和`剩余时间`分别显示在`diaplay__time-left`类标签和`display__end-time`类标签上。
 
 ## 实现效果
-![结果展示](https://github.com/dashrun/vanilla-javascript-30/blob/master/29%20-%20Countdown%20Timer/effect.png)
+![结果展示](https://github.com/soyaine/JavaScript30/blob/master/29%20-%20Countdown%20Timer/effect.png)
 
 ## 编程思路  
 监听按点击事件`click`来为倒计时增加时间，使用`setInterval`函数每秒执行判断函数，若倒计时事件到，则清除当前计时器，若时间未到，则计算并刷新页面上应该显示的时间。
diff --git a/README.md b/README.md
