diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..6347583 --- /dev/null +++ b/.gitattributes @@ -0,0 +1 @@ +*.html linguist-language=javascript 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..1b02d30 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 哦♪(^∇^*) ## 实现效果 @@ -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/02 - JS + CSS Clock/README.md b/02 - JS + CSS Clock/README.md index 31544fe..0ca0415 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 @@ -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. 调整时钟指针跳动时的过渡效果 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'; 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..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 💪 指南一 -> 作者：©[缉熙Soyaine](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 哦♪(^∇^*) ## 实现效果 @@ -23,11 +23,11 @@ console.table(thing) 1. 筛选 16 世纪出生的发明家 2. 展示他们的姓和名 -3. 把他们按照年龄从大到小进行排序 +3. 把他们按照出生日期从大到小进行排序 4. 计算所有的发明家加起来一共活了多少岁 5. 按照他们活了多久来进行排序 6. 筛选出一个网页里含有某个词语的标题 -7. 按照姓氏来对发明家进行排序 +7. 按照姓氏来进行排序 8. 统计给出数组中各个物品的数量 ## 相关知识 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 diff --git a/04 - Array Cardio Day 1/index-SOYAINE.html b/04 - Array Cardio Day 1/index-SOYAINE.html index 6de312b..e56eb6a 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 面板 💁

-

若无结果请刷新试试

+

