Day12 - 键盘输入序列的验证指南
作者:©Mrlin(史密斯林)
简介:学习记录,用于记录在CSDN课程中的学习内容。
课程:30天完成30个JS原生开发项目挑战视频教程。JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西,不借助框架和库,也不使用编译器和引用。
项目效果
文档里提供了一个 script
标签,供我们从 Cornify.com 加载一个 JS 文件,调用其中的 cornify_add()
方法时,会在页面中追加 p
标签,并在 DOM 中插入一个图标。Cornify 的具体效果如上所示。
解决思路
- 指定可激发特效的字符串
- 监测字符串变化
- 事件监听
- 正则表达式判断字符串输入
- 处理输入,在符合条件时,调用
cornify_add()
代码分析
1. 指定可激发特效的字符串
1 | const pressed = []; |
声明一个空数组pressed
用于键盘输入字符的处理,并且声明一个秘钥字符串secretCode
用于激发效果的触发。
2. 监测字符串变化
- 声明字符串输入变化的
div
1 | <div style="font-size:40px;color:red" class="input_word_pre"></div> |
- 获取div对象
1 | const input_word_pre = document.querySelector('.input_word_pre'); |
- 更新div显示数据
1 | input_word_pre.innerText = pressed.join(''); |
3. 事件监听
1 | window.addEventListener('keyup', callback); |
addEventListener
通过keyup
监听键盘输入的变化,当键盘弹起时,调用callback
函数。
4. 正则表达式判断字符串输入
1 | const regex = new RegExp('[A-z]', 'gi'); |
5. 处理输入,在符合条件时,调用 cornify_add()
1 | <!--当pressed数组里面的字符个数大于密钥字符串的个数时,每新增一个字符,将最前面一个删掉--> |
完整代码
1 | <!DOCTYPE html> |