From 76949a9569b8f161ed16dc4a4b02c0989b09820d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9C=AA=E6=9E=9D?= Date: Fri, 29 Dec 2017 14:47:57 +0800 Subject: [PATCH 01/18] Change my name online --- 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 +- 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 +- 10 - Hold Shift and Check Checkboxes/README.md | 2 +- 12 - Key Sequence Detection/README.md | 2 +- 13 - Slide in on Scroll/README.md | 2 +- 14 - JavaScript References VS Copying/README.md | 2 +- 15 - LocalStorage/README.md | 2 +- README.md | 4 ++-- 15 files changed, 16 insertions(+), 16 deletions(-) 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/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/README.md b/README.md index 872ae50..92a79f8 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 哦♪(^∇^*) @@ -81,7 +81,7 @@ Name | Contribution [@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/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 a5d97a5ddb810820df584e0ea78d495bd1f66374 Mon Sep 17 00:00:00 2001 From: experdot Date: Fri, 5 Jan 2018 18:03:56 +0800 Subject: [PATCH 02/18] =?UTF-8?q?=E6=9B=BF=E6=8D=A2=E7=AC=AC19~28=E9=A1=B9?= =?UTF-8?q?=E7=9A=84Demo=E8=B7=B3=E8=BD=AC=E9=93=BE=E6=8E=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 定向到GitHub Pages --- README.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 92a79f8..769f6f0 100644 --- a/README.md +++ b/README.md @@ -58,16 +58,16 @@ No | Guide | Demo 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) 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 | - From b8fce47e8a85341f2619aaaf920518032532947e Mon Sep 17 00:00:00 2001 From: Yvan Zhu Date: Tue, 6 Mar 2018 14:45:26 +0800 Subject: [PATCH 03/18] Update index-SOYAINE.html MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit dom对象转为array --- 04 - Array Cardio Day 1/index-SOYAINE.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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')); 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 04/18] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E4=BA=86readme?= =?UTF-8?q?=E6=96=87=E4=BB=B6=E4=B8=AD=E7=9A=84=E7=A4=BA=E6=84=8F=E5=9B=BE?= =?UTF-8?q?=E9=93=BE=E6=8E=A5=20=E6=9B=B4=E6=96=B0=E4=BA=86=E5=8E=9F?= =?UTF-8?q?=E5=8D=8F=E4=BD=9C=E8=80=85=E3=80=90=E5=A4=A7=E5=8F=B2=E5=BF=AB?= =?UTF-8?q?=E8=B7=91=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`的样式。本次编程挑战中需要完成的效果是根据用户当前的鼠标位置来操纵文字阴影的位置。 ## 实现效果 -![结果展示](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 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`的前缀后再进行排序，并把排序后的结果作为列表项展示在无序列表中。 ## 实现效果 -![结果展示](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.基本的编程任务有两个要点，即**排序**和**展示**;
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`属性，该属性用**分**和**秒**表示了时间。要求将所有的时间累加在一起，并用`时:分:秒`来表示计算的结果。 ## 实现效果 -![结果展示](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`属性的值，将时间换算为秒并累加求得总时间（单位：秒）;
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.及使用滑块来改变图像的色彩。 ## 实现效果 -![结果展示](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 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服务器进行处理，故本文档只提供解决思路和参考代码。 ## 实现效果 -![结果展示](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 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`中的可视化指南针连接在一起。 ## 实现效果 -![结果展示](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 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`提供了一组使用`
    `及`
  • `标签包裹的导航标签。本次的编程挑战任务是完成如下动画效果：当鼠标移动至某个对应标签上时，为标签添加一个白色的背景框，高亮表示该标签被选中，当鼠标移动至其他标签后，白色背景框不消失，而是直接跟随鼠标平移至新的标签，实现效果见下图展示。 ## 实现效果 -![结果展示](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 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`滑块可改变阅读速度和音高。 ## 实现效果 -![结果展示](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 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（初始文档中已提供）以便后续导航；当页面向上滚动至标题栏重新出现在可视区域时，导航栏恢复初始设置。 ## 实现效果 -![结果展示](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 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的事件机制，包括事件捕获，事件冒泡，单次触发等。 ## 结果展示 -![结果展示](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 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属性使元素显示出来或改变其位置即可）。 ## 实现效果 -![结果展示](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 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`中提供了一组条幅，本次的编程任务需要实现的效果是当鼠标拖动画面移动时，条幅同步向水平方向移动。 ## 实现效果 -![结果展示](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 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原生的控制器）以及一个表示播放速度的滑块区域，本次的编程任务需要实现的效果是当鼠标拖动滑块时，实时改变视频播放的速度。 ## 实现效果 -![结果展示](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 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`类标签上。 ## 实现效果 -![结果展示](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 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 da49c1d490f6d94e12226d268b5cabe6704a2bd4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9C=AA=E6=9E=9D?= Date: Mon, 23 Jul 2018 12:56:30 +0800 Subject: [PATCH 05/18] fix typo `tranform-origin` --- 02 - JS + CSS Clock/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/02 - JS + CSS Clock/README.md b/02 - JS + CSS Clock/README.md index 7e808f2..0ca0415 100644 --- a/02 - JS + CSS Clock/README.md +++ b/02 - JS + CSS Clock/README.md @@ -21,7 +21,7 @@ 3. 每一秒改变一次指针状态 **涉及到的特性：** -- `transform-oragin` +- `transform-origin` - `transform: rotate()` - `transition` - `transition-timing-function: cubic-bezier(x, x, x, x)` @@ -33,10 +33,10 @@ ### CSS 部分 1. 调整指针的初始位置以及旋转的轴点 - [transform-oragin](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin) + [transform-origin](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin) ```css - transform-oragin: 100%; // 或者可以用 right + transform-origin: 100%; // 或者可以用 right ``` 2. 调整时钟指针跳动时的过渡效果 From e0e6705115d53949d2648110e6d0372e86cdafd8 Mon Sep 17 00:00:00 2001 From: Dashnowords <389399428@qq.com> Date: Wed, 19 Sep 2018 22:20:23 +0800 Subject: [PATCH 06/18] 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 From f55e0abbf0584b0db613e26dc4c4fb85c1d550b1 Mon Sep 17 00:00:00 2001 From: soyaine Date: Wed, 5 Dec 2018 20:48:17 +0800 Subject: [PATCH 07/18] fix issue #57 #54 #53 #51 #41 #32 --- 01 - JavaScript Drum Kit/README.md | 2 +- 04 - Array Cardio Day 1/README.md | 2 +- 14 - JavaScript References VS Copying/README.md | 7 ++++--- 15 - LocalStorage/README.md | 7 +++++-- .../README.md | 0 .../effect.png | Bin .../index-finished-Dashrun.html | 0 .../index-start.html | 0 README.md | 6 +++--- 9 files changed, 14 insertions(+), 10 deletions(-) rename {26 - Strip Follow Along Nav => 26 - Stripe Follow Along Nav}/README.md (100%) rename {26 - Strip Follow Along Nav => 26 - Stripe Follow Along Nav}/effect.png (100%) rename {26 - Strip Follow Along Nav => 26 - Stripe Follow Along Nav}/index-finished-Dashrun.html (100%) rename {26 - Strip Follow Along Nav => 26 - Stripe Follow Along Nav}/index-start.html (100%) diff --git a/01 - JavaScript Drum Kit/README.md b/01 - JavaScript Drum Kit/README.md index 52e2d22..1b02d30 100644 --- a/01 - JavaScript Drum Kit/README.md +++ b/01 - JavaScript Drum Kit/README.md @@ -92,7 +92,7 @@ audio.play(); ### 如何使页面按钮恢复原状？ -利用一个叫 [`transitionened`](https://developer.mozilla.org/zh-CN/docs/Web/Events/transitionend) 的事件，它在 CSS transition 结束后会被触发。我们就可以利用这个事件，在每次打鼓的效果（尺寸变大、颜色变化）完成之后，去除相应样式。 +利用一个叫 [`transitionend`](https://developer.mozilla.org/zh-CN/docs/Web/Events/transitionend) 的事件，它在 CSS transition 结束后会被触发。我们就可以利用这个事件，在每次打鼓的效果（尺寸变大、颜色变化）完成之后，去除相应样式。 在这个页面中，发生 `transition` 的样式属性不止一个（`box-shadow`, `transform`, `border-color`），所以需要添加一个判断语句，使每发生一次按键事件时，只去除一次样式。 diff --git a/04 - Array Cardio Day 1/README.md b/04 - Array Cardio Day 1/README.md index 1e4215d..6d41224 100644 --- a/04 - Array Cardio Day 1/README.md +++ b/04 - Array Cardio Day 1/README.md @@ -23,7 +23,7 @@ console.table(thing) 1. 筛选 16 世纪出生的发明家 2. 展示他们的姓和名 -3. 把他们按照年龄从大到小进行排序 +3. 把他们按照出生日期从大到小进行排序 4. 计算所有的发明家加起来一共活了多少岁 5. 按照他们活了多久来进行排序 6. 筛选出一个网页里含有某个词语的标题 diff --git a/14 - JavaScript References VS Copying/README.md b/14 - JavaScript References VS Copying/README.md index 05dcef8..9fc48f1 100644 --- a/14 - JavaScript References VS Copying/README.md +++ b/14 - JavaScript References VS Copying/README.md @@ -4,7 +4,7 @@ > 简介：[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 -最后更新：2017-07-21 +最后更新：2018-12-05 ## 实现效果 @@ -98,6 +98,8 @@ 使用 `Object.assign(target, ...sources)` 时，后来的源对象的属性值，将会覆盖它之前的对象的属性。所以可以先复制 `person` 之后，再赋给属性新的值。 + 需要注意的是：这个例子里面，我们用的数组和对象都只是一层嵌套，Lodash 有一个深度复制的方法，但使用之前需要多考虑一下。 + ```js const cap2 = Object.assign({}, person, { number: 99, age: 12 }); console.log(cap2); // Object {name: "Wes Bos", age: 12, number: 99} @@ -122,8 +124,7 @@ console.log(dev); console.log(dev2); ``` - - 最后需要注意的是：在前面的例子里面，我们用的数组和对象都只是一层嵌套，Lodash 有一个深度复制的方法，但你使用之前需要多考虑一下。 + OVER~\(^o^)/~ diff --git a/15 - LocalStorage/README.md b/15 - LocalStorage/README.md index 3793de1..06c2776 100644 --- a/15 - LocalStorage/README.md +++ b/15 - LocalStorage/README.md @@ -4,7 +4,7 @@ > 简介：[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 -最后更新：2017-08-10 +最后更新：2018-12-05 ## 实现效果 我们的目的是使网页模拟菜单的效果，在页面中添加新的菜品，而且在页面刷新之后也不清空。 @@ -74,4 +74,7 @@ } ``` - **LocalStorage 更新** - 我们利用 LocalStorage 把信息存到本地，从而可以保证刷新后内容不变。但使用 `localStorage` 的时候，直接把 `items` 传入得到的值是 [object Object]，所以需要在把数据传进去之前就把内容转换成 String 类型的数据，之后读取时也使用 `JSON.parse()` 来将数据转换成 JSON 格式。 \ No newline at end of file + 我们利用 LocalStorage 把信息存到本地，从而可以保证刷新后内容不变。但使用 `localStorage` 的时候，直接把 `items` 传入得到的值是 [object Object]，所以需要在把数据传进去之前就把内容转换成 String 类型的数据，之后读取时也使用 `JSON.parse()` 来将数据转换成 JSON 格式。 + + > 来自 [@diabloevagto](https://github.com/diabloevagto) 在 [issue](https://github.com/soyaine/JavaScript30/issues/32) 里的补充： + > 这样的原因是因为 localStorage 里面只会储存 String 类型数据，如果传入的是非 String 则会直接使用 toString 转换：`({}).toString() //"[object Object]"`，这时候就会发生异常，所以才需要先使用 `JSON.stringify()` 将 Object 转换成 json 格式，读取出来之后再利用 `JSON.parse()` 转换为 Object。 diff --git a/26 - Strip Follow Along Nav/README.md b/26 - Stripe Follow Along Nav/README.md similarity index 100% rename from 26 - Strip Follow Along Nav/README.md rename to 26 - Stripe Follow Along Nav/README.md diff --git a/26 - Strip Follow Along Nav/effect.png b/26 - Stripe Follow Along Nav/effect.png similarity index 100% rename from 26 - Strip Follow Along Nav/effect.png rename to 26 - Stripe Follow Along Nav/effect.png diff --git a/26 - Strip Follow Along Nav/index-finished-Dashrun.html b/26 - Stripe Follow Along Nav/index-finished-Dashrun.html similarity index 100% rename from 26 - Strip Follow Along Nav/index-finished-Dashrun.html rename to 26 - Stripe Follow Along Nav/index-finished-Dashrun.html diff --git a/26 - Strip Follow Along Nav/index-start.html b/26 - Stripe Follow Along Nav/index-start.html similarity index 100% rename from 26 - Strip Follow Along Nav/index-start.html rename to 26 - Stripe Follow Along Nav/index-start.html diff --git a/README.md b/README.md index 1cb0f97..4654e0d 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ # JavaScript30 - 一个月纯 JS 挑战中文指南 创建日期：2016-12-20 -最后更新：2017-10-29 +最后更新：2018-12-05 > Repo by: [未枝丫](https://github.com/soyaine) > [JavaScript30](https://javascript30.com) 教程作者：[Wes Bos](https://github.com/wesbos) @@ -42,7 +42,7 @@ No | Guide | Demo --- | --- | --- 1 | [JavaScript Drum Kit 指南](https://github.com/soyaine/JavaScript30/tree/master/01%20-%20JavaScript%20Drum%20Kit) | [纯 JS 模拟敲鼓效果](http://soyaine.github.io/JavaScript30/01%20-%20JavaScript%20Drum%20Kit/index-SOYAINE.html) 2 | [JS + CSS Clock 指南](https://github.com/soyaine/JavaScript30/tree/master/02%20-%20JS%20%2B%20CSS%20Clock) | [纯 JavaScript+CSS 时钟效果](http://soyaine.github.io/JavaScript30/02%20-%20JS%20%2B%20CSS%20Clock/index-SOYAINE.html) -3 | [CSS Variables 指南](https://github.com/soyaine/JavaScript30/tree/master/03%20-%20CSS%20%Variables) | [用 CSS 变量实现拖动控制参数效果](http://soyaine.github.io/JavaScript30/03%20-%20CSS%20Variables/index-SOYAINE.html) +3 | [CSS Variables 指南](https://github.com/soyaine/JavaScript30/tree/master/03%20-%20CSS%20Variables) | [用 CSS 变量实现拖动控制参数效果](http://soyaine.github.io/JavaScript30/03%20-%20CSS%20Variables/index-SOYAINE.html) 4 | [Array Cardio, Day 1 指南](https://github.com/soyaine/JavaScript30/tree/master/04%20-%20Array%20Cardio%20Day%201) | [数组基本操作方法示例一](http://soyaine.github.io/JavaScript30/04%20-%20Array%20Cardio%20Day%201/index-SOYAINE.html) 5 | [Flex Panel Gallery 指南](https://github.com/soyaine/JavaScript30/blob/master/05%20-%20Flex%20Panel%20Gallery/README.md) | [可伸缩的图片墙在线效果](https://soyaine.github.io/JavaScript30/05%20-%20Flex%20Panel%20Gallery/index-SOYAINE2.html) 6 | [Type Ahead 指南](https://github.com/soyaine/JavaScript30/blob/master/06%20-%20Type%20Ahead/README.md) | [根据关键词快速匹配诗句在线效果](https://soyaine.github.io/JavaScript30/06%20-%20Type%20Ahead/index-SOYAINE.html) @@ -54,7 +54,7 @@ No | Guide | Demo 12 | [Key Sequence Detection 指南](https://github.com/soyaine/JavaScript30/tree/master/12%20-%20Key%20Sequence%20Detection/README.md) | [在线效果](https://soyaine.github.io/JavaScript30/12%20-%20Key%20Sequence%20Detection/index-FINISHED.html) 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 | - +15 | [LocalStorage](https://github.com/soyaine/JavaScript30/blob/master/15%20-%20LocalStorage/README.md) | [利用 localStorage 模拟在线菜单](https://soyaine.github.io/JavaScript30/15%20-%20LocalStorage/index-SOYAINE.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) From f91b4a24e94b21f4f2c35397107d73152ce64be1 Mon Sep 17 00:00:00 2001 From: soyaine Date: Thu, 6 Dec 2018 15:54:47 +0800 Subject: [PATCH 08/18] fix issue #56 #55 --- 02 - JS + CSS Clock/index-SOYAINE.html | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/02 - JS + CSS Clock/index-SOYAINE.html b/02 - JS + CSS Clock/index-SOYAINE.html index b97c0db..af02706 100644 --- a/02 - JS + CSS Clock/index-SOYAINE.html +++ b/02 - JS + CSS Clock/index-SOYAINE.html @@ -53,7 +53,8 @@ position: relative; width: 100%; height: 100%; - transform: translateY(-3px); /* account for the height of the clock hands */ + /* transform: translateY(-3px); /* account for the height of the clock hands */ + /* canceled according to https://github.com/soyaine/JavaScript30/issues/55 */ } .hand { @@ -87,8 +88,6 @@ 0 0 0 2px rgba(0,0,0,0.1), 0 0 10px rgba(0,0,0,0.2); transform: translate(-50%, -50%); - /*transition: all .05s;*/ - } .hour-hand { @@ -104,7 +103,7 @@ width: 45%; height:5px; margin-top: -2.5px; - transition: all .1s; + transition: all .1s cubic-bezier(0.9, 0.54, 0.26, 1.68); } .second-hand { @@ -112,7 +111,7 @@ margin-top: -1px; border-bottom-left-radius: 100%; border-top-left-radius: 100%; - transition: all .05s; + transition: all .05s cubic-bezier(0.9, 0.54, 0.26, 1.68); background-color: red; } @@ -141,10 +140,10 @@ // 解决指针跳顿问题【第一种方法】 // 在发生跳顿的角度值处，将 CSS 的 `transition` 属性去掉 if (secondDeg === 90) secHand.style.transition = 'all 0s'; - else secHand.style.transition = 'all 0.05s'; + else secHand.style.transition = 'all 0.05s cubic-bezier(0.9, 0.54, 0.26, 1.68)'; if (minDeg === 90) minHand.style.transition = 'all 0s'; - else minHand.style.transition = 'all 0.1s'; + else minHand.style.transition = 'all 0.1s cubic-bezier(0.9, 0.54, 0.26, 1.68)'; // 时针间距过大不做处理 // if (hourDeg === 116.5) hourHand.style.transition = 'all 0s'; From d31172031f5481d44598f8e1dd1aa25d97cca02e Mon Sep 17 00:00:00 2001 From: soyaine Date: Tue, 25 Jun 2019 12:36:47 +0800 Subject: [PATCH 09/18] fix #58 and lint code --- 04 - Array Cardio Day 1/index-SOYAINE.html | 181 +++++++++++---------- 1 file changed, 96 insertions(+), 85 deletions(-) diff --git a/04 - Array Cardio Day 1/index-SOYAINE.html b/04 - Array Cardio Day 1/index-SOYAINE.html index 7419899..f9f8dbf 100644 --- a/04 - Array Cardio Day 1/index-SOYAINE.html +++ b/04 - Array Cardio Day 1/index-SOYAINE.html @@ -6,11 +6,9 @@

    请按 F12 查看 Console 面板 💁

    -

    若无结果请刷新试试

    +

    若无结果请刷新试试

    From 59f2b7cc6ceefd28c56e77247c3d1324ebafbeea Mon Sep 17 00:00:00 2001 From: soyaine <12845017+soyaine@users.noreply.github.com> Date: Tue, 25 Jun 2019 12:42:20 +0800 Subject: [PATCH 10/18] fix #58 variable name --- 04 - Array Cardio Day 1/index-SOYAINE.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/04 - Array Cardio Day 1/index-SOYAINE.html b/04 - Array Cardio Day 1/index-SOYAINE.html index f9f8dbf..a1ff32a 100644 --- a/04 - Array Cardio Day 1/index-SOYAINE.html +++ b/04 - Array Cardio Day 1/index-SOYAINE.html @@ -132,7 +132,7 @@ // 7. sort Exercise // Sort the people alphabetically by last name // 按照姓氏的字母进行排序 - const sortName = inventors.sort((a, b) => { + const sortName = people.sort((a, b) => { return (a.last > b.last) ? 1 : -1; }) console.table(sortName); From f889ba1d3de81636bc8c49e2c4c5b22591768c93 Mon Sep 17 00:00:00 2001 From: soyaine Date: Tue, 25 Jun 2019 14:32:38 +0800 Subject: [PATCH 11/18] style: lint comment code --- 09 - Dev Tools Domination/index-SOYAINE.html | 103 +++++++++--------- .../index-SOYAINE.html | 4 +- 2 files changed, 56 insertions(+), 51 deletions(-) diff --git a/09 - Dev Tools Domination/index-SOYAINE.html b/09 - Dev Tools Domination/index-SOYAINE.html index a8780bd..4dcbabd 100644 --- a/09 - Dev Tools Domination/index-SOYAINE.html +++ b/09 - Dev Tools Domination/index-SOYAINE.html @@ -9,7 +9,13 @@

    ×点×我×呀×

    diff --git a/14 - JavaScript References VS Copying/index-SOYAINE.html b/14 - JavaScript References VS Copying/index-SOYAINE.html index acf3f62..4e11b80 100644 --- a/14 - JavaScript References VS Copying/index-SOYAINE.html +++ b/14 - JavaScript References VS Copying/index-SOYAINE.html @@ -101,8 +101,8 @@ } }; -// console.clear(); -// console.log(wes); + // console.clear(); + // console.log(wes); const dev = Object.assign({}, wes); From 202e91f16a896a860ec39a67462de3a1e9eac150 Mon Sep 17 00:00:00 2001 From: soyaine Date: Thu, 27 Jun 2019 12:09:58 +0800 Subject: [PATCH 12/18] style: lint code --- 06 - Type Ahead/index-SOYAINE.html | 84 ++++++++++++++---------------- 1 file changed, 38 insertions(+), 46 deletions(-) diff --git a/06 - Type Ahead/index-SOYAINE.html b/06 - Type Ahead/index-SOYAINE.html index 927d08d..890247a 100644 --- a/06 - Type Ahead/index-SOYAINE.html +++ b/06 - Type Ahead/index-SOYAINE.html @@ -14,61 +14,53 @@
