(Node+Vue+微信公众号开发)企业级产品全栈开发速成周末班首期班(10.28号正式开班，欢迎抢座)
作者：©liyuechun
简介：JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 12 篇。完整中文版指南及视频教程在 从零到壹全栈部落。
项目效果
文档里提供了一个 script 标签，供我们从 Cornify.com 加载一个 JS 文件，调用其中的 cornify_add() 方法时，会在页面中追加 p 标签，并在 DOM 中插入一个图标。Cornify 的具体效果如上所示。
解决思路
指定可激发特效的字符串
监测字符串变化
事件监听
正则表达式判断字符串输入
处理输入，在符合条件时，调用
cornify_add()
代码分析
1. 指定可激发特效的字符串
const pressed = [];
const secretCode = 'liyc';声明一个空数组pressed用于键盘输入字符的处理，并且声明一个秘钥字符串secretCode用于激发效果的触发。
2. 监测字符串变化
声明字符串输入变化的
div
<div style="font-size:40px;color:red" class="input_word_pre"></div>
<div style="font-size:40px;color:blue" class="input_word_af"></div> 获取div对象
const input_word_pre = document.querySelector('.input_word_pre');
const input_word_af = document.querySelector('.input_word_af');更新div显示数据
input_word_pre.innerText = pressed.join('');
...
input_word_af.innerText = pressed.join('');3. 事件监听
window.addEventListener('keyup', callback);addEventListener通过keyup监听键盘输入的变化，当键盘弹起时，调用callback函数。
4. 正则表达式判断字符串输入
const regex = new RegExp('[A-z]', 'gi');
<!--判断输入的键盘上的字母是A - z的字符-->
if (e.key.length === 1 && e.key.match(regex)) {
...
}5. 处理输入，在符合条件时，调用 cornify_add()
<!--当pressed数组里面的字符个数大于密钥字符串的个数时，每新增一个字符，将最前面一个删掉-->
pressed.splice(0, pressed.length - secretCode.length);
<!--当`pressed`数组里面的连续的字符连接成的字符串中包涵我们给定的秘钥时，调用`cornify_add();`函数-->
if (pressed.join('').includes(secretCode)) {
cornify_add();
}完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Key Detection</title>
<script type="text/javascript" src="http://www.cornify.com/js/cornify.js"></script>
</head>
<body>
<div style="font-size:20px;color:green">请输入:liyc</div>
<div style="font-size:40px;color:red" class="input_word_pre"></div>
<div style="font-size:40px;color:blue" class="input_word_af"></div>
<script>
const pressed = [];
const secretCode = 'liyc';
const input_word_pre = document.querySelector('.input_word_pre');
const input_word_af = document.querySelector('.input_word_af');
window.addEventListener('keyup', (e) => {
const regex = new RegExp('[A-z]', 'gi');
if (e.key.length === 1 && e.key.match(regex)) {
pressed.push(e.key);
input_word_pre.innerText = pressed.join('');
pressed.splice(0, pressed.length - secretCode.length);
input_word_af.innerText = pressed.join('');
if (pressed.join('').includes(secretCode)) {
console.log('DING DING!');
cornify_add();
// alert(secretCode);
}
}
});
</script>
</body>
</html>源码下载
社群品牌：从零到壹全栈部落
定位：寻找共好，共同学习，持续输出全栈技术社群
业界荣誉：IT界的逻辑思维
文化：输出是最好的学习方式
官方公众号：全栈部落
社群发起人：春哥(从零到壹创始人，交流微信：liyc1215)
技术交流社区：全栈部落BBS
全栈部落完整系列教程：全栈部落完整电子书学习笔记
| 关注全栈部落官方公众号，每晚十点接收系列原创技术推送 |
|---|
 |
html5
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。