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-27
7+ 最后更新:2017-02-28
88
99## 实现效果
1010
11- 初始文档里仅仅提供了一个 ` script ` 标签,供我们从 [ Cornify.com] ( https://www.cornify.com/ ) 加载一个 JS 文件,调用其中的 ` cornify_add() ` 方法时,会在页面中追加 ` p ` 标签,并在 DOM 中插入一个图标。Cornify 官网首页去体验 。
11+ 初始文档里仅仅提供了一个 ` script ` 标签,供我们从 [ Cornify.com] ( https://www.cornify.com/ ) 加载一个 JS 文件,调用其中的 ` cornify_add() ` 方法时,会在页面中追加 ` p ` 标签,并在 DOM 中插入一个图标。Cornify 的具体效果可以到官网首页去体验 。
1212
1313而这个挑战要实现的效果是,当在此页面完整输入了“暗号”(一串事先定义好的字符串)时,生成新的 Cornify 特效。
1414
2222
23231 . 声明一个空数组,用于存放的输入字符,同时声明“暗号”
2424
25- ```` js
26- const pressed = [],
27- secretCode = ' helloworld'
28- ````
25+ ````js
26+ const pressed = [],
27+ secretCode = 'helloworld'
28+ ````
2929
30302 . 添加键盘的 ` keyup ` 事件监听,用箭头函数的参数来接收事件。注意此处的 ` keyup ` 事件是针对页面的,所以在调试时单击页面后时焦点在页面中才生效,在 Console 面板中是不会触发的。
31-
32- ```` js
33- window .addEventListener (' keyup' , (e ) => { })
34- ````
31+ ````js
32+ window.addEventListener('keyup', (e) => { })
33+ ````
3534
36353 . 验证输入的字符。此处方法是将每一个输入的字符存入 ` pressed ` 数组,然后处理数组,使其呈现队列的性质,也就是输入一个字符时,会挤出原有的的字符,保证其最大长度始终为 ` secretCode ` 的长度。这样做的目的是为了便于验证暗号,只有完整无误的输入一次暗号时,才会触发相应的效果。当然这只是其中一种处理办法,也还有其他办法。
3736
38- ``` js
37+ ```js
3938window.addEventListener('keyup', (e) => {
40- console .log (e .key );
41- pressed .push (e .key );
42- pressed .splice (- secretCode .length - 1 , pressed .length - secretCode .length ); // 截取数组
43- if (pressed .join (' ' ).includes (secretCode)) { // 判断是否符合暗号
44- console .log (' DING DING!' );
45- cornify_add ();
39+ console.log(e.key);
40+ pressed.push(e.key);
41+ pressed.splice(-secretCode.length - 1, pressed.length - secretCode.length); //截取数组
42+ if (pressed.join('').includes(secretCode)) { //判断是否符合暗号
43+ console.log('DING DING!');
44+ cornify_add();
4645 }
4746```
4847
You can’t perform that action at this time.
0 commit comments