File tree Expand file tree Collapse file tree
12 - Key Sequence Detection Expand file tree Collapse file tree Original file line number Diff line number Diff line change 44> 简介:[ JavaScript30] ( https://javascript30.com ) 是 [ Wes Bos] ( https://github.com/wesbos ) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西,不借助框架和库,也不使用编译器和引用。现在你看到的是这系列指南的第 12 篇。完整指南在 [ GitHub] ( https://github.com/soyaine/JavaScript30 ) ,喜欢请 Star 哦♪(^∇^* )
55
66> 创建时间:2017-02-27
7- 最后更新:2017-02-28
7+ 最后更新:2017-07-16
88
99## 实现效果
1010
2828 ````
2929
30302 . 添加键盘的 ` keyup ` 事件监听,用箭头函数的参数来接收事件。注意此处的 ` keyup ` 事件是针对页面的,所以在调试时单击页面后时焦点在页面中才生效,在 Console 面板中是不会触发的。
31- ```` js
31+ ```js
3232 window.addEventListener('keyup', (e) => { })
33- ````
33+ ```
3434
35353 . 验证输入的字符。此处方法是将每一个输入的字符存入 ` pressed ` 数组,然后处理数组,使其呈现队列的性质,也就是输入一个字符时,会挤出原有的的字符,保证其最大长度始终为 ` secretCode ` 的长度。这样做的目的是为了便于验证暗号,只有完整无误的输入一次暗号时,才会触发相应的效果。当然这只是其中一种处理办法,也还有其他办法。
36-
3736 ```js
38- window.addEventListener('keyup', (e) => {
37+ window.addEventListener('keyup', (e) => {
3938 console.log(e.key);
4039 pressed.push(e.key);
4140 pressed.splice(-secretCode.length - 1, pressed.length - secretCode.length); //截取数组
4241 if (pressed.join('').includes(secretCode)) { //判断是否符合暗号
4342 console.log('DING DING!');
4443 cornify_add();
45- }
46- ```
44+ }
45+ ```
4746
4847Bingo,输入暗号后触发特效的页面也就完成了,你可以自由在代码里设置需要的暗号。
Original file line number Diff line number Diff line change 1010
1111页面中的文章有几张配图,随着页面上下滚动,图片位置划过图片一半时,图片从两侧滑入;图片位置离开可见区域时,图片向两侧滑出。
1212
13- ![ Scroll 效果演示] ( https://cl.ly/2k2e2H0b1U0J/Screen%20Recording%202017-07-18%20at%2010.04%20%E4%B8%8A%E5%8D%88.gif )
13+ ![ 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 ) 。)
1414
1515下图中蓝色方框位置即是图片所占位置,初始文档中已经写好了内容及样式,需要完成控制图片显示部分的代码来实现图片滑动的效果。
1616
Original file line number Diff line number Diff line change 11# JavaScript30 - 一个月纯 JS 挑战中文指南
22
33创建日期:2016-12-20
4- 最后更新:2017-04 -16
4+ 最后更新:2017-07 -16
55
66> 中文指南作者:[ 缉熙Soyaine] ( https://github.com/soyaine )
77> [ JavaScript30] ( https://javascript30.com ) 教程作者:[ Wes Bos] ( https://github.com/wesbos )
@@ -49,8 +49,8 @@ JavaScirpt30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30
49499 . [x] [ Dev Tools Domination 指南] ( https://github.com/soyaine/JavaScript30/blob/master/09%20-%20Dev%20Tools%20Domination/README.md ) | [ Console 调试技巧在线示例] ( https://soyaine.github.io/JavaScript30/09%20-%20Dev%20Tools%20Domination/index-SOYAINE.html )
505010 . [x] [ Hold Shift and Check Checkboxes 指南] ( https://github.com/soyaine/JavaScript30/blob/master/10%20-%20Hold%20Shift%20and%20Check%20Checkboxes/README.md ) | [ Shift 批量选中在线效果] ( https://soyaine.github.io/JavaScript30/10%20-%20Hold%20Shift%20and%20Check%20Checkboxes/index-SOYAINE.html )
515111 . [x] [ Custom Video Player 指南] ( https://github.com/soyaine/JavaScript30/blob/master/11%20-%20Custom%20Video%20Player/README.md )
52- 12 . [x] [ Key Sequence Detection 指南] ( https://github.com/soyaine/JavaScript30/tree/master/12%20-%20Key%20Sequence%20Detection/README.md )
53- 13 . [ ] Slide in on Scroll
52+ 12 . [x] [ Key Sequence Detection 指南] ( https://github.com/soyaine/JavaScript30/tree/master/12%20-%20Key%20Sequence%20Detection/README.md ) | [ 在线效果 ] ( http://soyaine.cn/JavaScript30/12%20-%20Key%20Sequence%20Detection/index-FINISHED.html )
53+ 13 . [x] [ Slide in on Scroll 指南 ] ( https://github.com/soyaine/JavaScript30/blob/master/13%20-%20Slide%20in%20on%20Scroll/README.md ) | [ 图片随屏幕滚动而滑入滑出的在线效果 ] ( http://soyaine.cn/JavaScript30/13%20-%20Slide%20in%20on%20Scroll/index-SOYAINE.html )
545414 . [ ] JavaScript References vs. Copying
555515 . [ ] LocalStorage
565616 . [ ] Mouse Move Shadow
You can’t perform that action at this time.
0 commit comments