原生JS【fiveKeyPress】2秒内五次点击键盘任意键（或组合键）触发自定义事件（以Pause/Break键为例）

看文章之前来一个热身吧[JavaScript键码表]身为一个键盘侠，不搞清楚键码映射表怎么可以？？？_你挚爱的强哥(http://www.shuzhiqiang.com)-CSDN博客keycode 0 =keycode 1 =keycode 2 =keycode 3 =keycode 4 =keycode 5 =keycode 6 =keycode 7 =keycode 8 = BackSpacekeycode 9 = Tabkeycode 10 =keycode 11 =keycode 12 = Clearkeycode 13 = Enterkeycode 14 =keycode 15 =keycode 16 = Shift_Lkeycode 17.https://blog.csdn.net/qq_37860634/article/details/120446294

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8">
</head>
<body>
</body>
<script>let multiKeyPress = {keyPressTimes: 0,// 2秒内5连击（默认）________________________trigger(multiKeyPressCallback,singleClickCallback,maxTimes = 5,time = 2000) {this.keyPressTimes || (this.keyPressTimes = 0);++this.keyPressTimes >= maxTimes &&(multiKeyPressCallback && multiKeyPressCallback(),singleClickCallback || (this.keyPressTimes = 0));this.keyPressTimes === 1 &&setTimeout(() => {this.keyPressTimes < maxTimes &&singleClickCallback &&singleClickCallback(); //执行单击键盘or少于maxTimes次数的点击this.keyPressTimes = 0;}, time);}};/*设置快捷键*/onkeyup = e => {if (e.key === 'Pause') {/*按下Pause/Break键时候执行*/multiKeyPress.trigger(() => {// 双击键盘alert(`【更新时间】${versionTime}\n（注意校对是否已发布最新代码）`);},() => {// 单击键盘console.count();console.log("单击Pause/Break键");}, 2, 300);}};let versionTime='2021年01月01日 00:00:00';
</script>
</html>

原生JS【fiveKeyPress】2秒内五次点击键盘任意键（或组合键）触发自定义事件（以Pause/Break键为例）相关推荐

【fiveKeyPress】2秒内五次点击键盘任意键（或组合键）触发自定义事件（以Pause/Break键为例）
看文章之前来一个热身吧[JavaScript键码表]身为一个键盘侠,不搞清楚键码映射表怎么可以???_你挚爱的强哥(http://www.shuzhiqiang.com)-CSDN博客keycode ...
原生JS超级马里奥（第五天）
上一章讲的是键盘事件监听,实现马里奥的跳跃功能,本章讲述马里奥和大地(砖块)的碰撞检测,代码有点多,原视频长度差不多1个小时20分钟,大家可以看原视频进行理解,边看边敲,我在这里写的代码和注释仅我自己 ...
原生js实现【longPressKey】长按键盘任意键（或组合键）3秒触发自定义事件（以Pause/Break键为例）
<!doctype html> <html lang="en"> <head><meta charset="UTF-8" ...
【longPressKey】长按键盘任意键（或组合键）3秒触发自定义事件（以Pause/Break键为例）
<!doctype html> <html lang="en"> <head><meta charset="UTF-8" ...
如何定义一个高逼格的原生JS插件
作为一个前端er,如果不会写一个小插件,都不好意思说自己是混前端界的.写还不能依赖jquery之类的工具库,否则装得不够高端.那么,如何才能装起来让自己看起来逼格更高呢?当然是利用js纯原生的写法啦. ...
原生JS仿造华为商城案例-实现了简单页面-两种轮播图思路的实现-动态展示数据
文章目录功能简介项目准备项目说明方案一:源代码 CSS样式 HTML结构 JS逻辑方案二:源代码 CSS样式 HTML结构 JS逻辑功能简介页面展示该项目功能实现: 无限滚动轮播图 j ...
原生js插件（超详细）
作为一个前端er,如果不会写一个小插件,都不好意思说自己是混前端界的.写还不能依赖jquery之类的工具库,否则装得不够高端.那么,如何才能装起来让自己看起来逼格更高呢?当然是利用js纯原生的写法啦. ...
html 监听input输入框的值,利用原生JS实时监听input框输入值
利用原生JS实时监听input框输入值原生JS中可以使用oninput,onpropertychange,onchange oninput,onpropertychange,onchange的用法 ...
原生JS实现粘贴到剪贴板
本文主要讨论原生方法目前常见的实现粘贴到剪贴板主要有以下两种方法: 第三方库 clipboard 原生JS, 主要是 document.execCommand方法第一种方法按照文档说明,设置触发元 ...

原生JS【fiveKeyPress】2秒内五次点击键盘任意键（或组合键）触发自定义事件（以Pause/Break键为例）

原生JS【fiveKeyPress】2秒内五次点击键盘任意键（或组合键）触发自定义事件（以Pause/Break键为例）相关推荐

最新文章

热门文章