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 7fe38a8..1b02d30 100644 --- a/01 - JavaScript Drum Kit/README.md +++ b/01 - JavaScript Drum Kit/README.md @@ -1,6 +1,6 @@ -# 01 JavaScript Dump Kit 中文指南 +# 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`),所以需要添加一个判断语句,使每发生一次按键事件时,只去除一次样式。 @@ -102,4 +102,4 @@ funciton remove(event) { this.classList.remove('playing'); // event.target.classList.remove('playing'); } -```` \ No newline at end of file +```` diff --git a/01 - JavaScript Drum Kit/index-draft.html b/01 - JavaScript Drum Kit/index-draft.html index 1e4bfab..903fcc3 100644 --- a/01 - JavaScript Drum Kit/index-draft.html +++ b/01 - JavaScript Drum Kit/index-draft.html @@ -69,7 +69,7 @@ } function removeTransition(e) { - if(e.propertyName != 'border-left-color') return; + if(e.propertyName !== 'border-left-color') return; this.classList.remove('playing'); } @@ -85,31 +85,30 @@ const keyCode = event.key; if ( keyCode === '76') { - alert("76"); + alert('76'); } else { - alert("false"); + alert('false'); } } - window.addEventListener("keydown", function(e){ + window.addEventListener('keydown', function(e){ const audio = document.querySelector(`audio[data-key="${ e.keyCode }"]`); const key = document.querySelector(`div[data-key="${ e.keyCode }"]`); -// console.log(video); -// console.log(key); + console.log(video); + console.log(key); if(!audio) return; audio.currentTime = 0; audio.play(); - key.classList.add("playing"); -// key.classList.remove("playing"); + key.classList.add('playing'); + // key.classList.remove("playing"); }, false); function removeTransition(e){ -// if(e.propertyName !== "border-left-color") return; + // if(e.propertyName !== "border-left-color") return; console.log(e.propertyName); -// e.target.classList.remove("playing"); + // e.target.classList.remove("playing"); } - const keys = document.querySelectorAll('.key'); keys.forEach( keyin => keyin.addEventListener('transitionend', removeTransition)); diff --git a/02 - JS + CSS Clock/README.md b/02 - JS + CSS Clock/README.md index fa56a74..0ca0415 100644 --- a/02 - JS + CSS Clock/README.md +++ b/02 - JS + CSS Clock/README.md @@ -1,8 +1,11 @@ # 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日 +最后更新:2017年01月06日 + ## 实现效果 ![实现效果 by soyaine](https://cl.ly/0y1C2T1z3p2R/Screen%20recording%202016-12-23%20at%20123025%20PM.gif) @@ -18,7 +21,7 @@ 3. 每一秒改变一次指针状态 **涉及到的特性:** -- `transform-oragin` +- `transform-origin` - `transform: rotate()` - `transition` - `transition-timing-function: cubic-bezier(x, x, x, x)` @@ -30,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. 调整时钟指针跳动时的过渡效果 @@ -101,5 +104,58 @@ ``` 4. 将角度值赋值给 HTML 元素的 `style` 中的 `transform` 属性 + +## 延伸思考 + +> 2017年01月06日 更新完善,感谢 [@cody1991 提的 issue](https://github.com/soyaine/JavaScript30/issues/1) + +此处存在一个小瑕疵,当秒针旋转一圈之后回到初始位置,开始第二圈旋转,角度值的变化时 444° → 90° → 96° .... 这个过程中,指针会先逆时针从 444° 旋转至 90°,再继续我们期望的顺时针旋转,由于秒针变换时间只有 0.05s,所以呈现的效果就是秒针闪了一下,如果想要观察细节,可以将 `.second` 设为 `transition: all 1s`。要解决这个问题,目前找到了两种解决办法: + +#### 方法一 + +在这个特殊点将指针的 `transition` 属性去掉,由于距离短、时间短,将逆时针回旋的过程瞬间完成。 + +```js +if (secondDeg === 90) secHand.style.transition = 'all 0s'; +else secHand.style.transition = 'all 0.05s'; + +if (minDeg === 90) minHand.style.transition = 'all 0s'; +else minHand.style.transition = 'all 0.1s'; +``` + +#### 方法二 + +既然引发问题的是角度的大小变化,那就可以对这个值进行处理。此前的代码中,每秒都会重新 new 一个 Date 对象,用来计算角度值,但如果让这个角度值一直保持增长,也就不会出现逆时针回旋的问题了。 + +这是 @cody1991 提供的思路。只在页面第一次加载时 new 一次 Date 对象,此后每秒直接更新角度值。 + +```js +let secondDeg = 0, +minDeg = 0, +hourDeg = 0; + +function initDate() { + const date = new Date(); + const second = date.getSeconds(); + secondDeg = 90 + (second / 60) * 360; + const min = date.getMinutes(); + minDeg = 90 + (min / 60) * 360 + ((second / 60) / 60) * 360; + const hour = date.getHours(); + hourDeg = 90 + (hour / 12) * 360 + ((min / 60) / 12) * 360 + (((second / 60) / 60) / 12) * 360; +} + +function updateDate() { + secondDeg += (1 / 60) * 360; + minDeg += ((1 / 60) / 60) * 360; + hourDeg += (((1 / 60) / 60) / 12); -大功告成! \ No newline at end of file + secHand.style.transform = `rotate(${ secondDeg}deg)`; + minHand.style.transform = `rotate(${ minDeg }deg)`; + hourHand.style.transform = `rotate(${ hourDeg }deg)`; +} + +initDate(); +setInterval(updateDate, 1000); +``` + +问题解决。大功告成! \ No newline at end of file diff --git a/02 - JS + CSS Clock/index-SOYAINE.html b/02 - JS + CSS Clock/index-SOYAINE.html index d7539e4..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; } @@ -124,28 +123,76 @@ const secHand = document.querySelector('.second-hand'); const minHand = document.querySelector('.min-hand'); const hourHand = document.querySelector('.hour-hand'); - + function setDate() { const date = new Date(); - + const second = date.getSeconds(); - const secondDeg = (90 + (second / 60) * 360) % 360; + const secondDeg = (90 + (second / 60) * 360); const min = date.getMinutes(); - const minDeg = (90 + (min / 60) * 360) % 360; + const minDeg = (90 + (min / 60) * 360); const hour = date.getHours(); const hourDeg = (90 + (hour / 12) * 360 + (min / 12 / 60) * 360);// 加入分钟所占的时间,使时针可以缓慢地移动 + +// 解决指针跳顿问题【第一种方法】 +// 在发生跳顿的角度值处,将 CSS 的 `transition` 属性去掉 + if (secondDeg === 90) secHand.style.transition = 'all 0s'; + 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 cubic-bezier(0.9, 0.54, 0.26, 1.68)'; + +// 时针间距过大不做处理 +// if (hourDeg === 116.5) hourHand.style.transition = 'all 0s'; +// else hourHand.style.transition = 'all 3s'; + secHand.style.transform = `rotate(${ secondDeg }deg)`; minHand.style.transform = `rotate(${ minDeg }deg)`; hourHand.style.transform = `rotate(${ hourDeg }deg)`; -// console.log(`${hour}:${min}:${second} - ${hourDeg}:${minDeg}:${secondDeg}` ); + console.log(`${hour}:${min}:${second} - ${hourDeg}:${minDeg}:${secondDeg}` ); } // setDate(); setInterval(setDate, 1000); + +

AltStyle によって変換されたページ (->オリジナル) /

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 new file mode 100644 index 0000000..3cf6bd9 --- /dev/null +++ b/08 - Fun with HTML5 Canvas/README.md @@ -0,0 +1,211 @@ +# 08 HTML5 Canvas 实现彩虹画笔绘画板指南 + +> 作者:©[未枝丫](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 哦♪(^∇^*) + +## 实现效果 + +![HTML5 Canvas 画板效果](https://cl.ly/412q1g0u3N31/Screen%20recording%202017-01-04%20at%20073805%20PM.gif) + +用 HTML5 中的 Canvas 的路径绘制实现一个绘画板,可供鼠标画画,颜色呈彩虹色渐变,画笔大小同样呈渐变效果。这部分不涉及 CSS 内容,全部由 JS 来实现。[在线体验请看这个链接](http://soyaine.cn/JavaScript30/08%20-%20Fun%20with%20HTML5%20Canvas/index-SOYAINE.html)。 + +## 涉及特性 + +Canvas: + +- 基本属性 + - `getContext()` + - `strokeStyle` + - `fillStyle` + - `lineCap` + - `lineJoin` +- 路径绘制 + - `beginPath()` + - `lineTo()` + - `moveTo()` + +鼠标事件处理: + +- `mousemove` +- `mousedown` +- `mouseup` +- `mouseout` + +## 过程指南 + +1. 获取 HTML 中的 `` 元素,并设定宽度和高度 +2. `.getContext('2d')` 获取上下文,下面以 ctx 表示 +3. 设定 ctx 基本属性 + - 描边和线条颜色 + - 线条宽度 + - 线条末端形状 +4. 绘画效果 + 1. 设定一个用于标记绘画状态的变量 + 2. 鼠标事件监听,不同类型的事件将标记变量设为不同值 + 3. 编写发生绘制时触发的函数,设定绘制路径起点、终点 +5. 线条彩虹渐变效果(运用 hsl 的 `h` 值的变化,累加) +6. 线条粗细渐变效果(设定一个范围,当超出这个范围时,线条粗细进行逆向改变 + +## 相关知识 + +### [Canvas](https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API) + +首先需要了解最基本的 Canvas 用法,创建一个可以绘画的环境,由对某个元素获取其用于渲染的上下文开始: + +```js +var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); +``` + +对于这个用于渲染的 ctx(请自动替换成上下文这个别扭的词),有一些基本样式属性可供修改,类似于配置你的调色盘: + +- `lineCap`:笔触的形状,有 round | butt | square 圆、平、方三种。 +- `lineJoin`:线条相较的方式,有 round | bevel | miter 圆交、斜交、斜接三种。 +- `lineWidth`:线条的宽度 +- `strokeStyle`:线条描边的颜色 +- `fillStyle`:填充的颜色 + +Canvas 让 JS 具备了动态绘制图形的能力,但在这里例子中我们只需要使用到一些简单的[路径绘制方法](https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes#绘制路径),路径是点和线的集合,下面只列举了我们用到的方法: + +- `beginPath()`:新建一条路径 +- `stroke()`:绘制轮廓 +- `moveTo()`:(此次)绘制操作的起点 +- `lineTo()`:路径的终点 + +### 彩虹渐变颜色——HSL + +在这个挑战中,涉及到改变线条的颜色,如何实现彩虹的渐变效果?我们需要利用 HSL 色彩模式,首先可以去这个网站 [http://mothereffinghsl.com](http://mothereffinghsl.com/) 感受一下 HSL 不同色彩值对应的效果。 +- H(hue) 代表色调,取值为 0~360,专业术语叫色相 +- S 是饱和度,可以理解为掺杂进去的灰度值,取值为 0~1 +- L 则是亮度,取值也是 0~1,或者百分比。 + +这之中 H 值从 0 到 360 的变化代表了色相的角度的值域变化,利用这一点就可以实现绘制时线条颜色的渐变了,只需要在它的值超过 360 时恢复到 0 重新累加即可。 + +```js +let hue = 0; + +ctx.strokeStyle = `hsl(${ hue }, 100%, 50%)`; +if(hue>= 360) hue = 0; +hue++; +``` + +除此之外,如果想实现黑白水墨的颜色,可以将颜色设置为黑色,通过透明度的改变来实现深浅不一的颜色。 + +## 疑难问题 + +### 如何让按下鼠标后的轨迹画在画布上? + +#### 事件监听部分 + +解决这个问题,只需要将鼠标绘制时的动作分解清楚。思考或者模拟一下,在用鼠标画一条线时发生了什么: + +1. 单击鼠标-按下准备开始 +2. 移动鼠标-画线 +3. 松开手指-结束画线 + +这几个分解动作都有对应的鼠标事件,在编写这部分时你可以对每个事件监听 `console.log(e)` 来查看当前触发事件的属性、类型。对应 ctx 的操作的即是第二阶段,所以可以设定 `mousemove` 事件监听触发的函数进行绘制。 + +```js +canvas.addEventListener('mousemove', draw); +``` + +但只有这个并不够,你会发现只有 `mousemove` 事件监听时,只要鼠标在页面上划过都会触发函数。这时我们需要一个标记变量,来控制当前鼠标是不是处在按下的状态。 + +```js +let isDrawing = false; + +canvas.addEventListener('mousedown', isDrawing = true); +canvas.addEventListener('mousemove', draw); +canvas.addEventListener('mouseup', () => isDrawing = false); +canvas.addEventListener('mouseout', () => isDrawing = false); // 鼠标移出画布范围时 +``` + +#### Canvas 绘制部分 + +处理好事件监听,就可以编写绘制时触发的函数了。 + +```js +[lastX, lastY] = [e.offsetX, e.offsetY]; +ctx.beginPath(); +// 起点 +ctx.moveTo(lastX, lastY); +// 终点 +ctx.lineTo(e.offsetX, e.offsetY); +ctx.stroke(); +``` + +此处再次引入两个变量,用于存放上一次绘制线条的终点。但这个写法有一点小问题。 + +### 如何解决线条的衔接问题? + +回想一下你点进来看顶部的示例动图时,有没有注意到一个细节,中间的两个数字是由一些点构成的,而不是一条线,这是由于我写的时候速度过快造成的,这是为什么呢?是我忽略了一个问题,上面这种写法下,`lastX` 和 `offsetX` 的值其实是相等的,这就出现了只绘制出一个个点的状况,所以需要改变一下更新 last 值的位置。 + +```js + +function draw() { + /* ... */ + ctx.beginPath(); + // 起点 + ctx.moveTo(lastX, lastY); + // 终点 + ctx.lineTo(e.offsetX, e.offsetY); + ctx.stroke(); + [lastX, lastY] = [e.offsetX, e.offsetY]; + /* ... */ +} + +/*..*/ + +canvas.addEventListener('mousedown', (e) => { + isDrawing = true; + [lastX, lastY] = [e.offsetX, e.offsetY]; + // 同样效果的写法: + lastX = e.offsetX; + lastY = e.offsetY; +}); +``` + +注意箭头函数里的参数 `e` 别忘记写。修复好问题之后,效果是下面这样,也就不会出现题图中的断断续续的情况了,此处我设置了透明度方便理解,可以观察到,当移动速度加快时,两个坐标之间会自动以直线连接起来。 + +![不间断的路径演示图 ](https://cl.ly/1c1W0T3Q0V3r/Image%202017-01-04%20at%208.10.21%20PM.png) + +### 如何让线条的颜色和粗细发生渐变? + +上面已经简单介绍了 HSL 的独特性质,那如何把这个特性应用起来呢?很简单,只需要在每次新建路径时添加一个判断和累记的操作即可。颜色需要控制它的 H 值在 0~360 之间变化。 + +而线条粗细也是一样的道理,只需要保证它在你期望的范围内。在这里可以引入一个布尔类型的标记变量,用它的值来控制线条是变粗还是变细,在线条粗细超过我们需要的范围时,将它取反。 + +```js +let direction = true; +ctx.lineWidth = 90; + +// 控制笔触大小 +if(ctx.lineWidth> 100 || ctx.lineWidth < 80) { + direction = !direction; +} +if (direction) { + ctx.lineWidth++; +} else { + ctx.lineWidth--; +} +``` + +## 延伸思考 + +在手机上或者触摸屏上操作时,用鼠标并不是最好的操作方式,所以我添加了触摸操作的事件处理,但由于触摸事件中可以获取到的坐标属性名,与鼠标事件不相同,如果要同时支持触摸绘图,需要判断事件类型。 + +```js +// 处理鼠标点击操作 +if(e.type == "mousemove"){ + x = e.offsetX; + y = e.offsetY; +} else { +// 处理触摸屏操作 + x = e.changedTouches[0].clientX; + y = e.changedTouches[0].clientY; +} +``` + +这样一来,你在手机 Chrome 上也可以试一试这个网页绘图板的效果。 + +**至此,挑战 08 就完成啦,棒棒哒!** \ No newline at end of file diff --git a/08 - Fun with HTML5 Canvas/index-FINISHED.html b/08 - Fun with HTML5 Canvas/index-FINISHED.html new file mode 100644 index 0000000..cdf1f83 --- /dev/null +++ b/08 - Fun with HTML5 Canvas/index-FINISHED.html @@ -0,0 +1,74 @@ + + + + + HTML5 Canvas + + + + + + + + + diff --git a/08 - Fun with HTML5 Canvas/index-SOYAINE.html b/08 - Fun with HTML5 Canvas/index-SOYAINE.html index a6f37ae..38ae672 100644 --- a/08 - Fun with HTML5 Canvas/index-SOYAINE.html +++ b/08 - Fun with HTML5 Canvas/index-SOYAINE.html @@ -5,7 +5,7 @@ HTML5 Canvas - + @@ -93,7 +97,12 @@ diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html new file mode 100644 index 0000000..37c148d --- /dev/null +++ b/08 - Fun with HTML5 Canvas/index-START.html @@ -0,0 +1,19 @@ + + + + + HTML5 Canvas + + + + + + + + + diff --git a/09 - Dev Tools Domination/README.md b/09 - Dev Tools Domination/README.md new file mode 100644 index 0000000..8335d96 --- /dev/null +++ b/09 - Dev Tools Domination/README.md @@ -0,0 +1,125 @@ +# 09 Console 调试技巧指南 + +> 作者:©[未枝丫](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年09月24日 + +## 实现效果 + +这个部分主要是实践了一些在 Console 面板里的调试技巧,如果硬要说什么实现效果的话,那可能就是......"必备!你不得不知道的 10 种炫酷调试技巧!"建议直接打开[页面](https://soyaine.github.io/JavaScript30/09%20-%20Dev%20Tools%20Domination/index-SOYAINE.html)后按 F12 查看各种输出结果。 + +## 过程指南 + +### 给页面标签添加断点 + +在按 F12 出现的 Chrome 开发工具中,在 Elements 选项卡之中,选择页面的某个标签(以 `