若无结果请刷新试试

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/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 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 34a8f42..8335d96 100644 --- a/09 - Dev Tools Domination/README.md +++ b/09 - Dev Tools Domination/README.md @@ -1,10 +1,10 @@ # 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 -最后更新：2017-01-06 +最后更新：2017-09-24 ## 实现效果 @@ -31,7 +31,7 @@ ```js console.log("输出一个字符串 %s ", "log"); console.log("输出一个整数是 %d ", 1.23); //1 -console.log("输出一个小数是 %d ", 1.23); //1.23 +console.log("输出一个小数是 %f ", 1.23); //1.23 console.log("%c不同样式的输出效果", "color: #00fdff; font-size: 2em;"); ``` @@ -64,7 +64,7 @@ console.dir(p); 要清空已经打印输出的内容，有两种方式，一种是 JavaScript 语句： `console.clear()`。另一个是快捷键 Ctrl ＋ L。 -### asset 方法进行测试 +### assert 方法进行测试 接受一个表达式作为参数，如果参数返回值是 false，则会输出第二个参数中的内容。 @@ -119,4 +119,7 @@ fetch("https://api.github.com/users/soyaine") 如果 timeEnd 中的名称如果和上面不一样，得到的数据是系统当前时间换算后的毫秒值。 -**~\(≧▽≦)/~调试技巧这部分就结束啦，拿起宝剑去开疆扩土吧~** \ No newline at end of file +**~\(≧▽≦)/~调试技巧这部分就结束啦，拿起宝剑去开疆扩土吧~** + +## ChangeLog +- 2017-09-24 fix typo [issue #29](https://github.com/soyaine/JavaScript30/issues/29) diff --git a/09 - Dev Tools Domination/index-SOYAINE.html b/09 - Dev Tools Domination/index-SOYAINE.html index f67fcb1..4dcbabd 100644 --- a/09 - Dev Tools Domination/index-SOYAINE.html +++ b/09 - Dev Tools Domination/index-SOYAINE.html @@ -9,7 +9,13 @@

    ×点×我×呀×

    - \ No newline at end of file + 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/11 - Custom Video Player/README.md b/11 - Custom Video Player/README.md index ad96dd9..4dcd6f1 100644 --- a/11 - Custom Video Player/README.md +++ b/11 - Custom Video Player/README.md @@ -4,7 +4,7 @@ > 简介：[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 10 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*) > 创建时间：2017-02-06 -最后更新：2017-04-16 +最后更新：2017-09-24 ## 实现目标 * 为 `video` 元素添加自定义样式的播放控制面板 @@ -79,6 +79,7 @@ function togglePlay() { } video.addEventListener('click', togglePlay); +toggle.addEventListener('click', togglePlay); ``` 对于这种二选一的判断用三元操作符会更简洁，我们可以直接在一行里写完，像这样： @@ -240,4 +241,8 @@ progress.addEventListener('mousemove', (e) => mousedown && scrub(e)); ## **结语** 至此，我们已经实现了控制面板的绝大部分功能，最后一个留给大家自己尝试的功能是全屏播放： * 在控制面板中添加一个全屏按钮 -* 点击该按钮后可以进入/退出全屏模式 \ No newline at end of file +* 点击该按钮后可以进入/退出全屏模式 + +## ChangeLog +- 2017-02-06 完稿 +- 2017-09-24 add missing code by [issue#30](https://github.com/soyaine/JavaScript30/issues/30) 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..9fc48f1 100644 --- a/14 - JavaScript References VS Copying/README.md +++ b/14 - JavaScript References VS Copying/README.md @@ -1,10 +1,10 @@ # 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 -最后更新：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/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); diff --git a/15 - LocalStorage/README.md b/15 - LocalStorage/README.md index 80173b6..06c2776 100644 --- a/15 - LocalStorage/README.md +++ b/15 - LocalStorage/README.md @@ -1,10 +1,10 @@ # 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 -最后更新：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/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/19 - Webcam Fun/script.js b/19 - Webcam Fun/script.js index 74a095d..b6f3a5a 100644 --- a/19 - Webcam Fun/script.js +++ b/19 - Webcam Fun/script.js @@ -7,46 +7,50 @@ window.onload = function() { a = document.querySelector('a'); //滤色范围记录 filter = { - rmin:0, - rmax:255, - gmin:0, - gmax:255, - bmin:0, - bmax:255 + rmin: 0, + rmax: 255, + gmin: 0, + gmax: 255, + bmin: 0, + bmax: 255 } //调用摄像头数据 - askWebcam(); + askWebcam(); //绑定change事件动态修改图片颜色 slider.onchange = function(e) { //先将canvas恢复至原始截图 - ctx.putImageData(origindata,0,0); + ctx.putImageData(origindata, 0, 0); const target = e.target; //startPos表示操作像素点数据时的起点，从canvas获取到的像素数据每四个值表示一个像素点 //例如滑块为红色，则只需要改变像素数组中第0,4,8......个元素的值。 - const startPos = {'r':0,'g':1,'b':2}[target.name[0]]; + const startPos = { + 'r': 0, + 'g': 1, + 'b': 2 + }[target.name[0]]; //filterMin和filterMax表示相应的滤色范围上下限，若修改了红色滤色范围则取红色范围值。 //若修改蓝色的滤色范围，则取蓝色。 var tempFilter = checkFilter(target.name, target.value); const filterMin = tempFilter.min; const filterMax = tempFilter.max; //从canvas获取像素数据 - var img = ctx.getImageData(0,0,300,200); + var img = ctx.getImageData(0, 0, 300, 200); - var imgd = img.data; - //色彩过滤 - for(var i=startPos, len = imgd.length; ifilterMax){ + } else if (imgd[i] > filterMax) { imgd[i] = filterMax; } - } - //将修改后的像素数据重绘制至canvas - ctx.putImageData(img,0,0); - img.src = canvas.toDataURL(); + } + //将修改后的像素数据重绘制至canvas + ctx.putImageData(img, 0, 0); + img.src = canvas.toDataURL(); } } @@ -55,7 +59,7 @@ window.onload = function() { function takePhoto() { ctx.drawImage(video, 0, 0, 300, 200); //将原始截图保存 - origindata = ctx.getImageData(0,0,300,200); + origindata = ctx.getImageData(0, 0, 300, 200); } //保存图片 @@ -67,7 +71,7 @@ function savePhoto() { //申请网络摄像头操作权限 function askWebcam() { - navigator.getUserMedia = navigator.getUserMedia || + navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; if (navigator.getUserMedia) { @@ -92,17 +96,24 @@ function askWebcam() { } //滤色函数 -function checkFilter(name, value){ - var _min; - var _max; - var _antiname = {'rmin':'rmax','rmax':'rmin','gmin':'gmax','gmax':'gmin','bmin':'bmax','bmax':'bmin'}[name] +function checkFilter(name, value) { + var _min; + var _max; + var _antiname = { + 'rmin': 'rmax', + 'rmax': 'rmin', + 'gmin': 'gmax', + 'gmax': 'gmin', + 'bmin': 'bmax', + 'bmax': 'bmin' + }[name] filter[name] = value; //当下限值超过上限时，将两者对调 - _min = Math.min(filter[name],filter[_antiname]); - _max = Math.max(filter[name],filter[_antiname]); + _min = Math.min(filter[name], filter[_antiname]); + _max = Math.max(filter[name], filter[_antiname]); console.log(filter); return { min: _min, max: _max } -} +} \ No newline at end of file diff --git a/20 - Speech Detection/README.md b/20 - Speech Detection/README.md new file mode 100644 index 0000000..5b62c17 --- /dev/null +++ b/20 - Speech Detection/README.md @@ -0,0 +1,52 @@ +# 20 Speech Detection 中文指南 + +> 本篇作者：©[大史不说话](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 哦♪(^∇^*) + +> 创建时间：2017-09-04 +最后更新：2017-09-07 + +## 挑战任务 +本次的挑战任务，是利用浏览器内置`Web speech API`,将自己所说的话输出在页面上,仅chrome浏览器支持。 +说明：由于只有chrome浏览器实现了该接口，而语音识别需要将捕捉到的信息发送至google服务器进行处理，故本文档只提供解决思路和参考代码。 + +## 实现效果 +![结果展示](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)中的相关解释。 + +## 基本思路 +1.新建语音识别对象; +2.开启语音识别服务; +3.通过监听`result`事件，实时获取捕获到的语音信息; +4.通过监听`end`事件，当一次语音捕获结束后，重新开启该功能，实现持续的语音监听功能。 + +## 过程指南 +1.由于目前只有chrome浏览器实现了此功能，故直接使用带有前缀的构造函数来构建一个语音识别对象。 +```js +var speech = new webkitSpeechRecognition(); +``` +2.设置语音识别对象的基本属性，并开启该功能。 +```js + speech.interimResults = true; + //返回即时语音，即时语音是指SpeechRecognitionResult.isFinal 为false时捕获到的信息。 + speech.lang = 'en-US';//设置语音识别类别为英语 + speech.start();//开启功能 +``` +3.监听收到结果事件，将语音识别结果输出在DOM元素上。 +```js + speech.addEventListener('result', (e) => { + const results = Array.from(e.results) + // e.results中保存的是识别的结果，本来并不是数组，需要将其转换为数组，方便使用其map、join等方法。 + .map(result => result[0]) + .map(result => result.transcript) // 获取到每一段话，是一个数组类型 + .join(''); // 将每一段话连接成字符串 + //将结果输出在页面上 + words.innerHTML = results; + } +``` + +## 延伸思考 +由于国内网络原因，可考虑使用[科大讯飞的语音识别sdk](http://www.xfyun.cn/)，感兴趣的同学可自行尝试实现。 diff --git a/20 - Speech Detection/effects.png b/20 - Speech Detection/effects.png new file mode 100644 index 0000000..e4ed64a Binary files /dev/null and b/20 - Speech Detection/effects.png differ diff --git a/20 - Speech Detection/index-finished-Dashrun.html b/20 - Speech Detection/index-finished-Dashrun.html new file mode 100644 index 0000000..60328d2 --- /dev/null +++ b/20 - Speech Detection/index-finished-Dashrun.html @@ -0,0 +1,93 @@ + + + + + Speech Detection + + + +
    +
    + + + + + + + + diff --git a/20 - Speech Detection/index-start.html b/20 - Speech Detection/index-start.html new file mode 100644 index 0000000..fa472df --- /dev/null +++ b/20 - Speech Detection/index-start.html @@ -0,0 +1,60 @@ + + + + + Speech Detection + + + +
    +
    + + + + + + + + diff --git a/21 - Geolocation/README.md b/21 - Geolocation/README.md new file mode 100644 index 0000000..7c44d84 --- /dev/null +++ b/21 - Geolocation/README.md @@ -0,0 +1,52 @@ +# 21 Geolocation 中文指南 + +> 本篇作者：©[大史不说话](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 哦♪(^∇^*) + +> 创建时间：2017-09-08 +最后更新：2017-09-11 + +## 挑战任务 +本次的挑战任务，是利用浏览器内置`Web Geolocation API`,将获取到的地理位置及相关坐标，与`index-start.html`中的可视化指南针连接在一起。 + +## 实现效果 +![结果展示](https://github.com/soyaine/JavaScript30/blob/master/21%20-%20Geolocation/effects.png) +由于笔记本电脑一般不带速度及方向传感器，从结果中可以看到返回值中`heading`及`speed`键值均为`null`,为演示可视化效果，代码中采用手动赋值的方式进行演示。 + +## 相关知识 +1.有关地理位置接口`Geolocation`的说明，可查看[MDN](https://developer.mozilla.org/zh-CN/docs/Web/API/Geolocation)中的相关解释。 + +2.`getCurrentPosition()`方法和`watchPosition()`方法 +`getCurrentPosition()`方法在调用时返回一次相关信息，`watchPosition()`方法调用后将持续返回相关信息，两个方法调用时除了传入相关的回调函数外，还需要传入`options`配置对象作为第三参数，`options`相关键值如下： +- `enableHighAccuracy`参数表示是否高精度可用，为Boolean类型，默认为false，如果开启，响应时间会变慢，同时，在手机设备上会用掉更多的流量，也就是money了。 +- `timeout`参数表示等待响应的最大时间，默认是0毫秒，表示无穷时间。 +- `maximumAge`表示应用程序的缓存时间。单位毫秒，默认是0，意味着每次请求都是立即去获取一个全新的对象内容。 + +## 过程指南 +1.使用`getCurrentPosition()`方法获得相关信息 +```js + if(navigator.geolocation){ + navigator.geolocation.getCurrentPosition(success, error, options); + }else{ + console.log('Your broswer does not support the Geolocation API'); + } +``` +2.当成功返回结果时，在控制台输出结果，并根据结果对相应的DOM元素进行样式调整 +```js +function success(pos) { + console.log(pos); + var crd = pos.coords; + console.log('Your current position is:'); + console.log('Latitude : ' + crd.latitude); + console.log('Longitude: ' + crd.longitude); + console.log('More or less ' + crd.accuracy + ' meters.'); + + //改变传感器速度值和罗盘的指向 + speed.innerHTML = crd.speed; + arrow.style.transform = `rotate(${crd.heading}deg)`; + +}; +``` + + diff --git a/21 - Geolocation/effects.png b/21 - Geolocation/effects.png new file mode 100644 index 0000000..c06ca86 Binary files /dev/null and b/21 - Geolocation/effects.png differ diff --git a/21 - Geolocation/index-finished-Dashrun.html b/21 - Geolocation/index-finished-Dashrun.html new file mode 100644 index 0000000..86ebe3b --- /dev/null +++ b/21 - Geolocation/index-finished-Dashrun.html @@ -0,0 +1,100 @@ + + + + + Document + + + + + + +

    + 0 + KM/H +

    + + + + + diff --git a/21 - Geolocation/index-start.html b/21 - Geolocation/index-start.html new file mode 100644 index 0000000..f3ed587 --- /dev/null +++ b/21 - Geolocation/index-start.html @@ -0,0 +1,63 @@ + + + + + Document + + + + + + +

    + 0 + KM/H +

    + + + + + diff --git a/22 - Follow Along Link Highlighter/README.md b/22 - Follow Along Link Highlighter/README.md new file mode 100644 index 0000000..36bd906 --- /dev/null +++ b/22 - Follow Along Link Highlighter/README.md @@ -0,0 +1,74 @@ +# 22 Follow Along Link Highliter 中文指南 + +> 本篇作者：©[大史不说话](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 哦♪(^∇^*) + +> 创建时间：2017-09-12 +最后更新：2017-09-16 + +## 挑战任务 +初始文档`index-start.html`提供了一组使用`