- - - - - - - - + }).join(''); + // console.log(html); + suggestions.innerHTML = html; + } + const search = document.querySelector('.search'); + const suggestions = document.querySelector('.suggestions'); + search.addEventListener('change', displayMatches); + search.addEventListener('keyup', displayMatches); + // console.log(poetrys); + + + \ No newline at end of file From 8e6eeda81645b4f8aa31cc81e529016a9ebcbaaf Mon Sep 17 00:00:00 2001 From: soyaine <12845017+soyaine@users.noreply.github.com> Date: Wed, 14 Jul 2021 15:43:37 +0800 Subject: [PATCH 13/18] remove videos link note #60 --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 4654e0d..a35c1b4 100644 --- a/README.md +++ b/README.md @@ -29,7 +29,7 @@ JavaScirpt30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 下面是完成 Wes Bos 的 JavaScript30 挑战所能借鉴的文档，每个文档的具体使用建议如下： -- [JavaScript30 官网](https://javascript30.com)：进入官网注册后可以观看和下载所有教程视频。Wes Bos 还把视频传到了百度云，进入官网直接拉到页面底部就能找到链接。 +- [JavaScript30 官网](https://javascript30.com)：进入官网注册后可以观看和下载所有教程视频。 - [Nitish Dayal 写的英文指南](https://github.com/nitishdayal/JavaScript30/tree/master/exercises)：这是一份非官方的文字版指南，也是激励我写这一系列文章的主要因素。 - [挑战初始文档](https://github.com/wesbos/JavaScript30)：这是 Wes Bos 这份教程涉及的代码，你可以直接 Clone 或者下载到本地，然后开始你 30 天的挑战之旅。文档共有 30 个文件夹，每个文件夹中至少有两个文件。 - **index-START.html**：是提供给我们的初始文档，方便我们专注于 JavaScript 的编写，这个文档已经将基础的 HTML 和 CSS 部分写好，我们只需要在这个基础上编写 JavaScript 代码，实现特定的功能即可。 From 0a6c3e40cf2b87d1ee532ed833765291a6a20258 Mon Sep 17 00:00:00 2001 From: soyaine <12845017+soyaine@users.noreply.github.com> Date: Wed, 14 Jul 2021 15:45:13 +0800 Subject: [PATCH 14/18] update nickname --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index a35c1b4..3a0956b 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@ 创建日期：2016-12-20 最后更新：2018-12-05 -> Repo by: [未枝丫](https://github.com/soyaine) +> Repo by: [Soyaine](https://github.com/soyaine) > [JavaScript30](https://javascript30.com) 教程作者：[Wes Bos](https://github.com/wesbos) > 完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*) @@ -81,7 +81,7 @@ Name | Contribution [@zzh466](http://github.com/zzh466) | Review [@Xing Liu](https://github.com/S1ngS1ng) | Review [@大史不说话](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) +[@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) ## 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 f4232a6e3c9db9dbcd0b6288a27d919832eec0ec Mon Sep 17 00:00:00 2001 From: soyaine <12845017+soyaine@users.noreply.github.com> Date: Mon, 11 Jul 2022 11:08:49 +0800 Subject: [PATCH 15/18] =?UTF-8?q?fix=20#65=20=E4=BF=AE=E5=A4=8D=E4=B8=80?= =?UTF-8?q?=E4=BA=9B=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 3 的排序没有使用字段 4 排序用错了变量名 7 里面也用错了字段名，应该取逗号后的单词 --- 04 - Array Cardio Day 1/README.md | 4 ++-- 04 - Array Cardio Day 1/index-SOYAINE.html | 18 +++++++++++++----- 2 files changed, 15 insertions(+), 7 deletions(-) diff --git a/04 - Array Cardio Day 1/README.md b/04 - Array Cardio Day 1/README.md index 6d41224..ffff200 100644 --- a/04 - Array Cardio Day 1/README.md +++ b/04 - Array Cardio Day 1/README.md @@ -1,6 +1,6 @@ # 04 Array Cardio 💪 指南一 -> 作者：©[未枝丫](https://github.com/soyaine) +> 作者：©[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 哦♪(^∇^*) ## 实现效果 @@ -27,7 +27,7 @@ console.table(thing) 4. 计算所有的发明家加起来一共活了多少岁 5. 按照他们活了多久来进行排序 6. 筛选出一个网页里含有某个词语的标题 -7. 按照姓氏来对发明家进行排序 +7. 按照姓氏来进行排序 8. 统计给出数组中各个物品的数量 ## 相关知识 diff --git a/04 - Array Cardio Day 1/index-SOYAINE.html b/04 - Array Cardio Day 1/index-SOYAINE.html index a1ff32a..5408bdc 100644 --- a/04 - Array Cardio Day 1/index-SOYAINE.html +++ b/04 - Array Cardio Day 1/index-SOYAINE.html @@ -44,12 +44,13 @@ // Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's - // 筛选 16 世纪出生的人 + // 1. 筛选 16 世纪出生的人 const fifteen = inventors.filter(function (inventor) { if (inventor.year >= 1500 && inventor.year < 1600) { return true; } }); + console.log('1. 筛选 16 世纪出生的人'); console.table(fifteen); const __fifteen = inventors.filter(inventor => (inventor.year >= 1500 && inventor.year < 1600)); @@ -59,6 +60,7 @@ // Array.prototype.map() // 2. Give us an array of the inventors' first and last names // 展示上面发明家的姓名 + console.log('2. 展示上面发明家的姓名'); const fullNames = inventors.map(inventor => inventor.first + ' ' + inventor.last); // const fullNames = inventors.map(inventor => `${inventor.first} ${inventor.last}`); console.log(fullNames); @@ -67,6 +69,7 @@ // Array.prototype.sort() // 3. Sort the inventors by birthdate, oldest to youngest // 把这些人从大到小进行排序 + console.log('3. 把发明家从大到小进行排序'); // const ordered = inventors.sort(function(firstName, secondName) { // if(firstName.year > secondName.year) { // return 1; // 对 sort 函数，返回值为 -1 排在前面，1 排在后面 @@ -76,13 +79,15 @@ // }); // console.table(ordered); - const __ordered = inventors.sort((a, b) => (a > b) ? 1 : -1); + const __ordered = inventors.sort((a, b) => (a.year > b.year) ? 1 : -1); console.table(__ordered); // Array.prototype.reduce() // 4. How many years did all the inventors live // 他们所有人一共活了多少岁 + console.log('4. 所有发明家一共活了多少岁'); + // 下面三种写法是一样的效果 // var total = 0; // for(var i = 0; i < inventors.length; i++) { @@ -102,7 +107,8 @@ // 5. Sort the inventors by years lived、 // 按照他们在世的岁数进行排序 - const oldest = people.sort((a, b) => { + console.log('5. 按照发明家在世的岁数进行排序'); + const oldest = inventors.sort((a, b) => { const last = a.passed - a.year; const next = b.passed - b.year; return (next < last) ? -1 : 1; @@ -131,9 +137,10 @@ // 7. sort Exercise // Sort the people alphabetically by last name - // 按照姓氏的字母进行排序 + // 按照姓氏（逗号后面的单词）的字母进行排序 + console.log('7. 按照people姓氏（逗号后面的单词）的字母进行排序'); const sortName = people.sort((a, b) => { - return (a.last > b.last) ? 1 : -1; + return (a.split(', ')[1] > b.split(', ')[1]) ? 1 : -1; }) console.table(sortName); @@ -141,6 +148,7 @@ // 8. Reduce Exercise // Sum up the instances of each of these // 统计各个物品的数量 + console.log('8. 统计各个物品的数量'); const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ]; From bef7bbfe74259748487c515787b0a688692932fc Mon Sep 17 00:00:00 2001 From: longlin li Date: Tue, 15 Oct 2024 00:31:45 +0800 Subject: [PATCH 16/18] typo: change 'asset' to 'assert' --- 09 - Dev Tools Domination/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/09 - Dev Tools Domination/README.md b/09 - Dev Tools Domination/README.md index f103fc4..8335d96 100644 --- a/09 - Dev Tools Domination/README.md +++ b/09 - Dev Tools Domination/README.md @@ -64,7 +64,7 @@ console.dir(p); 要清空已经打印输出的内容，有两种方式，一种是 JavaScript 语句： `console.clear()`。另一个是快捷键 Ctrl ＋ L。 -### asset 方法进行测试 +### assert 方法进行测试 接受一个表达式作为参数，如果参数返回值是 false，则会输出第二个参数中的内容。 From c3d9264117f6f4fd9d9dcdfa578990a7ff587a6c Mon Sep 17 00:00:00 2001 From: S <12845017+soyaine@users.noreply.github.com> Date: Mon, 10 Nov 2025 14:04:22 +0800 Subject: [PATCH 17/18] fix #68 --- 04 - Array Cardio Day 1/index-SOYAINE.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/04 - Array Cardio Day 1/index-SOYAINE.html b/04 - Array Cardio Day 1/index-SOYAINE.html index 5408bdc..e56eb6a 100644 --- a/04 - Array Cardio Day 1/index-SOYAINE.html +++ b/04 - Array Cardio Day 1/index-SOYAINE.html @@ -38,7 +38,7 @@ 'Benson, Leana', 'Bent, Silas', 'Bentsen, Lloyd', 'Berger, Ric', 'Bergman, Ingmar', 'Berio, Luciano', 'Berle, Milton', 'Berlin, Irving', 'Berne, Eric', 'Bernhard, Sandra', 'Berra, Yogi', 'Berry, Halle', 'Berry, Wendell', 'Bethea, Erin', 'Bevan, Aneurin', 'Bevel, Ken', 'Biden, Joseph', 'Bierce, Ambrose', - 'Biko, Steve', 'Billings, Josh', 'Biondo, Frank', 'Birrell, Augustine', 'Black Elk', 'Blair, Robert', + 'Biko, Steve', 'Billings, Josh', 'Biondo, Frank', 'Birrell, Augustine', 'Black, Elk', 'Blair, Robert', 'Blair, Tony', 'Blake, William' ]; From a934c4adecbf8cc8ff2650a05a434892ad8e58d2 Mon Sep 17 00:00:00 2001 From: S <12845017+soyaine@users.noreply.github.com> Date: Mon, 10 Nov 2025 14:10:00 +0800 Subject: [PATCH 18/18] fix #68 --- 04 - Array Cardio Day 1/index-FINISHED.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/04 - Array Cardio Day 1/index-FINISHED.html b/04 - Array Cardio Day 1/index-FINISHED.html index e61b94c..7e3c68f 100644 --- a/04 - Array Cardio Day 1/index-FINISHED.html +++ b/04 - Array Cardio Day 1/index-FINISHED.html @@ -27,7 +27,7 @@ { first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 } ]; - const people = ['Beck, Glenn', 'Becker, Carl', 'Beckett, Samuel', 'Beddoes, Mick', 'Beecher, Henry', 'Beethoven, Ludwig', 'Begin, Menachem', 'Belloc, Hilaire', 'Bellow, Saul', 'Benchley, Robert', 'Benenson, Peter', 'Ben-Gurion, David', 'Benjamin, Walter', 'Benn, Tony', 'Bennington, Chester', 'Benson, Leana', 'Bent, Silas', 'Bentsen, Lloyd', 'Berger, Ric', 'Bergman, Ingmar', 'Berio, Luciano', 'Berle, Milton', 'Berlin, Irving', 'Berne, Eric', 'Bernhard, Sandra', 'Berra, Yogi', 'Berry, Halle', 'Berry, Wendell', 'Bethea, Erin', 'Bevan, Aneurin', 'Bevel, Ken', 'Biden, Joseph', 'Bierce, Ambrose', 'Biko, Steve', 'Billings, Josh', 'Biondo, Frank', 'Birrell, Augustine', 'Black Elk', 'Blair, Robert', 'Blair, Tony', 'Blake, William']; + const people = ['Beck, Glenn', 'Becker, Carl', 'Beckett, Samuel', 'Beddoes, Mick', 'Beecher, Henry', 'Beethoven, Ludwig', 'Begin, Menachem', 'Belloc, Hilaire', 'Bellow, Saul', 'Benchley, Robert', 'Benenson, Peter', 'Ben-Gurion, David', 'Benjamin, Walter', 'Benn, Tony', 'Bennington, Chester', 'Benson, Leana', 'Bent, Silas', 'Bentsen, Lloyd', 'Berger, Ric', 'Bergman, Ingmar', 'Berio, Luciano', 'Berle, Milton', 'Berlin, Irving', 'Berne, Eric', 'Bernhard, Sandra', 'Berra, Yogi', 'Berry, Halle', 'Berry, Wendell', 'Bethea, Erin', 'Bevan, Aneurin', 'Bevel, Ken', 'Biden, Joseph', 'Bierce, Ambrose', 'Biko, Steve', 'Billings, Josh', 'Biondo, Frank', 'Birrell, Augustine', 'Black, Elk', 'Blair, Robert', 'Blair, Tony', 'Blake, William']; // Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's