`为例),右键 → Break on → Attributes modifications。即可为该元素添加断点,当它的属性发生改变时,会自动定位到页面代码中的对应行。 + +你如此设置之后,点击页面中的文字试一试效果。 + +### `.log` 的更多用法 + +这个是最常用的,但它还有一些更多功能:比如参数支持类似 C 语言的字符串替换模式。 + +- `%s` 字符串 +- `%d` 整数 +- `%f` 浮点值 +- `%o` Object +- `%c` 设定输出的样式,在之后的文字将按照第二个参数里的值进行显示 + +```js +console.log("输出一个字符串 %s ", "log"); +console.log("输出一个整数是 %d ", 1.23); //1 +console.log("输出一个小数是 %f ", 1.23); //1.23 +console.log("%c不同样式的输出效果", "color: #00fdff; font-size: 2em;"); +``` + +### 不同样式的输出 + +除了常规的 `log` 之外,还有一些其他已设定好的样式,区别在于图标或者颜色不一样: + +```js +// warning! +console.warn("三角感叹号图标,淡黄色背景") +// Error :| +console.error("红叉图标,红字红色背景"); +// Info +console.info("蓝色圆形感叹号图标"); +``` + +### 打印输出 DOM 元素 + +获取 DOM 元素之后,也可以打印输出。 + +```js +const p = document.querySelector('p'); +console.log(p); +console.dir(p); +``` + +不同的地方在于,`log` 输出这个 DOM 的 HTML 标签,而 `dir` 则会输出这个 DOM 元素的属性列表。 + +### 清空 console 面板输出内容 + +要清空已经打印输出的内容,有两种方式,一种是 JavaScript 语句: `console.clear()`。另一个是快捷键 Ctrl + L。 + +### assert 方法进行测试 + +接受一个表达式作为参数,如果参数返回值是 false,则会输出第二个参数中的内容。 + +```JS +console.assert(1 ===1, "(这句发布时删除)"); +console.assert(1 ===0, "看看看,失策了吧"); +console.assert(p.innerHTML.match("她"), "我这儿才没有她这个人"); +``` + +### 以更清晰的形式输出数据 + +此前的文章中已经提到了 `console.table()` 方法,可以将数组、对象以表格的形式打印输出,如果只输出其中的某一列,可以加上第二个参数,示例如下。 + +```js +console.table(dogs); +console.table(dogs, ["age"]); +``` + +除了按表格,还可以将数据分组展示,直接看例子: + +```js +const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }]; +dogs.forEach(dog => { + console.group(); +// console.groupCollapsed(); // 收起列表 + console.log(`${dog.name}`); + console.log(`${dog.age}`); + console.log(`${dog.name} 有 ${dog.age} 岁了`); + console.groupEnd(); +}); +``` + +这个例子中,`group()`/`groupCollapsed()` 与 `groupEnd()` 之间的内容会自动分组,区别在于是否自动展开。效果类似于 Excel 中的分类汇总的简易版。 + +### `count` 计数 + +这里的计数对象仅限于由 `count()` 输出的内容,并非所有 console 中的输出。 + +### `time` 计时 + +用 `time("name")` 和 `timeEnd("name")` 分别控制开始点和结束点,它们两的参数表示当前计时的名称,可以自定义但需要保持相同。所以如果想看异步获取数据花了多场时间,可以这样写: + +````js +console.time('fetch my data'); +fetch("https://api.github.com/users/soyaine") + .then(data => data.json()) + .then(data => { + console.timeEnd('fetch my data'); + console.log(data); +}); +```` + +如果 timeEnd 中的名称如果和上面不一样,得到的数据是系统当前时间换算后的毫秒值。 + +**~\(≧▽≦)/~调试技巧这部分就结束啦,拿起宝剑去开疆扩土吧~** + +## ChangeLog +- 2017年09月24日 fix typo [issue #29](https://github.com/soyaine/JavaScript30/issues/29) diff --git a/09 - Dev Tools Domination/index-FINISHED.html b/09 - Dev Tools Domination/index-FINISHED.html new file mode 100644 index 0000000..55cd3a2 --- /dev/null +++ b/09 - Dev Tools Domination/index-FINISHED.html @@ -0,0 +1,89 @@ + + + + + Console Tricks! + + + +

×ばつ

+ + + + diff --git a/09 - Dev Tools Domination/index-SOYAINE.html b/09 - Dev Tools Domination/index-SOYAINE.html new file mode 100644 index 0000000..4dcbabd --- /dev/null +++ b/09 - Dev Tools Domination/index-SOYAINE.html @@ -0,0 +1,98 @@ + + + + + Console 面板调试技巧 + + + +

×ばつ

+ + + + diff --git a/09 - Dev Tools Domination/index-START.html b/09 - Dev Tools Domination/index-START.html new file mode 100644 index 0000000..196fffd --- /dev/null +++ b/09 - Dev Tools Domination/index-START.html @@ -0,0 +1,46 @@ + + + + + Console Tricks! + + + +

×ばつ

+ + + + diff --git a/10 - Hold Shift and Check Checkboxes/README.md b/10 - Hold Shift and Check Checkboxes/README.md new file mode 100644 index 0000000..dbb6c5f --- /dev/null +++ b/10 - Hold Shift and Check Checkboxes/README.md @@ -0,0 +1,132 @@ +# 10 JS 实现 Checkbox 中按住 Shift 的多选功能 + +> 作者:©[未枝丫](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日 +最后更新:2017年01月07日 + +## 实现效果 + +![shift 多选效果示例](https://cl.ly/3l2V0I2P0Q0x/Screen%20recording%202017-01-08%20at%20120342%20AM.gif) + +初始文档中提供了一组 `checkbox` 类型的 `input` 元素,选中某个复选框时,其 `

