From a9b940d7c3b412744ed04e48d5ad0e773356c5f0 Mon Sep 17 00:00:00 2001
From: dashnowords <389399428@qq.com>
Date: Tue, 17 Jul 2018 21:53:12 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E4=BA=86readme=E6=96=87?=
=?UTF-8?q?=E4=BB=B6=E4=B8=AD=E7=9A=84=E7=A4=BA=E6=84=8F=E5=9B=BE=E9=93=BE?=
=?UTF-8?q?=E6=8E=A5=20=E6=9B=B4=E6=96=B0=E4=BA=86=E5=8E=9F=E5=8D=8F?=
=?UTF-8?q?=E4=BD=9C=E8=80=85=E3=80=90=E5=A4=A7=E5=8F=B2=E5=BF=AB=E8=B7=91?=
=?UTF-8?q?=E3=80=91=E7=9A=84=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.github/issue_template.md | 12 ++++++++
01 - JavaScript Drum Kit/README.md | 2 +-
02 - JS + CSS Clock/README.md | 2 +-
03 - CSS Variables/README.md | 2 +-
04 - Array Cardio Day 1/README.md | 2 +-
04 - Array Cardio Day 1/index-SOYAINE.html | 2 +-
05 - Flex Panel Gallery/README.md | 2 +-
06 - Type Ahead/README.md | 2 +-
07 - Array Cardio Day 2/README.md | 2 +-
08 - Fun with HTML5 Canvas/README.md | 2 +-
09 - Dev Tools Domination/README.md | 2 +-
.../README.md | 2 +-
12 - Key Sequence Detection/README.md | 2 +-
13 - Slide in on Scroll/README.md | 2 +-
.../README.md | 2 +-
15 - LocalStorage/README.md | 2 +-
16 - Mouse Move Shadow/README.md | 4 +--
17 - Sort Without Articles/README.md | 4 +--
18 - AddingUpTimesWithReduce/README.md | 4 +--
19 - Webcam Fun/README.md | 4 +--
20 - Speech Detection/README.md | 4 +--
21 - Geolocation/README.md | 4 +--
22 - Follow Along Link Highlighter/README.md | 4 +--
23 - Speech Synthesis/README.md | 4 +--
24 - Sticky Nav/README.md | 4 +--
25 - Event Related/README.md | 4 +--
26 - Strip Follow Along Nav/README.md | 4 +--
27 - Click and Drag/README.md | 4 +--
28 - Video Speed Controller/README.md | 4 +--
29 - Countdown Timer/README.md | 4 +--
README.md | 28 +++++++++----------
31 files changed, 69 insertions(+), 57 deletions(-)
create mode 100644 .github/issue_template.md
diff --git a/.github/issue_template.md b/.github/issue_template.md
new file mode 100644
index 0000000..5834ef8
--- /dev/null
+++ b/.github/issue_template.md
@@ -0,0 +1,12 @@
+Title: 标号-题目-类型 问题简述
+
+例子:
+
+```
+11 - Custom Video Player - readme: LocalStorage 補充
+11 - Custom Video Player - js: const 写法错误
+```
+
+说明中最好提供问题所在的具体位置链接,链接获取方法:
+1. Markdown 文档下,鼠标移动至你有问题的小标题,点击其左侧的链接图标,复制地址栏的地址即可。如:https://github.com/soyaine/JavaScript30/tree/master/11%20-%20Custom%20Video%20Player#图标切换
+2. 代码文档下,点击某一行左侧标号,复制地址栏地址即可,如 https://github.com/soyaine/JavaScript30/blob/master/11%20-%20Custom%20Video%20Player/index.html#L20
diff --git a/01 - JavaScript Drum Kit/README.md b/01 - JavaScript Drum Kit/README.md
index fb3822a..52e2d22 100644
--- a/01 - JavaScript Drum Kit/README.md
+++ b/01 - JavaScript Drum Kit/README.md
@@ -1,6 +1,6 @@
# 01 JavaScript Drum Kit 中文指南
-> 作者:©[缉熙Soyaine](https://github.com/soyaine)
+> 作者:©[未枝丫](https://github.com/soyaine)
> 简介:[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西,不借助框架和库,也不使用编译器和引用。现在你看到的是这系列指南的第 1 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30),喜欢请 Star 哦♪(^∇^*)
## 实现效果
diff --git a/02 - JS + CSS Clock/README.md b/02 - JS + CSS Clock/README.md
index 31544fe..7e808f2 100644
--- a/02 - JS + CSS Clock/README.md
+++ b/02 - JS + CSS Clock/README.md
@@ -1,6 +1,6 @@
# 02 纯 JS、CSS 时钟 中文指南
-> 作者:©[缉熙Soyaine](https://github.com/soyaine)
+> 作者:©[未枝丫](https://github.com/soyaine)
> 简介:[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西,不借助框架和库,也不使用编译器和引用。现在你看到的是这系列指南的第 2 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30),喜欢请 Star 哦♪(^∇^*)
> 创建时间:2016-12-21
diff --git a/03 - CSS Variables/README.md b/03 - CSS Variables/README.md
index fa175ef..e28b206 100644
--- a/03 - CSS Variables/README.md
+++ b/03 - CSS Variables/README.md
@@ -1,6 +1,6 @@
# 03 CSS Variable
-> 作者:©[缉熙Soyaine](https://github.com/soyaine)
+> 作者:©[未枝丫](https://github.com/soyaine)
> 简介:[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西,不借助框架和库,也不使用编译器和引用。现在你看到的是这系列指南的第 3 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30),喜欢请 Star 哦♪(^∇^*)
## 实现效果
diff --git a/04 - Array Cardio Day 1/README.md b/04 - Array Cardio Day 1/README.md
index c6e08e1..1e4215d 100644
--- a/04 - Array Cardio Day 1/README.md
+++ b/04 - Array Cardio Day 1/README.md
@@ -1,6 +1,6 @@
# 04 Array Cardio 💪 指南一
-> 作者:©[缉熙Soyaine](https://github.com/soyaine)
+> 作者:©[未枝丫](https://github.com/soyaine)
> 简介:[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西,不借助框架和库,也不使用编译器和引用。现在你看到的是这系列指南的第 4 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30),喜欢请 Star 哦♪(^∇^*)
## 实现效果
diff --git a/04 - Array Cardio Day 1/index-SOYAINE.html b/04 - Array Cardio Day 1/index-SOYAINE.html
index 6de312b..7419899 100644
--- a/04 - Array Cardio Day 1/index-SOYAINE.html
+++ b/04 - Array Cardio Day 1/index-SOYAINE.html
@@ -113,7 +113,7 @@
// 下面是我在豆瓣里筛选书名里含有 CSS 的书的代码
// https://book.douban.com/tag/web
-// const links = document.querySelectorAll('.subject-list h2 a');
+// const links = Array.from(document.querySelectorAll('.subject-list h2 a'));
// const book = links
// .map(link => link.title)
// .filter(title => title.includes('CSS'));
diff --git a/05 - Flex Panel Gallery/README.md b/05 - Flex Panel Gallery/README.md
index af61333..90a1a04 100644
--- a/05 - Flex Panel Gallery/README.md
+++ b/05 - Flex Panel Gallery/README.md
@@ -1,6 +1,6 @@
# 05 Flex 实现可伸缩的图片墙 中文指南
-> 作者:©[缉熙Soyaine](https://github.com/soyaine)
+> 作者:©[未枝丫](https://github.com/soyaine)
> 简介:[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西,不借助框架和库,也不使用编译器和引用。现在你看到的是这系列指南的第 5 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30),喜欢请 Star 哦♪(^∇^*)
## 实现效果
diff --git a/06 - Type Ahead/README.md b/06 - Type Ahead/README.md
index 38845b5..8a1f093 100644
--- a/06 - Type Ahead/README.md
+++ b/06 - Type Ahead/README.md
@@ -1,6 +1,6 @@
# 06 Fetch 结合 filter 实现快速匹配古诗
-> 作者:©[缉熙Soyaine](https://github.com/soyaine)
+> 作者:©[未枝丫](https://github.com/soyaine)
> 简介:[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西,不借助框架和库,也不使用编译器和引用。现在你看到的是这系列指南的第 6 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30),喜欢请 Star 哦♪(^∇^*)
## 实现效果
diff --git a/07 - Array Cardio Day 2/README.md b/07 - Array Cardio Day 2/README.md
index 767a1f7..2a2e85d 100644
--- a/07 - Array Cardio Day 2/README.md
+++ b/07 - Array Cardio Day 2/README.md
@@ -1,6 +1,6 @@
# 07 Array Cardio 💪 指南二
-> 作者:©[缉熙Soyaine](https://github.com/soyaine)
+> 作者:©[未枝丫](https://github.com/soyaine)
> 简介:[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西,不借助框架和库,也不使用编译器和引用。现在你看到的是这系列指南的第 7 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30),喜欢请 Star 哦♪(^∇^*)
## 实现效果
diff --git a/08 - Fun with HTML5 Canvas/README.md b/08 - Fun with HTML5 Canvas/README.md
index f9397ef..3cf6bd9 100644
--- a/08 - Fun with HTML5 Canvas/README.md
+++ b/08 - Fun with HTML5 Canvas/README.md
@@ -1,6 +1,6 @@
# 08 HTML5 Canvas 实现彩虹画笔绘画板指南
-> 作者:©[缉熙Soyaine](https://github.com/soyaine)
+> 作者:©[未枝丫](https://github.com/soyaine)
> 简介:[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西,不借助框架和库,也不使用编译器和引用。现在你看到的是这系列指南的第 8 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30),喜欢请 Star 哦♪(^∇^*)
## 实现效果
diff --git a/09 - Dev Tools Domination/README.md b/09 - Dev Tools Domination/README.md
index 3ec6934..f103fc4 100644
--- a/09 - Dev Tools Domination/README.md
+++ b/09 - Dev Tools Domination/README.md
@@ -1,6 +1,6 @@
# 09 Console 调试技巧指南
-> 作者:©[缉熙Soyaine](https://github.com/soyaine)
+> 作者:©[未枝丫](https://github.com/soyaine)
> 简介:[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西,不借助框架和库,也不使用编译器和引用。现在你看到的是这系列指南的第 9 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30),喜欢请 Star 哦♪(^∇^*)
> 创建时间:2017-01-06
diff --git a/10 - Hold Shift and Check Checkboxes/README.md b/10 - Hold Shift and Check Checkboxes/README.md
index 056f796..dbb6c5f 100644
--- a/10 - Hold Shift and Check Checkboxes/README.md
+++ b/10 - Hold Shift and Check Checkboxes/README.md
@@ -1,6 +1,6 @@
# 10 JS 实现 Checkbox 中按住 Shift 的多选功能
-> 作者:©[缉熙Soyaine](https://github.com/soyaine)
+> 作者:©[未枝丫](https://github.com/soyaine)
> 简介:[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西,不借助框架和库,也不使用编译器和引用。现在你看到的是这系列指南的第 10 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30),喜欢请 Star 哦♪(^∇^*)
> 创建时间:2017-01-07
diff --git a/12 - Key Sequence Detection/README.md b/12 - Key Sequence Detection/README.md
index 0b84335..9956f18 100644
--- a/12 - Key Sequence Detection/README.md
+++ b/12 - Key Sequence Detection/README.md
@@ -1,6 +1,6 @@
# 12 键盘输入序列的验证指南
-> 作者:©[缉熙Soyaine](https://github.com/soyaine)
+> 作者:©[未枝丫](https://github.com/soyaine)
> 简介:[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西,不借助框架和库,也不使用编译器和引用。现在你看到的是这系列指南的第 12 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30),喜欢请 Star 哦♪(^∇^*)
> 创建时间:2017-02-27
diff --git a/13 - Slide in on Scroll/README.md b/13 - Slide in on Scroll/README.md
index 22bb0d5..182908c 100644
--- a/13 - Slide in on Scroll/README.md
+++ b/13 - Slide in on Scroll/README.md
@@ -1,6 +1,6 @@
# 13 图片随屏幕滚动而滑入滑出的效果指南
-> 作者:©[缉熙Soyaine](https://github.com/soyaine)
+> 作者:©[未枝丫](https://github.com/soyaine)
> 简介:[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西,不借助框架和库,也不使用编译器和引用。现在你看到的是这系列指南的第 13 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30),喜欢请 Star 哦♪(^∇^*)
> 创建时间:2017-07-14
diff --git a/14 - JavaScript References VS Copying/README.md b/14 - JavaScript References VS Copying/README.md
index 2af71f5..05dcef8 100644
--- a/14 - JavaScript References VS Copying/README.md
+++ b/14 - JavaScript References VS Copying/README.md
@@ -1,6 +1,6 @@
# 14 JS中的引用与复制
-> 作者:©[缉熙Soyaine](https://github.com/soyaine)
+> 作者:©[未枝丫](https://github.com/soyaine)
> 简介:[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西,不借助框架和库,也不使用编译器和引用。现在你看到的是这系列指南的第 14 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30),喜欢请 Star 哦♪(^∇^*)
> 创建时间:2017-07-19
diff --git a/15 - LocalStorage/README.md b/15 - LocalStorage/README.md
index 80173b6..3793de1 100644
--- a/15 - LocalStorage/README.md
+++ b/15 - LocalStorage/README.md
@@ -1,6 +1,6 @@
# 15 LocalStorage
-> 作者:©[缉熙Soyaine](https://github.com/soyaine)
+> 作者:©[未枝丫](https://github.com/soyaine)
> 简介:[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西,不借助框架和库,也不使用编译器和引用。现在你看到的是这系列指南的第 15 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30),喜欢请 Star 哦♪(^∇^*)
> 创建时间:2017-07-24
diff --git a/16 - Mouse Move Shadow/README.md b/16 - Mouse Move Shadow/README.md
index 6eb91ee..984c795 100644
--- 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`的样式。本次编程挑战中需要完成的效果是根据用户当前的鼠标位置来操纵文字阴影的位置。
## 实现效果
-
+
## 基本知识
`text-shadow`样式为标准CSS3样式,用于添加**一个或多个**文字阴影,用于其的语法格式为:
diff --git a/17 - Sort Without Articles/README.md b/17 - Sort Without Articles/README.md
index a42fa14..2bed663 100644
--- 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`的前缀后再进行排序,并把排序后的结果作为列表项展示在无序列表中。
## 实现效果
-
+
## 基本思路
1.基本的编程任务有两个要点,即**排序**和**展示**;
diff --git a/18 - AddingUpTimesWithReduce/README.md b/18 - AddingUpTimesWithReduce/README.md
index 46c0873..c493459 100644
--- 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`属性,该属性用**分**和**秒**表示了时间。要求将所有的时间累加在一起,并用`时:分:秒`来表示计算的结果。
## 实现效果
-
+
## 基本思路
1.取得所有`li`中`data-time`属性的值,将时间换算为秒并累加求得总时间(单位:秒);
diff --git a/19 - Webcam Fun/README.md b/19 - Webcam Fun/README.md
index f5f772f..389458d 100644
--- 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.及使用滑块来改变图像的色彩。
## 实现效果
-
+
## 相关知识
1.`window.navigator`对象
diff --git a/20 - Speech Detection/README.md b/20 - Speech Detection/README.md
index a2070a0..5b62c17 100644
--- 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服务器进行处理,故本文档只提供解决思路和参考代码。
## 实现效果
-
+
## 相关知识
有关语音识别接口`SpeechRecognition`的说明,可查看[MDN](https://developer.mozilla.org/zh-CN/docs/Web/API/SpeechRecognition)中的相关解释。
diff --git a/21 - Geolocation/README.md b/21 - Geolocation/README.md
index c4f8b17..7c44d84 100644
--- 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`中的可视化指南针连接在一起。
## 实现效果
-
+
由于笔记本电脑一般不带速度及方向传感器,从结果中可以看到返回值中`heading`及`speed`键值均为`null`,为演示可视化效果,代码中采用手动赋值的方式进行演示。
## 相关知识
diff --git a/22 - Follow Along Link Highlighter/README.md b/22 - Follow Along Link Highlighter/README.md
index cd7a55f..36bd906 100644
--- 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`提供了一组使用`
`及`- `标签包裹的导航标签。本次的编程挑战任务是完成如下动画效果:当鼠标移动至某个对应标签上时,为标签添加一个白色的背景框,高亮表示该标签被选中,当鼠标移动至其他标签后,白色背景框不消失,而是直接跟随鼠标平移至新的标签,实现效果见下图展示。
## 实现效果
-
+
## 相关知识
diff --git a/23 - Speech Synthesis/README.md b/23 - Speech Synthesis/README.md
index c0140e4..c0604f5 100644
--- 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`滑块可改变阅读速度和音高。
## 实现效果
-
+
## 相关知识
1.`SpeechSynthesisUtterance`接口
diff --git a/24 - Sticky Nav/README.md b/24 - Sticky Nav/README.md
index 758fa5d..303a25c 100644
--- 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(初始文档中已提供)以便后续导航;当页面向上滚动至标题栏重新出现在可视区域时,导航栏恢复初始设置。
## 实现效果
-
+
## 编程思路
通过为指定元素设置`position:fixed`样式即可将其固定至页面指定位置。代码编写中配合监听页面滚动事件,判断页面的当前滚动位置,动态切换指定元素的`position`属性即可。
diff --git a/25 - Event Related/README.md b/25 - Event Related/README.md
index bb5ff15..1364e1d 100644
--- 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个尺寸不一的`
`元素,本次挑战是一次学习任务,主要了解学习DOM的事件机制,包括事件捕获,事件冒泡,单次触发等。
## 结果展示
-
+
## 相关知识
[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
index 61931a4..312f6c8 100644
--- 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属性使元素显示出来或改变其位置即可)。
## 实现效果
-
+
## 编程思路
监听每一个导航栏按钮绑定鼠标移入和移出的事件,在对应的回调函数中为相应的元素增加已经编写好的类名即可。
diff --git a/27 - Click and Drag/README.md b/27 - Click and Drag/README.md
index b33fb5b..1ab97b3 100644
--- 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`中提供了一组条幅,本次的编程任务需要实现的效果是当鼠标拖动画面移动时,条幅同步向水平方向移动。
## 实现效果
-
+
## 编程思路
在最外层的items元素上监听鼠标的按下,移动,弹起事件并编写相应的回调函数即可,在对应的回调函数中获取到鼠标横向滑动的距离,将该距离值翻倍后赋值予条幅的scrollLeft属性可调整元素在水平方向上滚动的位置。
diff --git a/28 - Video Speed Controller/README.md b/28 - Video Speed Controller/README.md
index 04e24be..29ac1e2 100644
--- 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原生的控制器)以及一个表示播放速度的滑块区域,本次的编程任务需要实现的效果是当鼠标拖动滑块时,实时改变视频播放的速度。
## 实现效果
-
+
## 编程思路
本次的编程任务难度系数较低,在右侧速度条上监听鼠标点击事件,调整滑块的高度来表示不同的填充百分比,即不同的播放速度,将速度赋值给video对象的`playbackRate`属性即可实时改变播放速度。难点在于高度的百分比转换。
diff --git a/29 - Countdown Timer/README.md b/29 - Countdown Timer/README.md
index 901dc8e..c11bf86 100644
--- 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`类标签上。
## 实现效果
-
+
## 编程思路
监听按点击事件`click`来为倒计时增加时间,使用`setInterval`函数每秒执行判断函数,若倒计时事件到,则清除当前计时器,若时间未到,则计算并刷新页面上应该显示的时间。
diff --git a/README.md b/README.md
index 872ae50..1cb0f97 100644
--- a/README.md
+++ b/README.md
@@ -3,7 +3,7 @@
创建日期:2016-12-20
最后更新:2017-10-29
-> Repo by: [缉熙Soyaine](https://github.com/soyaine)
+> Repo by: [未枝丫](https://github.com/soyaine)
> [JavaScript30](https://javascript30.com) 教程作者:[Wes Bos](https://github.com/wesbos)
> 完整指南在 [GitHub](https://github.com/soyaine/JavaScript30),喜欢请 Star 哦♪(^∇^*)
@@ -55,19 +55,19 @@ No | Guide | Demo
13 | [Slide in on Scroll 指南](https://github.com/soyaine/JavaScript30/blob/master/13%20-%20Slide%20in%20on%20Scroll/README.md) | [图片随屏幕滚动而滑入滑出的在线效果](https://soyaine.github.io/JavaScript30/13%20-%20Slide%20in%20on%20Scroll/index-SOYAINE.html)
14 | [JavaScript References vs. Copying 指南](https://github.com/soyaine/JavaScript30/tree/master/14%20-%20JavaScript%20References%20VS%20Copying) | -
15 | LocalStorage | -
-16 | [Mouse Move Shadow 指南](https://github.com/dashrun/JavaScript30/blob/master/16%20-%20Mouse%20Move%20Shadow/README.md) | [文字阴影随鼠标移动在线效果](https://soyaine.github.io/JavaScript30/16%20-%20Mouse%20Move%20Shadow/index-finished-es5.html)
+16 | [Mouse Move Shadow 指南](https://github.com/soyaine/JavaScript30/blob/master/16%20-%20Mouse%20Move%20Shadow/README.md) | [文字阴影随鼠标移动在线效果](https://soyaine.github.io/JavaScript30/16%20-%20Mouse%20Move%20Shadow/index-finished-es5.html)
17 | [Sort Without Articles 指南](https://github.com/soyaine/JavaScript30/blob/master/17%20-%20Sort%20Without%20Articles/README.md) | [去前缀排序在线效果](https://soyaine.github.io/JavaScript30/17%20-%20Sort%20Without%20Articles/index-finished-Dashrun-es5.html)
18 | [Adding Up Times with Reduce 指南](https://github.com/soyaine/JavaScript30/tree/master/18%20-%20AddingUpTimesWithReduce) | [使用 Reduce 进行时间叠加效果](https://soyaine.github.io/JavaScript30/18%20-%20AddingUpTimesWithReduce/index-finished-Dashrun-es6.html)
-19 | [Webcam Fun 指南](https://github.com/soyaine/JavaScript30/blob/master/19%20-%20Webcam%20Fun/README.md) | [网络摄像头及图片处理在线效果](https://github.com/soyaine/JavaScript30/blob/master/19%20-%20Webcam%20Fun/index-finished-Dashrun.html)
-20 | [Speech Detection指南](https://github.com/soyaine/JavaScript30/blob/master/20%20-%20Speech%20Detection/README.md) | [Speech Detection效果](https://github.com/soyaine/JavaScript30/blob/master/20%20-%20Speech%20Detection/index-finished-Dashrun.html)
-21 | [Geolocation指南](https://github.com/soyaine/JavaScript30/blob/master/21%20-%20Geolocation/README.md) | [Geolocation效果](https://github.com/soyaine/JavaScript30/blob/master/21%20-%20Geolocation/index-finished-Dashrun.html)
-22 | [Follow Along Link Highlighter指南](https://github.com/soyaine/JavaScript30/blob/master/22%20-%20Follow%20Along%20Link%20Highlighter/README.md) | [Follow Along Link Highlighter效果](https://github.com/soyaine/JavaScript30/blob/master/22%20-%20Follow%20Along%20Link%20Highlighter/index-finished-Dashrun.html)
-23 | [Speech Synthesis指南](https://github.com/soyaine/JavaScript30/blob/master/23%20-%20Speech%20Synthesis/README.md) | [Speech Synthesis效果](https://github.com/soyaine/JavaScript30/blob/master/23%20-%20Speech%20Synthesis/index-finished-Dashrun.html)
-24 | [Sticky Nav指南](https://github.com/soyaine/JavaScript30/blob/master/24%20-%20Sticky%20Nav/README.md) | [Sticky Nav效果](https://github.com/soyaine/JavaScript30/blob/master/24%20-%20Sticky%20Nav/index-finished-Dashrun.html)
-25 | [Event Related指南](https://github.com/soyaine/JavaScript30/blob/master/25%20-%20Event%20Related/README.md) | [Event Related效果](https://github.com/soyaine/JavaScript30/blob/master/25%20-%20Event%20Related/index-finished-Dashrun.html)
-26 | [Stripe Follow Along Nav指南](https://github.com/soyaine/JavaScript30/blob/master/26%20-%20Stripe%20Follow%20Along%20Nav/README.md) | [Strip Follow Along Nav效果](https://github.com/soyaine/JavaScript30/blob/master/26%20-%20Stripe%20Follow%20Along%20Nav/index-finished-Dashrun.html)
-27 | [Click and Drag指南](https://github.com/soyaine/JavaScript30/blob/master/27%20-%20Click%20and%20Drag/README.md) | [Click and Drag效果](https://github.com/soyaine/JavaScript30/blob/master/27%20-%20Click%20and%20Drag/index-finished-Dashrun.html)
-28 | [Video Speed Controller指南](https://github.com/soyaine/JavaScript30/blob/master/28%20-%20Video%20Speed%20Controller/README.md) | [Video Speed Controller效果](https://github.com/soyaine/JavaScript30/blob/master/28%20-%20Video%20Speed%20Controller/index-finished-Dashrun.html)
+19 | [Webcam Fun 指南](https://github.com/soyaine/JavaScript30/blob/master/19%20-%20Webcam%20Fun/README.md) | [网络摄像头及图片处理在线效果](https://soyaine.github.io/JavaScript30/19%20-%20Webcam%20Fun/index-finished-Dashrun.html)
+20 | [Speech Detection指南](https://github.com/soyaine/JavaScript30/blob/master/20%20-%20Speech%20Detection/README.md) | [Speech Detection效果](https://soyaine.github.io/JavaScript30/20%20-%20Speech%20Detection/index-finished-Dashrun.html)
+21 | [Geolocation指南](https://github.com/soyaine/JavaScript30/blob/master/21%20-%20Geolocation/README.md) | [Geolocation效果](https://soyaine.github.io/JavaScript30/21%20-%20Geolocation/index-finished-Dashrun.html)
+22 | [Follow Along Link Highlighter指南](https://github.com/soyaine/JavaScript30/blob/master/22%20-%20Follow%20Along%20Link%20Highlighter/README.md) | [Follow Along Link Highlighter效果](https://soyaine.github.io/JavaScript30/22%20-%20Follow%20Along%20Link%20Highlighter/index-finished-Dashrun.html)
+23 | [Speech Synthesis指南](https://github.com/soyaine/JavaScript30/blob/master/23%20-%20Speech%20Synthesis/README.md) | [Speech Synthesis效果](https://soyaine.github.io/JavaScript30/23%20-%20Speech%20Synthesis/index-finished-Dashrun.html)
+24 | [Sticky Nav指南](https://github.com/soyaine/JavaScript30/blob/master/24%20-%20Sticky%20Nav/README.md) | [Sticky Nav效果](https://soyaine.github.io/JavaScript30/24%20-%20Sticky%20Nav/index-finished-Dashrun.html)
+25 | [Event Related指南](https://github.com/soyaine/JavaScript30/blob/master/25%20-%20Event%20Related/README.md) | [Event Related效果](https://soyaine.github.io/JavaScript30/25%20-%20Event%20Related/index-finished-Dashrun.html)
+26 | [Stripe Follow Along Nav指南](https://github.com/soyaine/JavaScript30/blob/master/26%20-%20Stripe%20Follow%20Along%20Nav/README.md) | [Strip Follow Along Nav效果](https://soyaine.github.io/JavaScript30/26%20-%20Stripe%20Follow%20Along%20Nav/index-finished-Dashrun.html)
+27 | [Click and Drag指南](https://github.com/soyaine/JavaScript30/blob/master/27%20-%20Click%20and%20Drag/README.md) | [Click and Drag效果](https://soyaine.github.io/JavaScript30/27%20-%20Click%20and%20Drag/index-finished-Dashrun.html)
+28 | [Video Speed Controller指南](https://github.com/soyaine/JavaScript30/blob/master/28%20-%20Video%20Speed%20Controller/README.md) | [Video Speed Controller效果](https://soyaine.github.io/JavaScript30/28%20-%20Video%20Speed%20Controller/index-finished-Dashrun.html)
29 | Countdown Timer | -
30 | Whack A Mole | -
@@ -80,8 +80,8 @@ Name | Contribution
[@DrakeXiang](https://github.com/DrakeXiang) | No.[11](https://github.com/soyaine/JavaScript30/tree/master/11%20-%20Custom%20Video%20Player)
[@zzh466](http://github.com/zzh466) | Review
[@Xing Liu](https://github.com/S1ngS1ng) | Review
-[@大史快跑Dashrun](https://github.com/dashrun) | No.[16](https://github.com/soyaine/JavaScript30/tree/master/16%20-%20Mouse%20Move%20Shadow).[17](https://github.com/soyaine/JavaScript30/tree/master/17%20-%20Sort%20Without%20Articles).[18](https://github.com/soyaine/JavaScript30/tree/master/18%20-%20AddingUpTimesWithReduce).[19](https://github.com/soyaine/JavaScript30/blob/master/19%20-%20Webcam%20Fun).[20](https://github.com/soyaine/JavaScript30/tree/master/20%20-%20Speech%20Detection).[21](https://github.com/soyaine/JavaScript30/tree/master/21%20-%20Geolocation).[22](https://github.com/soyaine/JavaScript30/tree/master/22%20-%20Follow%20Along%20Link%20Highlighter).[23](https://github.com/soyaine/JavaScript30/tree/master/23%20-%20Speech%20Synthesis).[24](https://github.com/soyaine/JavaScript30/tree/master/24%20-%20Sticky%20Nav).[25](https://github.com/soyaine/JavaScript30/tree/master/25%20-%20Event%20Related).[26](https://github.com/soyaine/JavaScript30/tree/master/26%20-%20Strip%20Follow%20Along%20Nav).[27](https://github.com/soyaine/JavaScript30/tree/master/27%20-%20Click%20and%20Drag).[28](https://github.com/soyaine/JavaScript30/tree/master/28%20-%20Video%20Speed%20Controller)
-[@缉熙Soyaine](https://github.com/soyaine) | No.[1](https://github.com/soyaine/JavaScript30/tree/master/01%20-%20JavaScript%20Drum%20Kit).[2](https://github.com/soyaine/JavaScript30/tree/master/02%20-%20JS%20%2B%20CSS%20Clock).[3](https://github.com/soyaine/JavaScript30/tree/master/03%20-%20CSS%20%Variables).[4](https://github.com/soyaine/JavaScript30/tree/master/04%20-%20Array%20Cardio%20Day%201).[5](https://github.com/soyaine/JavaScript30/blob/master/05%20-%20Flex%20Panel%20Gallery).[6](https://github.com/soyaine/JavaScript30/blob/master/06%20-%20Type%20Ahead).[7](https://github.com/soyaine/JavaScript30/tree/master/07%20-%20Array%20Cardio%20Day%202).[8](https://github.com/soyaine/JavaScript30/tree/master/08%20-%20Fun%20with%20HTML5%20Canvas).[9](https://github.com/soyaine/JavaScript30/blob/master/09%20-%20Dev%20Tools%20Domination).[10](https://github.com/soyaine/JavaScript30/blob/master/10%20-%20Hold%20Shift%20and%20Check%20Checkboxes/README.md).[12](https://github.com/soyaine/JavaScript30/tree/master/12%20-%20Key%20Sequence%20Detection/README.md).[13](https://github.com/soyaine/JavaScript30/blob/master/13%20-%20Slide%20in%20on%20Scroll/README.md).[14](https://github.com/soyaine/JavaScript30/tree/master/14%20-%20JavaScript%20References%20VS%20Copying)
+[@大史不说话](https://github.com/dashnowords) | No.[16](https://github.com/soyaine/JavaScript30/tree/master/16%20-%20Mouse%20Move%20Shadow).[17](https://github.com/soyaine/JavaScript30/tree/master/17%20-%20Sort%20Without%20Articles).[18](https://github.com/soyaine/JavaScript30/tree/master/18%20-%20AddingUpTimesWithReduce).[19](https://github.com/soyaine/JavaScript30/blob/master/19%20-%20Webcam%20Fun).[20](https://github.com/soyaine/JavaScript30/tree/master/20%20-%20Speech%20Detection).[21](https://github.com/soyaine/JavaScript30/tree/master/21%20-%20Geolocation).[22](https://github.com/soyaine/JavaScript30/tree/master/22%20-%20Follow%20Along%20Link%20Highlighter).[23](https://github.com/soyaine/JavaScript30/tree/master/23%20-%20Speech%20Synthesis).[24](https://github.com/soyaine/JavaScript30/tree/master/24%20-%20Sticky%20Nav).[25](https://github.com/soyaine/JavaScript30/tree/master/25%20-%20Event%20Related).[26](https://github.com/soyaine/JavaScript30/tree/master/26%20-%20Strip%20Follow%20Along%20Nav).[27](https://github.com/soyaine/JavaScript30/tree/master/27%20-%20Click%20and%20Drag).[28](https://github.com/soyaine/JavaScript30/tree/master/28%20-%20Video%20Speed%20Controller)
+[@未枝丫](https://github.com/soyaine) | No.[1](https://github.com/soyaine/JavaScript30/tree/master/01%20-%20JavaScript%20Drum%20Kit).[2](https://github.com/soyaine/JavaScript30/tree/master/02%20-%20JS%20%2B%20CSS%20Clock).[3](https://github.com/soyaine/JavaScript30/tree/master/03%20-%20CSS%20%Variables).[4](https://github.com/soyaine/JavaScript30/tree/master/04%20-%20Array%20Cardio%20Day%201).[5](https://github.com/soyaine/JavaScript30/blob/master/05%20-%20Flex%20Panel%20Gallery).[6](https://github.com/soyaine/JavaScript30/blob/master/06%20-%20Type%20Ahead).[7](https://github.com/soyaine/JavaScript30/tree/master/07%20-%20Array%20Cardio%20Day%202).[8](https://github.com/soyaine/JavaScript30/tree/master/08%20-%20Fun%20with%20HTML5%20Canvas).[9](https://github.com/soyaine/JavaScript30/blob/master/09%20-%20Dev%20Tools%20Domination).[10](https://github.com/soyaine/JavaScript30/blob/master/10%20-%20Hold%20Shift%20and%20Check%20Checkboxes/README.md).[12](https://github.com/soyaine/JavaScript30/tree/master/12%20-%20Key%20Sequence%20Detection/README.md).[13](https://github.com/soyaine/JavaScript30/blob/master/13%20-%20Slide%20in%20on%20Scroll/README.md).[14](https://github.com/soyaine/JavaScript30/tree/master/14%20-%20JavaScript%20References%20VS%20Copying)
## JOIN US
如果对这个系列的指南有什么改进的想法,欢迎[提 issue](https://github.com/soyaine/JavaScript30/issues),如果你也想参与写作,请看 [wiki](https://github.com/soyaine/JavaScript30/wiki/%E6%8C%87%E5%8D%97%E7%BB%93%E6%9E%84%E8%AF%B4%E6%98%8E),并联系 Soyaine。
From 2f82b89e92d0680d984407a6d198e4319b598531 Mon Sep 17 00:00:00 2001
From: Dashnowords <389399428@qq.com>
Date: Wed, 19 Sep 2018 22:20:23 +0800
Subject: [PATCH 2/2] Create .gitattributes
---
.gitattributes | 1 +
1 file changed, 1 insertion(+)
create mode 100644 .gitattributes
diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 0000000..6347583
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1 @@
+*.html linguist-language=javascript