` 标签中的文字会显示删除线。最终效果是,提供按下 Shift 键后进行多选操作的功能。 [在线体验请点这里](https://soyaine.github.io/JavaScript30/10%20-%20Hold%20Shift%20and%20Check%20Checkboxes/index-SOYAINE.html)。 + +## 过程指南 + +1. 获取所有的 `` 元素,并添加事件监听 + + ```js + const boxs = document.querySelectorAll('.inbox input[type="checkbox"]'); + boxs.forEach(box => box.addEventListener('click', handleCheck)); + ``` + +2. 编写 handleCheck 内部的处理逻辑(细节请看下一部分) + +## 解决思路 + +在谈具体的代码时,先讲讲思路。首先来复现一下,当你按下 Shift 键进行多选时,发生了什么? + +1. 选中 A 项 +2. 按下 Shift +3. 再选中 B 项 +4. A-B 之间的所有项都被选中 + +关键点就在于 A、B 划出了一个范围,在这个范围之内的元素状态发生了改变。A 是上一次操作选中的对象,B 是此次操作对象,之后的内容将会用这两个单词来叙述。下面的方案就依据划定范围的方法不同来进行区分。 + +### 方法一 + +Wes Bos 在文档里提供了一种解决办法:用一个变量,来标记这个范围。 + +变量初始值为 `false`,当按下 Shift 键且同时选中了某个元素的时候,遍历所有项,遍历过程中,若遇到 A 或 B,则将标记值取反。同时,将所有标记为 `true` 的项设置为选中。 + +```js +let lastChecked; + +// 处理方法一:用变量 inBetween 对需要选中的元素进行标记 +function handleCheck0(e) { + let inBetween = false; + if(e.shiftKey && this.checked){ + boxs.forEach(input => { + console.log(input); + if(input === lastChecked || input ===this) { + inBetween = !inBetween; + } + if(inBetween) { + console.log("on"); + input.checked = true; + } + }); + } + lastChecked = this; +} +``` + +> 延伸思考 + +上面会出现一个问题,初次加载页面时,按住 Shift 再点击某一项,此项之后的元素都会被选中。此外,对于取消选中,无法批量操作。所以我参照了 Stack Overflow 的一个答案: [How can I shift-select multiple checkboxes like GMail?](http://stackoverflow.com/a/659571/6820726) 改进得到第二种解决方案。 + +### 方法二 + +方法一中的 `inBetween` 仅仅表示此项是否在被选中的范围中,此处会赋给它更多的意义,用它来表示此项是选中还是未选中,而范围划定则由数组来解决。 + +首先将获取到的 `` 组转化为数组,针对每次操作,获取 A 和 B,利用 `indexOf()` 来获得 A 和 B 在数组中的索引值,由此即可确定范围,并能通过 `slice()` 来直接截取 A-B 的所有 DOM 元素,并进行状态改变的操作,而变量 `onOff` 表示 A-B 范围内的状态,`true` 表示选中,`false` 表示取消选中。 + +1. 转换 Nodelist 为数组 + + ````js + const boxs = document.querySelectorAll('.inbox input[type="checkbox"]'); + const boxArr = Array.from(boxs); + ```` + +2. 针对按下了 Shift 键的情况,获取 A-B 范围 + + ````js + let start = boxArr.indexOf(this); + let end = boxArr.indexOf(lastChecked); + ```` + +3. 截取该范围内的数组元素,并改变选中状态 + + ```js + boxArr.slice(Math.min(start, end), Math.max(start, end) + 1) + .forEach(input => input.checked = onOff); + ``` + +4. 确定选中 or 取消选中 + + ````js + onOff = lastChecked.checked ? true : false; + ```` + +5. 标记 A 值 + + ````js + if(!lastChecked) lastChecked = this; + /* ... */ + lastChecked = this; + ```` + +注意,以上几点是按点抽出的分块代码,整合起来的解决办法如下: + +```js +const boxArr = Array.from(boxs); +let lastChecked; +let onOff = false; + +// 处理方法二:利用数组索引获取需要选中的范围 +function handleCheck1(e) { + if(!lastChecked) lastChecked = this; + onOff = lastChecked.checked ? true : false; + if(e.shiftKey) { + let start = boxArr.indexOf(this); + let end = boxArr.indexOf(lastChecked); + boxArr.slice(Math.min(start, end), Math.max(start, end) + 1) + .forEach(input => input.checked = onOff); + console.log(start + "+" + end); + } + lastChecked = this; +} +``` + +这样一来,挑战 10 就完!成!啦!恭喜走完了 1/3 的路程\(^o^)/~ \ No newline at end of file diff --git a/10 - Hold Shift and Check Checkboxes/index-FINISHED.html b/10 - Hold Shift and Check Checkboxes/index-FINISHED.html new file mode 100644 index 0000000..1873def --- /dev/null +++ b/10 - Hold Shift and Check Checkboxes/index-FINISHED.html @@ -0,0 +1,138 @@ + + + + + Document + + + + +

+
+ +

This is an inbox layout.

+
+
+ +

Check one item

+
+
+ +

Hold down your Shift key

+
+
+ +

Check a lower item

+
+
+ +

Everything inbetween should also be set to checked

+
+
+ +

Try do it with out any libraries

+
+
+ +

Just regular JavaScript

+
+
+ +

Good Luck!

+
+
+ +

Don't forget to tweet your result!

+
+
+ + + + diff --git a/10 - Hold Shift and Check Checkboxes/index-SOYAINE.html b/10 - Hold Shift and Check Checkboxes/index-SOYAINE.html new file mode 100644 index 0000000..0c3e81e --- /dev/null +++ b/10 - Hold Shift and Check Checkboxes/index-SOYAINE.html @@ -0,0 +1,149 @@ + + + + + Shift 多选 + + + + +
+
+ +

这是一个邮件收件箱

+
+
+ +

选中一项

+
+
+ +

然后按住 Shift 键

+
+
+ +

选择另外一项

+
+
+ +

它们之间的都会被选中

+
+
+ +

试着实现这个功能

+
+
+ +

只用原生 JS

+
+
+ +

Good Luck!

+
+
+ +

记得展示你的成果♪(^∇^*)

+
+
+ + + + \ No newline at end of file diff --git a/10 - Hold Shift and Check Checkboxes/index-START.html b/10 - Hold Shift and Check Checkboxes/index-START.html new file mode 100644 index 0000000..eb7ed31 --- /dev/null +++ b/10 - Hold Shift and Check Checkboxes/index-START.html @@ -0,0 +1,109 @@ + + + + + Document + + + + +
+
+ +

This is an inbox layout.

+
+
+ +

Check one item

+
+
+ +

Hold down your Shift key

+
+
+ +

Check a lower item

+
+
+ +

Everything inbetween should also be set to checked

+
+
+ +

Try do it with out any libraries

+
+
+ +

Just regular JavaScript

+
+
+ +

Good Luck!

+
+
+ +

Don't forget to tweet your result!

+
+
+ + + + diff --git a/11 - Custom Video Player/README.md b/11 - Custom Video Player/README.md new file mode 100644 index 0000000..4dcd6f1 --- /dev/null +++ b/11 - Custom Video Player/README.md @@ -0,0 +1,248 @@ +# 11 自定义视频播放器 + +> 作者:[@DrakeXiang](https://github.com/DrakeXiang) Review:[@zzh466](http://github.com/zzh466)、[@Xing Liu](https://github.com/S1ngS1ng) +> 简介:[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年09月24日 + +## 实现目标 +* 为 `video` 元素添加自定义样式的播放控制面板 + * 可滑动调节音量、播放速度 + * 可通过按钮快进、回退 + * 可点击视频画面或按钮播放或暂停视频播放 + * 可点击或拖动进度条选择视频播放进度 + +## 解决思路 +0. 首先,我们已经有了 HTML 文件,里面包含各种播放器用到的元素,格式也已经在 CSS 文件中帮我们设置好了 +1. 在 JS 中选择我们需要添加功能的 HTML 元素,建立好变量 +2. 用 JS 写好播放器的功能 +3. 给第一步中获取的元素加上事件监听和回调,即可实现功能 + +## 知识点 +* `video` 对象的各种属性、方法和事件 + * `paused` + * `play()` + * `pause()` + * `currentTime` + +## 过程指南 + +### 开始 + +HTML 元素中,`video` 标签是我们的视频,而下面的 `player__controls` 就是我们自己的控制面板 + +```html +
+ + +
+
+ +
+ + + + + +
+
+``` + +开始之前我们先把所有需要用到的元素节点先取到: + +```javascript +/* 获取元素 */ +const player = document.querySelector('.player'); +const video = player.querySelector('.viewer'); +const progress = player.querySelector('.progress'); +const progressBar = player.querySelector('.progress__filled'); +const toggle = player.querySelector('.toggle'); +const skipButtons = player.querySelectorAll('[data-skip]'); +const ranges = player.querySelectorAll('.player__slider'); +``` + +### **播放/暂停** +#### 功能实现 +视频最主要的功能自然就是播放和暂停了,而且其他功能也需要视频播放之后才能看出效果,所以我们先来实现这个功能。 +`video` 对象有一个叫 `paused` 的属性来判断视频是否在播放;另外还提供了两个方法来进行播放和暂停的操作:`.play()` 方法可以播放视频,`.pause()` 方法暂停播放 + +那么只需要在点击的视频的时候进行这两个操作就可以了,我们可以写一个 `togglePlay` 方法,根据视频的播放状态来判断该执行哪个: + +```javascript +function togglePlay() { + if (video.paused) { + video.play(); + } else ( + video.pause(); + ) +} + +video.addEventListener('click', togglePlay); +toggle.addEventListener('click', togglePlay); +``` + +对于这种二选一的判断用三元操作符会更简洁,我们可以直接在一行里写完,像这样: + +```javascript +function tooglePlay() { + video.paused ? video.play() : video.pause() +} +``` +或者我们可以用字符串来执行属性方法: + +```javascript +function tooglePlay() { + const method = vidoe.paused ? 'play' : 'pause'; + video[method](); + +} +``` +这种方法可能会觉得看起来别扭,但在有些情况下是挺有用的。现在我们点击视频的话已经能够正常切换播放和暂停的状态了。 + +#### **图标切换** +为了让用户知晓播放器状态,我们需要直观地通过图标来展示。当然,我们可以在 `togglePlay()` 方法中处理,不过更好的方式是给播放器加上另一个事件监听,用视频本身的播放状态来判断。 + +这是因为,除了点击播放/暂停按钮以外,我们还可以通过比如键盘快捷键、第三方插件甚至耳机上的操作按钮等其他方式来控制。因此,通过视频本身的播放状态来判断是最不容易出错的。代码如下: + +```javascript +// 逻辑 +function updateButton() { + const icon = this.paused ? '►' : '❚ ❚'; + toggle.textContent = icon; +} +// 事件 +video.addEventListener('play', updateButton); +video.addEventListener('pause', updateButton); +``` + +上面的代码中,我们使用了关键字 `this`。其实在调用 `updateButton` 的时候,这个方法已经被绑定在了 `addEventListener` 的调用者上,也就是绑定到了 `video` 上。因此,`this.paused` 在这里就相当于 `video.paused`。 + +### **快退/快进** +在 HTML 中,我们已经给快退/快进键添加了一个 `data-skip` 属性,对应的值即为快退/快进的秒数。 + +我们先来写事件处理。首先要有一个回调函数,叫 `skip`。事件监听的对象,当然是 `skipButtons`,对应的就是快退/快进两个按键。可以尝试一下,如果我们直接在命令行输出这个 `skipButtons`,会得到一个数组。因此,我们需要用 `forEach` 来遍历一下,给每一个按钮都添加上事件监听: + +```javascript +// 逻辑 +function skip() { + +} +// 事件 +skipButtons.forEach(button => button.addEventListener('click', skip)); +``` + +然后我们来处理逻辑部分。`video` 有一个属性叫 `currentTime`,可以用来设置视频当前的时间。我们只要修改这个属性就可以了: + +```javascript +function skip() { + video.currentTime += parseFloat(this.dataset.skip); +} +``` + +要注意的是,这里就不能用 `this` 来访问 `video` 对象了,因为在这里面,`this` 指向的是遍历得到的每一个 `button`,而我们是要修改 `video` 的 `currentTime` 属性。 + +`data-**` 这样的属性以前提到过了,在 JavaScript 中需要通过 `.dataset.**` 来访问。因为我们获取到的是字符串,所以要通过 `parseFloat` 来转换一下。 + +### **音量和播放速度** +接下来我们实现通过控制面板上两个滑动条来控制视频的音量和播放速度。这两个滑动条是 `range` 类型的 `input` 元素,在元素属性中我们指定了他们各自的最大、最小值和调节的"步值"。 + +其中需要注意的是,他们分别有一个 `volume` 和 `playbackRate` 的 `name` 属性,我们起这两个名字是因为他们是 `video` 对象里对应音量和播放速度的两个属性名。这样起名并不是必须的,但可以让我们后面 js 的操作更精简。 + +通过监听两个 `input` 元素的 `change` 事件,我们就可以通过其 `value` 值改变视频属性了: + +```javascript +function handleRangeUpdate() { + video[this.name] = this.value; +} + +//遍历 ranges 给两个滑动条都绑定事件 +ranges.forEach(range => range.addEventListener('change', handleRangeUpdate)); +``` +因为我们上面说过,`input` 的 `name` 值和 `video` 对象中的属性名是一样的,可以看到在 `handleRangeUpdate` 函数中我们利用了 `this.name` 的写法来代表属性,,这里的 `this` 一样是 `addEventListener` 的调用者,即 `range`。 + +现在调节两个滑动条我们已经可以改变视频相应属性了,美中不足就是滑块的调节并不是实时的,而要等我们放开鼠标才会生效,这是因为 `change` 事件只在 `blur`,也就是元素失去焦点的时候才会触发。要解决这个问题我们可以把 `change` 事件改为 `input` 事件;另一种比较传统的方法是同时监听鼠标在该元素上的 `mousemove` 事件来执行更新的操作, +在原来的代码下加上一行: + +```javascript +ranges.forEach(range => range.addEventListener('mousemove', handleRangeUpdate)); +``` + +这样鼠标在这滑动条上移动的时候也会更新视频属性了,只不过只有在鼠标拖动滑块的时候才会有值的改变。 + +### **进度条操作** +我们的进度条需要能在鼠标点击和拖动的时候改变视频播放的进度。我们先实现进度条随着视频播放更新进度的功能。 + +进度条显示进度的原理很简单,`progress__filled` 这个元素是一个 `flex` 定位的元素,我们改变其 `flex-basis` 的百分比值就可以调节它所占父元素的宽度。`flex-basis` 值代表 `flex` 元素在**主轴**方向上的初始尺寸。关于 `flex-basis` 的更多信息请参考 [MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-basis) + +```javascript +// 根据当前播放时间来调节进度条 +function handleProgress() { + const percent = (video.currentTime / video.duration) * 100; + progressBar.style.flexBasis = `${percent}%`; +} +``` +现在只要运行 `handleProgress` 这个函数就能够更新对应的进度条,但我们需要的是自动执行这个操作。也许你会想到利用 `setInterval` 设置一个定时器,其实 `video` 元素给我们提供了更好的方法—— `timeupdate` 事件。这个事件会在媒体文件的 `currentTime` 属性改变的时触发,更多信息请参考 [MDN](https://developer.mozilla.org/zh-CN/docs/Web/Events/timeupdate) + +事件操作如下: + +```javascript +video.addEventListener('timeupdate', handleProgress); +``` + +现在随着视频的播放,进度条也会更新进度了。 + +接着我们需要点击进度条时调整播放进度,那么我们改变进度,或者说宽度就需要得到鼠标点击的位置,这可以通过事件对象的 `offsetX` 属性来找到,该属性代表鼠标点击位置相对于该元素的水平偏移。得到偏移之后计算出该位置的百分比,那么也就知道了进度的百分比: + +```javascript +... +// 根据点击位置设置播放时间 +function scrub(e) { + const scrubTime = (e.offsetX / progress.offsetWidth) * vidoe.duration; + video.currentTime = scrubTime; +} + +// 点击事件监听 +progress.addEventListener('click', scrub); +``` + +进度条还要求可以拖动,这个操作我们可以通过设置一个*标志*来判断当前是否出于拖动状态,然后配合 `mousedown`、`mouseup` 事件来更新这个标志: + +```javascript +... +let mousedown = false; + +// 鼠标在 progress 上移动时更新进度 +progress.addEventListener('mousemove', (e) => { + + // 若处于拖拽状态则执行更新 + if (mousedown) { + scrub(e); + } +}); + +// 鼠标按下改变标志 +progress.addEventListener('mousedown', () => mousedown = true); + +// 鼠标抬起恢复标志 +progress.addEventListener('mouseup', () => mousedown = false); +``` + +这样就实现了拖拽进度条时改变播放进度的功能,实际使用的时候会发现拖拽和视频的更新并不是实时的,会有一定延迟,这是因为 `mousemove` 事件触发的频率非常高,视频更新的速度跟不上。 + +对于 `mousemove` 的回调函数其实我们可以写得更简洁: + +```javascript +progress.addEventListener('mousemove', (e) => mousedown && scrub(e)); +``` + +我们利用逻辑和操作符 `&&` 的**短路**特性来实现 "只有当 `mousedown` 为 `true`,或可类型转换为 `true` 时才执行 `scrub(e)`" 的判断操作,由于逻辑和的判断必须两个都为真时才成立,所以若第一项不为真,那么 js 就不会去管第二项是什么,因此也就不会执行 `scrub(e)`。这种写法在实际项目中是挺常见的,算是一个小技巧,希望大家可以熟悉并使用。 + +## **结语** +至此,我们已经实现了控制面板的绝大部分功能,最后一个留给大家自己尝试的功能是全屏播放: +* 在控制面板中添加一个全屏按钮 +* 点击该按钮后可以进入/退出全屏模式 + +## ChangeLog +- 2017年02月06日 完稿 +- 2017年09月24日 add missing code by [issue#30](https://github.com/soyaine/JavaScript30/issues/30) diff --git a/11 - Custom Video Player/index.html b/11 - Custom Video Player/index.html new file mode 100644 index 0000000..dee25cd --- /dev/null +++ b/11 - Custom Video Player/index.html @@ -0,0 +1,27 @@ + + + + + HTML Video Player + + + + +
+ + +
+
+ +
+ + + + + +
+
+ + + + diff --git a/11 - Custom Video Player/scripts-FINISHED.js b/11 - Custom Video Player/scripts-FINISHED.js new file mode 100644 index 0000000..cedacf2 --- /dev/null +++ b/11 - Custom Video Player/scripts-FINISHED.js @@ -0,0 +1,55 @@ +/* Get Our Elements */ +const player = document.querySelector('.player'); +const video = player.querySelector('.viewer'); +const progress = player.querySelector('.progress'); +const progressBar = player.querySelector('.progress__filled'); +const toggle = player.querySelector('.toggle'); +const skipButtons = player.querySelectorAll('[data-skip]'); +const ranges = player.querySelectorAll('.player__slider'); + +/* Build out functions */ +function togglePlay() { + const method = video.paused ? 'play' : 'pause'; + video[method](); +} + +function updateButton() { + const icon = this.paused ? '►' : '❚ ❚'; + console.log(icon); + toggle.textContent = icon; +} + +function skip() { + video.currentTime += parseFloat(this.dataset.skip); +} + +function handleRangeUpdate() { + video[this.name] = this.value; +} + +function handleProgress() { + const percent = (video.currentTime / video.duration) * 100; + progressBar.style.flexBasis = `${percent}%`; +} + +function scrub(e) { + const scrubTime = (e.offsetX / progress.offsetWidth) * video.duration; + video.currentTime = scrubTime; +} + +/* Hook up the event listners */ +video.addEventListener('click', togglePlay); +video.addEventListener('play', updateButton); +video.addEventListener('pause', updateButton); +video.addEventListener('timeupdate', handleProgress); + +toggle.addEventListener('click', togglePlay); +skipButtons.forEach(button => button.addEventListener('click', skip)); +ranges.forEach(range => range.addEventListener('change', handleRangeUpdate)); +ranges.forEach(range => range.addEventListener('mousemove', handleRangeUpdate)); + +let mousedown = false; +progress.addEventListener('click', scrub); +progress.addEventListener('mousemove', (e) => mousedown && scrub(e)); +progress.addEventListener('mousedown', () => mousedown = true); +progress.addEventListener('mouseup', () => mousedown = false); diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js new file mode 100644 index 0000000..e69de29 diff --git a/11 - Custom Video Player/style.css b/11 - Custom Video Player/style.css new file mode 100644 index 0000000..c07581c --- /dev/null +++ b/11 - Custom Video Player/style.css @@ -0,0 +1,145 @@ +html { + box-sizing: border-box; +} + +*, *:before, *:after { + box-sizing: inherit; +} + +body { + padding: 0; + display:flex; + background:#7A419B; + min-height:100vh; + background: linear-gradient(135deg, #7c1599 0%,#921099 48%,#7e4ae8 100%); + background-size:cover; + align-items: center; + justify-content: center; +} + +.player { + max-width:750px; + border:5px solid rgba(0,0,0,0.2); + box-shadow:0 0 20px rgba(0,0,0,0.2); + position: relative; + font-size: 0; + overflow: hidden; +} + +.player__video { + width: 100%; +} + +.player__button { + background:none; + border:0; + line-height:1; + color:white; + text-align: center; + outline:0; + padding: 0; + cursor:pointer; + max-width:50px; +} + +.player__button:focus { + border-color: #ffc600; +} + +.player__slider { + width:10px; + height:30px; +} + +.player__controls { + display:flex; + position: absolute; + bottom:0; + width: 100%; + transform: translateY(100%) translateY(-5px); + transition:all .3s; + flex-wrap:wrap; + background:rgba(0,0,0,0.1); +} + +.player:hover .player__controls { + transform: translateY(0); +} + +.player:hover .progress { + height:15px; +} + +.player__controls> * { + flex:1; +} + +.progress { + flex:10; + position: relative; + display:flex; + flex-basis:100%; + height:5px; + transition:height 0.3s; + background:rgba(0,0,0,0.5); + cursor:ew-resize; +} + +.progress__filled { + width:50%; + background:#ffc600; + flex:0; + flex-basis:50%; +} + +/* unholy css to style input type="range" */ + +input[type=range] { + -webkit-appearance: none; + background:transparent; + width: 100%; + margin: 0 5px; +} +input[type=range]:focus { + outline: none; +} +input[type=range]::-webkit-slider-runnable-track { + width: 100%; + height: 8.4px; + cursor: pointer; + box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0 0 1px rgba(13, 13, 13, 0); + background: rgba(255,255,255,0.8); + border-radius: 1.3px; + border: 0.2px solid rgba(1, 1, 1, 0); +} +input[type=range]::-webkit-slider-thumb { + box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(13, 13, 13, 0); + height: 15px; + width: 15px; + border-radius: 50px; + background: #ffc600; + cursor: pointer; + -webkit-appearance: none; + margin-top: -3.5px; + box-shadow:0 0 2px rgba(0,0,0,0.2); +} +input[type=range]:focus::-wefbkit-slider-runnable-track { + background: #bada55; +} +input[type=range]::-moz-range-track { + width: 100%; + height: 8.4px; + cursor: pointer; + box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0 0 1px rgba(13, 13, 13, 0); + background: #ffffff; + border-radius: 1.3px; + border: 0.2px solid rgba(1, 1, 1, 0); +} +input[type=range]::-moz-range-thumb { + box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(13, 13, 13, 0); + height: 15px; + width: 15px; + border-radius: 50px; + background: #ffc600; + cursor: pointer; +} diff --git a/12 - Key Sequence Detection/README.md b/12 - Key Sequence Detection/README.md new file mode 100644 index 0000000..9956f18 --- /dev/null +++ b/12 - Key Sequence Detection/README.md @@ -0,0 +1,47 @@ +# 12 键盘输入序列的验证指南 + +> 作者:©[未枝丫](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日 +最后更新:2017年07月18日 + +## 实现效果 + +初始文档里仅仅提供了一个 `script` 标签,供我们从 [Cornify.com](https://www.cornify.com/) 加载一个 JS 文件,调用其中的 `cornify_add()` 方法时,会在页面中追加 `p` 标签,并在 DOM 中插入一个图标。Cornify 的具体效果可以到官网首页去体验。 + +而这个挑战要实现的效果是,当在此页面完整输入了"暗号"(一串事先定义好的字符串)时,生成新的 Cornify 特效。 + +## 解决思路 + +1. 指定可激发特效的字符串 +2. 监听并获取输入的字符 +3. 处理输入,在符合条件时,调用 cornify + +## 过程指南 + +1. 声明一个空数组,用于存放的输入字符,同时声明"暗号" + + ````js + const pressed = [], + secretCode = 'helloworld' + ```` + +2. 添加键盘的 `keyup` 事件监听,用箭头函数的参数来接收事件。注意此处的 `keyup` 事件是针对页面的,所以在调试时单击页面后时焦点在页面中才生效,在 Console 面板中是不会触发的。 + ```js + window.addEventListener('keyup', (e) => { }) + ``` + +3. 验证输入的字符。此处方法是将每一个输入的字符存入 `pressed` 数组,然后处理数组,使其呈现队列的性质,也就是输入一个字符时,会挤出原有的的字符,保证其最大长度始终为 `secretCode` 的长度。这样做的目的是为了便于验证暗号,只有完整无误的输入一次暗号时,才会触发相应的效果。当然这只是其中一种处理办法,也还有其他办法。 + ```js + window.addEventListener('keyup', (e) => { + console.log(e.key); + pressed.push(e.key); + pressed.splice(-secretCode.length - 1, pressed.length - secretCode.length); //截取数组 + if (pressed.join('').includes(secretCode)) { //判断是否符合暗号 + console.log('DING DING!'); + cornify_add(); + } + ``` + +Bingo,输入暗号后触发特效的页面也就完成了,你可以自由在代码里设置需要的暗号。 \ No newline at end of file diff --git a/12 - Key Sequence Detection/index-FINISHED.html b/12 - Key Sequence Detection/index-FINISHED.html new file mode 100644 index 0000000..393abf0 --- /dev/null +++ b/12 - Key Sequence Detection/index-FINISHED.html @@ -0,0 +1,25 @@ + + + + + Key Detection + + + + + + diff --git a/12 - Key Sequence Detection/index-START.html b/12 - Key Sequence Detection/index-START.html new file mode 100644 index 0000000..8cab786 --- /dev/null +++ b/12 - Key Sequence Detection/index-START.html @@ -0,0 +1,12 @@ + + + + + Key Detection + + + + + + diff --git a/13 - Slide in on Scroll/README.md b/13 - Slide in on Scroll/README.md new file mode 100644 index 0000000..182908c --- /dev/null +++ b/13 - Slide in on Scroll/README.md @@ -0,0 +1,85 @@ +# 13 图片随屏幕滚动而滑入滑出的效果指南 + +> 作者:©[未枝丫](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日 +最后更新:2017年07月18日 + +## 实现效果 + +页面中的文章有几张配图,随着页面上下滚动,图片位置划过图片一半时,图片从两侧滑入;图片位置离开可见区域时,图片向两侧滑出。 + +![Scroll 效果演示](https://cl.ly/2k2e2H0b1U0J/Screen%20Recording%202017-07-18%20at%2010.04%20%E4%B8%8A%E5%8D%88.gif)(图片太大,可点击[外链](https://cl.ly/2k2e2H0b1U0J)查看,或查看[在线效果](http://soyaine.cn/JavaScript30/13%20-%20Slide%20in%20on%20Scroll/index-SOYAINE.html)。) + +下图中蓝色方框位置即是图片所占位置,初始文档中已经写好了内容及样式,需要完成控制图片显示部分的代码来实现图片滑动的效果。 + +![pic](https://cl.ly/2c2R0q2L040c/Image%202017-07-14%20at%20103543%20%E4%B8%8A%E5%8D%88.png) + +## 知识点 + +涉及控制图片的 CSS 属性: +- `translateX` 来控制左右移动 +- `scale` 来控制缩放 + +涉及页面尺寸的属性: + +- `window.scrollY` 文档从顶部开始滚动过的像素值 +- `window.innerHeight viewport` 部分的高度 +- `ele.height` 元素的高度 +- `ele.offsetTop` 当前元素顶部相对于其 offsetParent 元素的顶部的距离。 + +`debounce` 的作用: +降低事件监听的频率,使用了 Lodash 中的 debounce 方法。 + +## 解决思路 + +1. 获取页面中的所有图片元素 +2. 滚动事件监听 +3. 尺寸获取及处理 +4. 滚动至指定区域的条件判断 + +## 过程指南 + +1. 获取所有涉及到的图片 + ```js + const slideImages = document.querySelectorAll('.slide-in'); + ``` +2. 滚动事件监听 + ```js + function checkSlide(e) { + console.log(e); + console.count(e); + } + + window.addEventListener('scroll', debounce(checkSlide)); + ``` + 针对页面的滚动事件进行监听,可以先打出事件对象来看看。同时在接下来的调试过程中也能利用这打出各个尺寸的值,来帮助我们感受每个尺寸的含义。 + 此外由于每次滚动都触发监听事件,会降低 JavaScript 运行性能,所以用 `debounce` 函数来降低触发的次数。 +3. 针对每次监听到的滚动事件,遍历所有图片元素,判断是否显示或隐藏图片。由于图片的显示控制只需通过增减 `.active` 类,此处的重点在于判断的条件如何确认,为便于形象地感受页面滚动时,各个尺寸的变化,我画了一张示意图,如下: + ![尺寸示意图](https://cl.ly/0w3p1v1y3q14/Image%202017-07-18%20at%20102410%20%E4%B8%8A%E5%8D%88.png) + 其中部分指可滚动页面整体,部分是指会随着页面滚动而变化的尺寸,黑色标注的尺寸是固定不变的。 + 页面的滑动过程经过了两个临界点,一个是下滑到图片的一半处,另一个是完全滑过图片使图片已不再视窗之内,分别决定了图片的显示和隐藏。 + ```js + // 滑动页面的底部距离扣除图片一半的高 + const slideInAt = (window.scrollY + window.innerHeight) - img.height / 2; + // 图片底部距离顶端的距离 + const imgBottom = img.offsetTop + img.height; + ``` + 需要利用两个临界点来判断图片是否处在需要显示的区域内,故利用两个值来存取此条件的结果(以保证每次事件监听的结果赋值给常亮后,不会随 `window` 的属性值变化)。 + ```js + // 已滑过了图片的一半 + const isHalfShow = slideInAt> img.offsetTop; + // 未完全滑过图片 + const isNotScrollPast = window.scrollY < imgBottom; + ``` +4. 对于满足显示条件的,给此图片添加 `.active` 类,不满足的则去掉。 + ```js + if (isHalfShow && isNotScrollPast) { + img.classList.add('active'); + } else { + img.classList.remove('active'); + } + ``` + 至此,图片控制逻辑已全部完成。 + 亲手滑动感受一下吧o(*≧▽≦)ツ \ No newline at end of file diff --git a/13 - Slide in on Scroll/index-FINISHED.html b/13 - Slide in on Scroll/index-FINISHED.html new file mode 100755 index 0000000..bbaf0b6 --- /dev/null +++ b/13 - Slide in on Scroll/index-FINISHED.html @@ -0,0 +1,140 @@ + + + + + Document + + + +
+ +

Slide in on Scroll

+ +

Consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariaturlores sunt esse magni, ut, dignissimos.

+

Lorem ipsum cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.

+

Adipisicing elit. Tempore tempora rerum..

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.

+ + + +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, deserunt facilis et iste corrupti omnis tenetur est. Iste ut est dicta dolor itaque adipisci, dolorum minima, veritatis earum provident error molestias. Ratione magni illo sint vel velit ut excepturi consectetur suscipit, earum modi accusamus voluptatem nostrum, praesentium numquam, reiciendis voluptas sit id quisquam. Consequatur in quis reprehenderit modi perspiciatis necessitatibus saepe, quidem, suscipit iure natus dignissimos ipsam, eligendi deleniti accusantium, rerum quibusdam fugit perferendis et optio recusandae sed ratione. Culpa, dolorum reprehenderit harum ab voluptas fuga, nisi eligendi natus maiores illum quas quos et aperiam aut doloremque optio maxime fugiat doloribus. Eum dolorum expedita quam, nesciunt

+ + + +

at provident praesentium atque quas rerum optio dignissimos repudiandae ullam illum quibusdam. Vel ad error quibusdam, illo ex totam placeat. Quos excepturi fuga, molestiae ea quisquam minus, ratione dicta consectetur officia omnis, doloribus voluptatibus? Veniam ipsum veritatis architecto, provident quas consequatur doloremque quam quidem earum expedita, ad delectus voluptatum, omnis praesentium nostrum qui aspernatur ea eaque adipisci et cumque ab? Ea voluptatum dolore itaque odio. Eius minima distinctio harum, officia ab nihil exercitationem. Tempora rem nemo nam temporibus molestias facilis minus ipsam quam doloribus consequatur debitis nesciunt tempore officiis aperiam quisquam, molestiae voluptates cum, fuga culpa. Distinctio accusamus quibusdam, tempore perspiciatis dolorum optio facere consequatur quidem ullam beatae architecto, ipsam sequi officiis dignissimos amet impedit natus necessitatibus tenetur repellendus dolor rem! Dicta dolorem, iure, facilis illo ex nihil ipsa amet officia, optio temporibus eum autem odit repellendus nisi. Possimus modi, corrupti error debitis doloribus dicta libero earum, sequi porro ut excepturi nostrum ea voluptatem nihil culpa? Ullam expedita eligendi obcaecati reiciendis velit provident omnis quas qui in corrupti est dolore facere ad hic, animi soluta assumenda consequuntur reprehenderit! Voluptate dolor nihil veniam laborum voluptas nisi pariatur sed optio accusantium quam consectetur, corrupti, sequi et consequuntur, excepturi doloremque. Tempore quis velit corporis neque fugit non sequi eaque rem hic. Facere, inventore, aspernatur. Accusantium modi atque, asperiores qui nobis soluta cumque suscipit excepturi possimus doloremque odit saepe perferendis temporibus molestiae nostrum voluptatum quis id sint quidem nesciunt culpa. Rerum labore dolor beatae blanditiis praesentium explicabo velit optio esse aperiam similique, voluptatem cum, maiores ipsa tempore. Reiciendis sed culpa atque inventore, nam ullam enim expedita consectetur id velit iusto alias vitae explicabo nemo neque odio reprehenderit soluta sint eaque. Aperiam, qui ut tenetur, voluptate doloremque officiis dicta quaerat voluptatem rerum natus magni. Eum amet autem dolor ullam.

+ + + +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia vero perferendis, deserunt et incidunt eveniet temporibus doloremque possimus facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione. Autem blanditiis

+ + +

laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam, quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.

+ + + +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia vero perferendis, deserunt et incidunt eveniet temporibus doloremque possimus facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione. Autem blanditiis laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam, quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia vero perferendis, deserunt et incidunt eveniet temporibus doloremque possimus facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione. Autem blanditiis laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam, quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.

+ + + + +
+ + + + + + + diff --git a/13 - Slide in on Scroll/index-SOYAINE.html b/13 - Slide in on Scroll/index-SOYAINE.html new file mode 100644 index 0000000..d0106a6 --- /dev/null +++ b/13 - Slide in on Scroll/index-SOYAINE.html @@ -0,0 +1,145 @@ + + + + + Document + + + +
+ +

Slide in on Scroll

+ +

滑动查看图片效果

+ +

Consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariaturlores sunt esse magni, ut, dignissimos.

+

Lorem ipsum cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.

+

Adipisicing elit. Tempore tempora rerum..

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.

+ + + +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, deserunt facilis et iste corrupti omnis tenetur est. Iste ut est dicta dolor itaque adipisci, dolorum minima, veritatis earum provident error molestias. Ratione magni illo sint vel velit ut excepturi consectetur suscipit, earum modi accusamus voluptatem nostrum, praesentium numquam, reiciendis voluptas sit id quisquam. Consequatur in quis reprehenderit modi perspiciatis necessitatibus saepe, quidem, suscipit iure natus dignissimos ipsam, eligendi deleniti accusantium, rerum quibusdam fugit perferendis et optio recusandae sed ratione. Culpa, dolorum reprehenderit harum ab voluptas fuga, nisi eligendi natus maiores illum quas quos et aperiam aut doloremque optio maxime fugiat doloribus. Eum dolorum expedita quam, nesciunt

+ + + +

at provident praesentium atque quas rerum optio dignissimos repudiandae ullam illum quibusdam. Vel ad error quibusdam, illo ex totam placeat. Quos excepturi fuga, molestiae ea quisquam minus, ratione dicta consectetur officia omnis, doloribus voluptatibus? Veniam ipsum veritatis architecto, provident quas consequatur doloremque quam quidem earum expedita, ad delectus voluptatum, omnis praesentium nostrum qui aspernatur ea eaque adipisci et cumque ab? Ea voluptatum dolore itaque odio. Eius minima distinctio harum, officia ab nihil exercitationem. Tempora rem nemo nam temporibus molestias facilis minus ipsam quam doloribus consequatur debitis nesciunt tempore officiis aperiam quisquam, molestiae voluptates cum, fuga culpa. Distinctio accusamus quibusdam, tempore perspiciatis dolorum optio facere consequatur quidem ullam beatae architecto, ipsam sequi officiis dignissimos amet impedit natus necessitatibus tenetur repellendus dolor rem! Dicta dolorem, iure, facilis illo ex nihil ipsa amet officia, optio temporibus eum autem odit repellendus nisi. Possimus modi, corrupti error debitis doloribus dicta libero earum, sequi porro ut excepturi nostrum ea voluptatem nihil culpa? Ullam expedita eligendi obcaecati reiciendis velit provident omnis quas qui in corrupti est dolore facere ad hic, animi soluta assumenda consequuntur reprehenderit! Voluptate dolor nihil veniam laborum voluptas nisi pariatur sed optio accusantium quam consectetur, corrupti, sequi et consequuntur, excepturi doloremque. Tempore quis velit corporis neque fugit non sequi eaque rem hic. Facere, inventore, aspernatur. Accusantium modi atque, asperiores qui nobis soluta cumque suscipit excepturi possimus doloremque odit saepe perferendis temporibus molestiae nostrum voluptatum quis id sint quidem nesciunt culpa. Rerum labore dolor beatae blanditiis praesentium explicabo velit optio esse aperiam similique, voluptatem cum, maiores ipsa tempore. Reiciendis sed culpa atque inventore, nam ullam enim expedita consectetur id velit iusto alias vitae explicabo nemo neque odio reprehenderit soluta sint eaque. Aperiam, qui ut tenetur, voluptate doloremque officiis dicta quaerat voluptatem rerum natus magni. Eum amet autem dolor ullam.

+ + + +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia vero perferendis, deserunt et incidunt eveniet temporibus doloremque possimus facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione. Autem blanditiis

+ + +

laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam, quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.

+ + + +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia vero perferendis, deserunt et incidunt eveniet temporibus doloremque possimus facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione. Autem blanditiis laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam, quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia vero perferendis, deserunt et incidunt eveniet temporibus doloremque possimus facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione. Autem blanditiis laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam, quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.

+ + + + +
+ + + + + + + diff --git a/13 - Slide in on Scroll/index-START.html b/13 - Slide in on Scroll/index-START.html new file mode 100755 index 0000000..0b9fb8f --- /dev/null +++ b/13 - Slide in on Scroll/index-START.html @@ -0,0 +1,120 @@ + + + + + Document + + + +
+ +

Slide in on Scroll

+ +

Consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariaturlores sunt esse magni, ut, dignissimos.

+

Lorem ipsum cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.

+

Adipisicing elit. Tempore tempora rerum..

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.

+ + + +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, deserunt facilis et iste corrupti omnis tenetur est. Iste ut est dicta dolor itaque adipisci, dolorum minima, veritatis earum provident error molestias. Ratione magni illo sint vel velit ut excepturi consectetur suscipit, earum modi accusamus voluptatem nostrum, praesentium numquam, reiciendis voluptas sit id quisquam. Consequatur in quis reprehenderit modi perspiciatis necessitatibus saepe, quidem, suscipit iure natus dignissimos ipsam, eligendi deleniti accusantium, rerum quibusdam fugit perferendis et optio recusandae sed ratione. Culpa, dolorum reprehenderit harum ab voluptas fuga, nisi eligendi natus maiores illum quas quos et aperiam aut doloremque optio maxime fugiat doloribus. Eum dolorum expedita quam, nesciunt

+ + + +

at provident praesentium atque quas rerum optio dignissimos repudiandae ullam illum quibusdam. Vel ad error quibusdam, illo ex totam placeat. Quos excepturi fuga, molestiae ea quisquam minus, ratione dicta consectetur officia omnis, doloribus voluptatibus? Veniam ipsum veritatis architecto, provident quas consequatur doloremque quam quidem earum expedita, ad delectus voluptatum, omnis praesentium nostrum qui aspernatur ea eaque adipisci et cumque ab? Ea voluptatum dolore itaque odio. Eius minima distinctio harum, officia ab nihil exercitationem. Tempora rem nemo nam temporibus molestias facilis minus ipsam quam doloribus consequatur debitis nesciunt tempore officiis aperiam quisquam, molestiae voluptates cum, fuga culpa. Distinctio accusamus quibusdam, tempore perspiciatis dolorum optio facere consequatur quidem ullam beatae architecto, ipsam sequi officiis dignissimos amet impedit natus necessitatibus tenetur repellendus dolor rem! Dicta dolorem, iure, facilis illo ex nihil ipsa amet officia, optio temporibus eum autem odit repellendus nisi. Possimus modi, corrupti error debitis doloribus dicta libero earum, sequi porro ut excepturi nostrum ea voluptatem nihil culpa? Ullam expedita eligendi obcaecati reiciendis velit provident omnis quas qui in corrupti est dolore facere ad hic, animi soluta assumenda consequuntur reprehenderit! Voluptate dolor nihil veniam laborum voluptas nisi pariatur sed optio accusantium quam consectetur, corrupti, sequi et consequuntur, excepturi doloremque. Tempore quis velit corporis neque fugit non sequi eaque rem hic. Facere, inventore, aspernatur. Accusantium modi atque, asperiores qui nobis soluta cumque suscipit excepturi possimus doloremque odit saepe perferendis temporibus molestiae nostrum voluptatum quis id sint quidem nesciunt culpa. Rerum labore dolor beatae blanditiis praesentium explicabo velit optio esse aperiam similique, voluptatem cum, maiores ipsa tempore. Reiciendis sed culpa atque inventore, nam ullam enim expedita consectetur id velit iusto alias vitae explicabo nemo neque odio reprehenderit soluta sint eaque. Aperiam, qui ut tenetur, voluptate doloremque officiis dicta quaerat voluptatem rerum natus magni. Eum amet autem dolor ullam.

+ + + +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia vero perferendis, deserunt et incidunt eveniet temporibus doloremque possimus facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione. Autem blanditiis

+ + +

laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam, quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.

+ + + +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia vero perferendis, deserunt et incidunt eveniet temporibus doloremque possimus facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione. Autem blanditiis laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam, quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia vero perferendis, deserunt et incidunt eveniet temporibus doloremque possimus facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione. Autem blanditiis laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam, quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.

+ + + + +
+ + + + + + + diff --git a/14 - JavaScript References VS Copying/README.md b/14 - JavaScript References VS Copying/README.md new file mode 100644 index 0000000..9fc48f1 --- /dev/null +++ b/14 - JavaScript References VS Copying/README.md @@ -0,0 +1,146 @@ +# 14 JS中的引用与复制 + +> 作者:©[未枝丫](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日 +最后更新:2018年12月05日 + +## 实现效果 + +这个部分主要是帮助你通过不同的语句来感受在 JavaScript 中对不同类型数据的引用(Reference)和复制(Copy)的区别。由于操作在 Console 中进行,所以请直接运行页面后打开 Console,边编辑代码,边查看结果。 + +## 过程指南 + +1. 首先从 String、Number、Boolean 类型的值开始。 + ```js + let age = 100; + let age2 = age; + console.log(age, age2); // 100 100 + age = 200; + console.log(age, age2); // 200 100 + ``` + 先声明了一个 Number 型的变量 `age`,并将此变量赋值给另一个变量 `age2`,这时两个变量的值都是 100。 + 然后赋给 `age` 新的值,可见对 `age` 的修改并不会对 `age2` 造成影响。 +2. 那对于数组来说,情况是否一样呢?下面我们来看看数组。 + ```js + const players = ['Wes', 'Sarah', 'Ryan', 'Poppy']; + const team = players; + console.log(players, team); + ``` + 延续上面的思路,先声明一个数组 `players`,并将其赋值给 `team`。试想一下,如果需要修改 `team` 中的值,我们可以如何操作?或许可以这样? + ```js + team[3] = 'Lux'; + ``` + 来看看发生了什么。 + ```js + console.log(players, team); + // ["Wes", "Sarah", "Ryan", "Lux"] ["Wes", "Sarah", "Ryan", "Lux"] + ``` + WOW 原数组 `plaryers` 也被修改了。为什么会这样?因为 `team` 只是这个数组的引用,并不是它的复制。`team` 和 `players` 这两个变量指向的是同一个数组。 + 所以如何解决这个问题?接下来我们开始真正的复制吧! + - **方法一 [`Array.prototype.slice()`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/slice)** + + 由于运行 `slice` 得到的结果是一个对原数组的浅拷贝,原数组不会被修改。所以如果修改这两个数组中任意 一个,另一个都不会受到影响。 + ```js + const team2 = players.slice(); + team2[3] = 'Lux2'; + console.log(players, team2); + ``` + - **方法二 [`Array.prototype.concat()`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/concat)** + + `concat()` 方法是用来合并数组的,它也不会更改原有的数组,而是返回一个新数组,所以可以将 `players` 数组与一个空数组合并,得到的结果就符合预期了。 + ```js + const team3 = [].concat(players); + team3[3] = 'Lux3'; + console.log(players, team3); + ``` + - **方法三 ES6 [扩展语法](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_operator)** + + 扩展语法可以像扩展参数列表一样来扩展数组,效果与上述方法类似,但比较简洁。 + ```js + const team4 = [...players]; + team4[3] = 'Lux4'; + console.log(players, team4); + ``` + - **方法四 [`Array.from()`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/from)** + + 此外使用 Array 创建新的数组实例的方法也是可行的。 + ```js + const team5 = Array.from(players); + team5[3] = 'Lux5'; + console.log(players, team5); + ``` + + 除此之外,还可以用 `push` 这样的方法。数组部分已经介绍完毕,下面我们进入 Object 类型数据的试验吧~ + +3. 对于 Object 数据,我们用一个 `person` 对象来试试。 + + 先声明对象: + ```js + const person = { + name: 'Wes Bos', + age: 80 + }; + ``` + + 然后思考一下如何可以取得它的复制,试试想当然的做法: + ```js + const captain = person; + captain.number = 99; + console.log(person, captain); + // Object {name: "Wes Bos", age: 80, number: 99} + // Object {name: "Wes Bos", age: 80, number: 99} + ``` + 这样好像行不通,`person` 的值也被更改了,那该如何才能真正复制呢? + + - **方法一 [`Object.assign()`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign)** + + 使用 `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} + ``` + - **方法二 JSON 转换** + + 利用 JSON 可以先将对象转成字符串的格式,然后再把它转成 JSON,从而实现复制。 + + ```js + const wes = { + name: 'Wes', + age: 100, + social: { + twitter: '@wesbos', + facebook: 'wesbos.developer' + } + }; + + const dev = Object.assign({}, wes); + const dev2 = JSON.parse(JSON.stringify(wes)); + console.log(wes); + console.log(dev); + console.log(dev2); + ``` + + +OVER~\(^o^)/~ + + + + + + + + + + + + + + + + + diff --git a/14 - JavaScript References VS Copying/index-FINISHED.html b/14 - JavaScript References VS Copying/index-FINISHED.html new file mode 100755 index 0000000..be6d1b7 --- /dev/null +++ b/14 - JavaScript References VS Copying/index-FINISHED.html @@ -0,0 +1,99 @@ + + + + + JS Reference VS Copy + + + + + + + diff --git a/14 - JavaScript References VS Copying/index-SOYAINE.html b/14 - JavaScript References VS Copying/index-SOYAINE.html new file mode 100644 index 0000000..4e11b80 --- /dev/null +++ b/14 - JavaScript References VS Copying/index-SOYAINE.html @@ -0,0 +1,115 @@ + + + + + JS Reference VS Copy + + + + + + + diff --git a/14 - JavaScript References VS Copying/index-START.html b/14 - JavaScript References VS Copying/index-START.html new file mode 100755 index 0000000..dc4eac4 --- /dev/null +++ b/14 - JavaScript References VS Copying/index-START.html @@ -0,0 +1,52 @@ + + + + + JS Reference VS Copy + + + + + + + diff --git a/15 - LocalStorage/README.md b/15 - LocalStorage/README.md new file mode 100644 index 0000000..06c2776 --- /dev/null +++ b/15 - LocalStorage/README.md @@ -0,0 +1,80 @@ +# 15 LocalStorage + +> 作者:©[未枝丫](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日 +最后更新:2018年12月05日 + +## 实现效果 +我们的目的是使网页模拟菜单的效果,在页面中添加新的菜品,而且在页面刷新之后也不清空。 + +现在的初始页面中,点击提交按钮(Add Item)时页面默认触发 `submit` 事件,并重新加载页面,这导致重新加载之后的页面中,已丢失刚提交的内容。页面所用到的 CSS 文件已经完成了,我们需要做的是完成 JavaScript 部分的内容,以实现目标效果。 + +这一个挑战所用时间可能比之前的稍稍长一些,但理解了 localStorage 的机制,想明白菜单的实现之后,就会一目了然了,带上耐心我们开始吧~ + +## 知识点 +- Event + - [event.preventDefault](https://developer.mozilla.org/zh-CN/docs/Web/API/Event/preventDefault) + - [eventTarget.addEventListener](https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener) +- [localStorage](https://developer.mozilla.org/zh-CN/docs/Web/API/Storage/LocalStorage) + - `localStorage.setItem()` + - `localStorage.getItem()` +- [JSON](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON) + - `JSON.stringify()` + - `JSON.parse()` + +## 过程指南 + +1. 默认情况下,在表单空间拥有焦点时按下 `Enter` 键或者点击提交按钮,会提交表单,提交时,浏览器会在发送请求给服务器之前触发 `submit` 事件,为了验证这个行为,我们可以添加事件监听后看看效果,此处先写一个处理函数: + ```js + function addItem(e) { + console.log('hello'); + } + + addItems.addEventListener('submit', addItem); + ``` + 点击按钮后发现 `submit` 事件触发后的结果是, Console 中闪现 hello 后刷新整个页面,这是 `submit` 的默认行为,在当前的场景中不适用,所以我们需要先去除此事件的默认行为。 + ```js + function addItem(e) { + e.preventDefault(); + } + ``` + +2. 下面我们开始改造 `addItem` 方法,以实现我们的功能。 + 首先在事件监听中,`this` 可以获取当前 form 即我们为其添加事件监听的 `addItem` 元素,所以可以借此方便的获取输入框中的值。在 `addItem()` 方法中获取输入,并构造一个对象 `item` 来存储这个信息,: + ```js + /* function addItem(){} 中 */ + const text = this.querySelector('[name=item]').value; + const item = { + text, // ES6中对 text: text, 的简写 + done: false // 为后续的勾选做准备 + } + ``` +3. 把对象放入此前声明好的数组 `items`,同时更新数据,包括页面中的 HTML 内容、LocalStorage。 + ```js + /* function addItem(){} 中 */ + items.push(item); + this.reset();// 以清空 input 中正在输入的值 + populateList(items, itemsList); + localStorage.setItem('items', JSON.stringify(items)); + ``` + - **HTML 内容更新** + 声明一个 `populateList` 方法来更新页面的内容。接收需要更新的数组作为参数,根据数组里的内容构造一组 `
  • ` 组成的列表,并且加上一些标识信息,以助于之后需要实现的选中功能。 + ```js + function populateList(plates = [], plateslist) { + plateslist.innerHTML = plates.map((plate, i) => { + return ` +
  • + + +
    • + `; + }).join(''); + } + ``` + - **LocalStorage 更新** + 我们利用 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/15 - LocalStorage/index-FINISHED.html b/15 - LocalStorage/index-FINISHED.html new file mode 100755 index 0000000..2c492b1 --- /dev/null +++ b/15 - LocalStorage/index-FINISHED.html @@ -0,0 +1,77 @@ + + + + + LocalStorage + + + + + + + +
    +

    LOCAL TAPAS

    + +
      +
    • Loading Tapas...
      • +
    +
    + + +
    +
    + + + + + + + diff --git a/15 - LocalStorage/index-SOYAINE.html b/15 - LocalStorage/index-SOYAINE.html new file mode 100644 index 0000000..a450fa7 --- /dev/null +++ b/15 - LocalStorage/index-SOYAINE.html @@ -0,0 +1,103 @@ + + + + + LocalStorage + + + + + + + +
    +

    LOCAL TAPAS

    + +
      +
    • Loading Tapas...
      • +
    +
    + + + + + +
    +
    + + + + \ No newline at end of file diff --git a/15 - LocalStorage/index-START.html b/15 - LocalStorage/index-START.html new file mode 100755 index 0000000..d444f1d --- /dev/null +++ b/15 - LocalStorage/index-START.html @@ -0,0 +1,38 @@ + + + + + LocalStorage + + + + + + + +
    +

    LOCAL TAPAS

    + +
      +
    • Loading Tapas...
      • +
    +
    + + +
    +
    + + + + + + + diff --git a/15 - LocalStorage/style.css b/15 - LocalStorage/style.css new file mode 100755 index 0000000..ea5bab1 --- /dev/null +++ b/15 - LocalStorage/style.css @@ -0,0 +1,78 @@ + + html { + box-sizing: border-box; + background:url('http://wes.io/hx9M/oh-la-la.jpg') center no-repeat; + background-size:cover; + min-height:100vh; + display:flex; + justify-content: center; + align-items: center; + text-align: center; + font-family: Futura,"Trebuchet MS",Arial,sans-serif + } + *, *:before, *:after {box-sizing: inherit; } + + svg { + fill:white; + background: rgba(0,0,0,0.1); + padding: 20px; + border-radius: 50%; + width:200px; + margin-bottom: 50px; + } + + .wrapper { + padding: 20px; + max-width: 350px; + background: rgba(255,255,255,0.95); + box-shadow: 0 0 0 10px rgba(0,0,0,0.1); + } + + h2 { + text-align: center; + margin: 0; + font-weight: 200; + } + + .plates { + margin: 0; + padding: 0; + text-align: left; + list-style: none; + } + + .plates li { + border-bottom: 1px solid rgba(0,0,0,0.2); + padding: 10px 0; + font-weight: 100; + display: flex; + } + + .plates label { + flex:1; + cursor: pointer; + + } + + .plates input { + display: none; + } + + .plates input + label:before { + content: '⬜️'; + margin-right: 10px; + } + + .plates input:checked + label:before { + content: '🌮'; + } + + .add-items { + margin-top: 20px; + } + + .add-items input { + padding:10px; + outline:0; + border:1px solid rgba(0,0,0,0.1); + } diff --git a/16 - Mouse Move Shadow/README.md b/16 - Mouse Move Shadow/README.md new file mode 100644 index 0000000..984c795 --- /dev/null +++ b/16 - Mouse Move Shadow/README.md @@ -0,0 +1,55 @@ +# 16 文字阴影的鼠标随动效果 + +> 本篇作者:©[大史不说话](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 哦♪(^∇^*) + +> 创建时间:2017年08月20日 +最后更新:2017年08月21日 + +## 挑战任务 + 初始文件`index-start.html`中提供了一个包含了`h1`元素的`div`元素,`h1`元素已经设置了`text-Shadow`的样式。本次编程挑战中需要完成的效果是根据用户当前的鼠标位置来操纵文字阴影的位置。 + +## 实现效果 +![结果展示](https://github.com/dashnowords/JavaScript30/blob/master/16%20-%20Mouse%20Move%20Shadow/effects.png) + +## 基本知识 +`text-shadow`样式为标准CSS3样式,用于添加**一个或多个**文字阴影,用于其的语法格式为: +```css +text-shadow: h-shadow v-shadow blur color + +``` + +## 过程指南 +1.在`script`标签中,我们使用3个变量,一个指向`div`元素,一个指向其子元素`h1`,最后一个变量`factor`用于标记阴影距离`h1`中心的距离和鼠标距离`h1`中心距离的比例,用于计算阴影的具体位置。 + +2.在`hero`元素上监听鼠标移动事件`mousemove`,并添加事件处理的回调函数`shadowMove`. +```js +hero.addEventListener('mousemove',shadowMove); +``` + +3.为获得第一个阴影的瞬时位置,需要通过鼠标位置距离`h1`中心的距离乘以`factor`系数来获得,`pos`表示鼠标当前位置的坐标,range指代`hero`元素的宽和高: +```js + var disX = parseInt((pos.x-range.x/2)*factor); + var disY = parseInt((pos.y-range.y/2)*factor); +``` +4.从事件发生的event对象中获取需要的值: +```js + var range = { + x:hero.offsetWidth, + y:hero.offsetHeight + } + var pos = { + x:e.target.offsetLeft+e.offsetX, + y:e.target.offsetTop+e.offsetY + } +``` +5.计算出`h1`元素第一个阴影位置后,可以以坐标镜像或旋转90°等不同的方式来生成其他阴影,本例中我们采用绕`h1`元素中心旋转90°的方式共生成4个阴影: +```js + text.style.textShadow = ` + ${xWalk}px ${yWalk}px 0 rgba(255,0,255,0.7), + ${xWalk * -1}px ${yWalk}px 0 rgba(0,255,255,0.7), + ${yWalk}px ${xWalk * -1}px 0 rgba(0,255,0,0.7), + ${yWalk * -1}px ${xWalk}px 0 rgba(0,0,255,0.7) + `; +``` diff --git a/16 - Mouse Move Shadow/effects.png b/16 - Mouse Move Shadow/effects.png new file mode 100644 index 0000000..76a04c1 Binary files /dev/null and b/16 - Mouse Move Shadow/effects.png differ diff --git a/16 - Mouse Move Shadow/index-finished-es5.html b/16 - Mouse Move Shadow/index-finished-es5.html new file mode 100644 index 0000000..93f97b4 --- /dev/null +++ b/16 - Mouse Move Shadow/index-finished-es5.html @@ -0,0 +1,62 @@ + + + + + Mouse Shadow-ES5 + + + +
    +

    🔥WOAH!

    +
    + + + + + + diff --git a/16 - Mouse Move Shadow/index-finished-es6.html b/16 - Mouse Move Shadow/index-finished-es6.html new file mode 100644 index 0000000..8d015b9 --- /dev/null +++ b/16 - Mouse Move Shadow/index-finished-es6.html @@ -0,0 +1,72 @@ + + + + + Mouse Shadow + + + +
    +

    🔥WOAH!

    +
    + + + + + + diff --git a/16 - Mouse Move Shadow/index-start.html b/16 - Mouse Move Shadow/index-start.html new file mode 100644 index 0000000..543cb51 --- /dev/null +++ b/16 - Mouse Move Shadow/index-start.html @@ -0,0 +1,40 @@ + + + + + Mouse Shadow + + + +
    +

    🔥WOAH!

    +
    + + + + + + diff --git a/16 - Mouse Move Shadow/style.css b/16 - Mouse Move Shadow/style.css new file mode 100644 index 0000000..9d543f3 --- /dev/null +++ b/16 - Mouse Move Shadow/style.css @@ -0,0 +1,6 @@ +@charset "UTF-8"; +/** + * @dashrun (@389399428@qq.com) + * @date 2017年08月20日 + * @version 1ドル.0 + */ diff --git a/17 - Sort Without Articles/README.md b/17 - Sort Without Articles/README.md new file mode 100644 index 0000000..2bed663 --- /dev/null +++ b/17 - Sort Without Articles/README.md @@ -0,0 +1,42 @@ +# 17 数组的去前缀排序 + +> 本篇作者:©[大史不说话](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 哦♪(^∇^*) + +> 创建时间:2017年08月23日 +最后更新:2017年08月24日 + +## 挑战任务 + 初始文件`index-start.html`中提供了一个无序列表元素,并在`script`标签中提供了一个字符串数组。请为这些字符串排序,要求去除字符串中的`The`,`A`以及`An`的前缀后再进行排序,并把排序后的结果作为列表项展示在无序列表中。 + +## 实现效果 +![结果展示](https://github.com/soyaine/JavaScript30/blob/master/17%20-%20Sort%20Without%20Articles/effects.png) + +## 基本思路 +1.基本的编程任务有两个要点,即**排序**和**展示**;
    +2.数组排序部分最外层即为`Array.sort(arr)`函数,内层实现具体排序规则;
    +3.展示部分即将排列好的新数组拼接成带有标签的HTML元素,然后一次性插入到列表中。 + +## 过程指南(以非ES6版本为例) +1.声明去前缀函数,使用`String.replace()`函数实现,第一参数使用字面量正则表达式。 +```js +function delPrefix(item){ + return item.replace(/^(The|A|An)\s{1}/,''); +} +``` +2.使用`Array.sort()`对数组进行排序,将数组中逐项使用`delPrefix()`去掉前缀后再进行对比。 +```js +var sortedbands = bands.sort(function(a,b){ + return delPrefix(a)> delPrefix(b) ? 1 : -1; +}); +``` +3.使用选择器选中无序列表`#bands`,将排序后的数组作为列表项插入其中。 +```js + document.getElementById('bands').innerHTML = '
  • '+arr.join('
  • ')+'
    • '; +``` + +## 细节知识点 +1.`Array.prototype.sort(*param*)`方法虽然有返回值,但排序结果也影响原数组,在非ES6版本的代码中,我们使用了指向原数组的变量`bands`,而在ES6版本的代码中将排序后的结果赋值给了新的变量sortedbands,从结果可以看出,两者达到了相同的目的。 + +2.在ES6版本的代码结尾处,我们修改原数组`bands`中的第一项,并在控制台打印出排序后的数组`sortedbands`,从结果可以看出`sortedbands`也受到了影响,由此可以看出`Array.prototype.sort()`函数只是返回了一个指向原数组的引用,而并没有生成新的数组。 \ No newline at end of file diff --git a/17 - Sort Without Articles/effects.png b/17 - Sort Without Articles/effects.png new file mode 100644 index 0000000..63fb6be Binary files /dev/null and b/17 - Sort Without Articles/effects.png differ diff --git a/17 - Sort Without Articles/index-finished-Dashrun-es5.html b/17 - Sort Without Articles/index-finished-Dashrun-es5.html new file mode 100644 index 0000000..0f1523d --- /dev/null +++ b/17 - Sort Without Articles/index-finished-Dashrun-es5.html @@ -0,0 +1,74 @@ + + + + + Sort Without Articles-es5 + + + + + + + + + + + diff --git a/17 - Sort Without Articles/index-finished-Dashrun-es6.html b/17 - Sort Without Articles/index-finished-Dashrun-es6.html new file mode 100644 index 0000000..5204b8f --- /dev/null +++ b/17 - Sort Without Articles/index-finished-Dashrun-es6.html @@ -0,0 +1,66 @@ + + + + + Sort Without Articles-es6 + + + + + + + + + + + diff --git a/17 - Sort Without Articles/index-start.html b/17 - Sort Without Articles/index-start.html new file mode 100644 index 0000000..9bbd250 --- /dev/null +++ b/17 - Sort Without Articles/index-start.html @@ -0,0 +1,53 @@ + + + + + Sort Without Articles + + + + + + + + + + + diff --git a/17 - Sort Without Articles/style.css b/17 - Sort Without Articles/style.css new file mode 100644 index 0000000..9d543f3 --- /dev/null +++ b/17 - Sort Without Articles/style.css @@ -0,0 +1,6 @@ +@charset "UTF-8"; +/** + * @dashrun (@389399428@qq.com) + * @date 2017年08月20日 + * @version 1ドル.0 + */ diff --git a/18 - AddingUpTimesWithReduce/README.md b/18 - AddingUpTimesWithReduce/README.md new file mode 100644 index 0000000..c493459 --- /dev/null +++ b/18 - AddingUpTimesWithReduce/README.md @@ -0,0 +1,51 @@ +# 18 使用reduce进行时间累加 + +> 本篇作者:©[大史不说话](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 哦♪(^∇^*) + +> 创建时间:2017年08月25日 +最后更新:2017年08月29日 + +## 挑战任务 + 初始文件`index-start.html`中提供了一个包含多个列表项的无序列表元素,每一个列表项均添加了`data-time`属性,该属性用**分**和**秒**表示了时间。要求将所有的时间累加在一起,并用`时:分:秒`来表示计算的结果。 + +## 实现效果 +![结果展示](https://github.com/soyaine/JavaScript30/blob/master/18%20-%20AddingUpTimesWithReduce/effects.png) + +## 基本思路 +1.取得所有`li`中`data-time`属性的值,将时间换算为秒并累加求得总时间(单位:秒);
    +2.手动计算将总时间转化为新的格式"XX小时XX分XX秒";
    +3.将结果显示在页面上。 + +## 过程指南(以非ES6版本为例) +1.取得所有`li`标签 +```js +var oLi = document.getElementsByTagName('li'); +``` +2.遍历`li`元素节点,取得每个`data-time`的值并以:为界将其分解为含有两个元素的数组,每个数组中含有两项,第一项为表示分钟的字符串,第二项为表示秒的字符串,将两者进行运算转化为表示秒的数字,并添加进新的数组。 +```js + for( var i = 0, len = oLi.length; i < len; i++){ + var timeItem = oLi[i].dataset['time'].split(':'); + //将时间转换为秒 + times.push(parseInt(timeItem[0],10)*60+parseInt(timeItem[1],10)); + } +``` +3.将新数组`times`中各项累加 +```js +//方法1.因为times为数组类型,故可以直接使用reduce函数进行累加 + return times.reduce(function(a,b){ + return a+b; + },0); +//方法2.不熟悉reduce函数的也可通过for循环遍历数组各项进行结果累加 +``` +4.总时间格式转换 +```js + //总时间对60取余即为不足1分钟的秒数 + var sec = seconds % 60; + //总时间除以3600并向下取整为小时数 + var hour = Math.floor(seconds/3600); + //总时间减去前两项即可获得分钟数 + var min = (seconds - 3600*hour - sec)/60; +``` +5.将结果打印在界面上即可 \ No newline at end of file diff --git a/18 - AddingUpTimesWithReduce/effects.png b/18 - AddingUpTimesWithReduce/effects.png new file mode 100644 index 0000000..82164bf Binary files /dev/null and b/18 - AddingUpTimesWithReduce/effects.png differ diff --git a/18 - AddingUpTimesWithReduce/index-finished-Dashrun-es5.html b/18 - AddingUpTimesWithReduce/index-finished-Dashrun-es5.html new file mode 100644 index 0000000..91abe24 --- /dev/null +++ b/18 - AddingUpTimesWithReduce/index-finished-Dashrun-es5.html @@ -0,0 +1,216 @@ + + + + + Videos + + +

    总播放时间为:

    + + + + diff --git a/18 - AddingUpTimesWithReduce/index-finished-Dashrun-es6.html b/18 - AddingUpTimesWithReduce/index-finished-Dashrun-es6.html new file mode 100644 index 0000000..e7765e1 --- /dev/null +++ b/18 - AddingUpTimesWithReduce/index-finished-Dashrun-es6.html @@ -0,0 +1,205 @@ + + + + + Videos + + +

    总播放时间为:

    + + + + diff --git a/18 - AddingUpTimesWithReduce/index-start.html b/18 - AddingUpTimesWithReduce/index-start.html new file mode 100644 index 0000000..abdf4c9 --- /dev/null +++ b/18 - AddingUpTimesWithReduce/index-start.html @@ -0,0 +1,187 @@ + + + + + Videos + + + + + + diff --git a/19 - Webcam Fun/README.md b/19 - Webcam Fun/README.md new file mode 100644 index 0000000..389458d --- /dev/null +++ b/19 - Webcam Fun/README.md @@ -0,0 +1,111 @@ +# 19 Webcam Fun 中文指南 + +> 本篇作者:©[大史不说话](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 哦♪(^∇^*) + +> 创建时间:2017年08月31日 +最后更新:2017年09月02日 + +## 挑战任务 +在`index-start.html`中提供了一个名为**Take Photo**的按钮,该按钮的点击事件会触发`takePhoto()`函数,并提供了一组标有RGBmin/max标记的`range`类型`input`元素,一个`canvas`元素,一个`video`元素,以及带有`strip`类名的空`div`元素。 +本次的编程任务: +1.通过编写javascript代码,请求调用用户的网络摄像头; +2.在页面上展示来自webcam的数据流信息; +3.并允许用户保存展示的照片; +4.及使用滑块来改变图像的色彩。 + +## 实现效果 +![结果展示](https://github.com/soyaine/JavaScript30/blob/master/19%20-%20Webcam%20Fun/effects.png) + +## 相关知识 +1.`window.navigator`对象 +`window.navigator`对象上有很多有趣的属性和方法,通过调用相应的方法可以查看到有关当前脚本运行环境(多为浏览器)的相关信息,并使用一些扩展功能。对此不熟悉的开发者可以浏览[MDN](https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator)中相关API的介绍,例如使用`getBattery()`可以获取电池状态。 +2.`navigator.getUserMedia`方法 +`getUserMedia`方法为我们提供了访问网络摄像头或麦克风的权限,该方法接受一个对象作为参数,通过该对象即可获得来自多媒体设备的数据。 +3.`canvas`标签 +HTML5强大的扩展功能之一,提供了丰富的图像绘制方法,也是HTML可以作为游戏开发工具的原因之一,本次开发中使用`canvas.getContext('2d')`提供的图像操作方法. +4.像素数组 +使用`canvas`绘图上下文中的`getImageData()`获得的像素信息为一个定型数组,每个像素点的rgba色彩信息分别存放在数组中,故数据的格式为:[第一像素r值,第一像素g值,第一像素b值,第一像素a值,第二像素r值,第二像素g值......],通过各类函数公式对像素数据进行处理即可获得各类不同的滤镜效果。 + +## 基本思路 + +1.调用`navigator.getUserMedia()`方法,若调用成功则返回数据流,若调用失败则在控制台打印相关信息; +2.成功调用网络摄像头后,将返回的数据对象绑定至video标签的srcObject属性(注意此处getUserMedia()方法成功调用时触发的回调函数中会传递一个`stream`对象,该对象直接赋值给video.src是没有作用的),并当流数据开始传递时,视频自动播放; +3.点击`takePhoto()`函数时调用`canvas`绘图上下文中的`drawImage()`方法将视频中当前帧的图像绘制在canvas上,该方法第一个参数可以为图像或视频,其余参数与绘图区域尺寸相关(该方法有多种调用模式,感兴趣的读者可自行学习); +4.滤色:在全局中保存滤色范围的上下限,每次滑块数据发生改变后,使用`canvas`绘图上下文中的`getImageData()`获得画布上指定区域内各像素点的颜色数据,数据被保存在返回对象的data属性中,通过遍历修改像素色彩数组中的数据改变图像的表现,修改后调用`putImageData()`方法将像素点重新绘制在`canvas`上。 +5.点击`savePhoto()`函数时调用`canvas`的`toDataUrl()`方法即可获得canvas中的图像数据,默认格式为png,也可修改为其他格式,生成的图像数据指定给`img.src`时即可预览图片; +6.在`img`标签外添加`a`标签,并为其添加`download`属性,当点击链接时,即可将生成的图片保存至本地。 + +## 过程指南 +1.申请调用WebCam +```js +function askWebcam() { + navigator.getUserMedia = navigator.getUserMedia || + navigator.webkitGetUserMedia || + navigator.mozGetUserMedia; + if (navigator.getUserMedia) { + navigator.getUserMedia({ + audio: false, + video: { + width: 300, + height: 200 + } + }, function(stream) { + //若成功 + video.srcObject = stream; + video.onloadedmetadata = function(e) { + video.play(); + } + }, function(err) { + console.log('Error occured:' + err.name); + }); + } else { + console.log('this navigator doesn\'t support webcam!'); + } +} +``` +2.截图函数 `takePhoto()`,此处将原始图像数据保留一份,否则使用滤色函数处理后,被滤掉的颜色无法恢复,保存了原始图像数据后,只需要重新绘制在canvas上即可。 +```js +function takePhoto() { + ctx.drawImage(video, 0, 0, 300, 200); + //将原始截图保存, + origindata = ctx.getImageData(0,0,300,200); +} +``` +3.色彩过滤 +在所有滑块的父元素上监听`change`事件,当滑块的值发生改变时,先通过e.target.name确定是哪个颜色的范围要求发生了变化,再访问e.target.value获得变化值,通过与全局变量`filter`作比较来获得滤色值的上下限要求。 +重点难点解释如下: +```js + /*startPos表示操作像素点数据时的起点,从canvas获取到的像素数据每四个值表示一个像素点例如滑块为红色,则只需要改变像素数组中第0,4,8......个元素的值。通过target.value的首字母即可判断滤色过程应该检查的颜色*/ + const startPos = {'r':0,'g':1,'b':2}[target.name[0]]; + /*filterMin和filterMax表示相应的滤色范围上下限,若修改了红色滤色范围则取红色范围值。若修改蓝色的滤色范围,则取蓝色。checkFilter()函数将改变后的值与滤色标准`filter`进行比较,将更改滤色标准后需要调整的颜色类别(r,g,b)对应的上下限返回给结果。*/ + var tempFilter = checkFilter(target.name, target.value); + const filterMin = tempFilter.min; + const filterMax = tempFilter.max; +``` +4.保存图片 +使用`canvas.toDataUrl()`方法将`canvas`画布保存为图片,默认为png格式,该数据可作为`img.src`的值,也可利用`a`标签将其下载. +```js +//保存图片 +function savePhoto() { + img.src = canvas.toDataURL(); + a.href = canvas.toDataURL(); + a.setAttribute('download', 'handsome'); +} +``` +## 延伸思考 +####如何制作一个简易的钢铁侠面板 +1.本次的编程任务中我们已经可以调用网络摄像头获得视频数据; +2.将webcam获取到的数据绘制在canvas中时,同时将可视化面板的UI绘制在canvas中; +3.视频的本质是连续播放的图片,当图片播放的速度超过每秒24张时,我们将看到连续的动画,当我们以相应的频率重绘canvas上的图像时,即可看到合成后的视频; +4.如果要获得更加逼真的效果,可以做更多的图像识别方面的扩展延伸,本篇只做抛砖引玉,不再做更深入的探究。 +伪代码片段: +```js +setInterval(drawImg(),1000/24); +function drawImg(){ + //获得来自webcam的数据并将其绘制在canvas上 + +} +``` + diff --git a/19 - Webcam Fun/effects.png b/19 - Webcam Fun/effects.png new file mode 100644 index 0000000..03247bb Binary files /dev/null and b/19 - Webcam Fun/effects.png differ diff --git a/19 - Webcam Fun/index-finished-Dashrun.html b/19 - Webcam Fun/index-finished-Dashrun.html new file mode 100644 index 0000000..60a79b6 --- /dev/null +++ b/19 - Webcam Fun/index-finished-Dashrun.html @@ -0,0 +1,58 @@ + + + + + Get User Media Code Along! + + + + +
    +
    + + +
    + + + + + +
    + + + + + + +
    + + + + + +
    +
    +
    +

    照片区域:

    + +
    +
    +

    实时视频区域:

    + +
    +
    +

    变色画布区域:

    +
    + + 暂未保存图像 + +
    +
    +
    + + + + + + + diff --git a/19 - Webcam Fun/index-start.html b/19 - Webcam Fun/index-start.html new file mode 100644 index 0000000..5909522 --- /dev/null +++ b/19 - Webcam Fun/index-start.html @@ -0,0 +1,45 @@ + + + + + Get User Media Code Along! + + + + +
    +
    + + +
    + + + + +
    + + + + + + + diff --git a/19 - Webcam Fun/script.js b/19 - Webcam Fun/script.js new file mode 100644 index 0000000..b6f3a5a --- /dev/null +++ b/19 - Webcam Fun/script.js @@ -0,0 +1,119 @@ +window.onload = function() { + canvas = document.querySelector('canvas'); + video = document.querySelector('video'); + ctx = canvas.getContext('2d'); + img = document.querySelector('#myimg'); + slider = document.querySelector('.rgb'); + a = document.querySelector('a'); + //滤色范围记录 + filter = { + rmin: 0, + rmax: 255, + gmin: 0, + gmax: 255, + bmin: 0, + bmax: 255 + } + + //调用摄像头数据 + askWebcam(); + + //绑定change事件动态修改图片颜色 + slider.onchange = function(e) { + //先将canvas恢复至原始截图 + 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]]; + //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 imgd = img.data; + //色彩过滤 + for (var i = startPos, len = imgd.length; i < len; i += 4) { + if (imgd[i] < filterMin) { + imgd[i] = filterMin; + } else if (imgd[i]> filterMax) { + imgd[i] = filterMax; + } + } + //将修改后的像素数据重绘制至canvas + ctx.putImageData(img, 0, 0); + img.src = canvas.toDataURL(); + } + +} + +//点击函数 +function takePhoto() { + ctx.drawImage(video, 0, 0, 300, 200); + //将原始截图保存 + origindata = ctx.getImageData(0, 0, 300, 200); +} + +//保存图片 +function savePhoto() { + img.src = canvas.toDataURL(); + a.href = canvas.toDataURL(); + a.setAttribute('download', 'handsome'); +} + +//申请网络摄像头操作权限 +function askWebcam() { + navigator.getUserMedia = navigator.getUserMedia || + navigator.webkitGetUserMedia || + navigator.mozGetUserMedia; + if (navigator.getUserMedia) { + navigator.getUserMedia({ + audio: false, + video: { + width: 300, + height: 200 + } + }, function(stream) { + //若成功 + video.srcObject = stream; + video.onloadedmetadata = function(e) { + video.play(); + } + }, function(err) { + console.log('Error occured:' + err.name); + }); + } else { + console.log('this navigator doesn\'t support webcam!'); + } +} + +//滤色函数 +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]); + console.log(filter); + return { + min: _min, + max: _max + } +} \ No newline at end of file diff --git a/19 - Webcam Fun/style.css b/19 - Webcam Fun/style.css new file mode 100644 index 0000000..bf5d004 --- /dev/null +++ b/19 - Webcam Fun/style.css @@ -0,0 +1,18 @@ +html,body{ + padding: 0; + margin: 0; + height: 100%; + width: 100%; +} +.player{ + height:200px; + width:300px; +} +.hasimg{ + display:inline-block; + vertical-align: top; +} +.strip{ + height:200px; + width:300px; +} \ 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`提供了一组使用`