今天得到一个github练习项目,是30个原生js写成的小例子,麻雀虽小五脏俱全,现在记录一下第一个。
第一个是键盘按键时页面上对应的键高亮,同时播放音频,松开后不再高亮。

我自己实现了一下,然后查看了他的代码,发现比我精妙许多,下面是他的代码,我把一些我原来自己写代码时不熟悉的进行了注释。
function removeTransition(e) {
// 动画结束会重绘一下,这个是找到执行了transform的元素.
if (e.propertyName !== 'transform') return;
e.target.classList.remove('playing');
} function playSound(e) {
// element = baseElement.querySelector(selectors),selectors 是一个CSS选择器字符串,我原来只使用id和class选择器,此处使用了css属性选择器,省事
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
//这里应该是等待音频文件加载
if (!audio) return;
// 原生用得少,给css加class我以前只知道直接key.className = XXX这种方式
// Element.classList 是一个只读属性,可以使用add()和remove()方法修改它
// 其还有item, toggle, contains, replace这几个方法.具体可以到https://developer.mozilla.org/zh-CN/docs/Web/API/Element/classList上面查看
key.classList.add('playing');
// currentTime,设置audio的初始时间为0秒
audio.currentTime = 0;
audio.play();
} //获取所有代表着键位的dom
// Array.from(arrayLike, mapFn, thisArg) es6新方法,从一个类似数组或可迭代对象中创建一个新的数组实例
// arrayLike: 想要转换成数组的伪数组对象或可迭代对象
// mapFn(可选): 如果指定了该参数,新数组中的每个元素会执行该回调函数
// thisArg (可选): 可选参数,执行回调函数 mapFn 时 this 对象
const keys = Array.from(document.querySelectorAll('.key'));
// transitionend,在CSS完成过渡后触发,这里大概相当于keyup的作用,很巧妙
keys.forEach(key => key.addEventListener('transitionend', removeTransition));
window.addEventListener('keydown', playSound);

备注:不过他的实现效果我感觉还是有一点点瑕疵,按住键位不放时,会不停在高亮与不高亮之间切换,最后保持高亮不变,松开也不再还原。不过思想值得借鉴。

下一个案例: https://www.cnblogs.com/wangxi01/p/10641210.html

JavaScipt30(第一个案例)(主要知识点:键盘事件以及transitionend)的更多相关文章

  1. Dom 键盘事件以及实战案例

    键盘事件 //键盘操作 //1.某键盘按下执行的操作 document是对文档进行触发 document.onkeyup = function(){ console.log('你好') } docum ...

  2. 3-3 编程练习:jQuery键盘事件案例

    3-3 编程练习 完善下面的代码,在input框中输入内容的时候同样显示在下面的p标签中 <!DOCTYPE html> <html lang="zh-CN"&g ...

  3. javascript进阶教程第一章案例实战

    javascript进阶教程第一章案例实战 一.学习任务 通过几个案例练习回顾学过的知识 通过练习积累JS的使用技巧 二.实例 练习1:删除确认提示框 实例描述: 防止用户小心单击了“删除”按钮,在用 ...

  4. jquery键盘事件总结

    在工作中在发现同事在写输入密码按键的相关js效果时,发现自己对于这块很是不了解,这几天特地了解了一下,进行以下总结: 一.首先要知道键盘事件的几个属性: 1.keydown():在键盘按下时触发. 2 ...

  5. js键盘事件全面控制详解

      js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件 ...

  6. 读w3c中文教程对键盘事件解释的感想 -遁地龙卷风

    写这篇博文源于w3c中文教程对键盘事件的解释, onkeydown 某个键盘按键被按下 onkeypress 某个键盘按键被按下并松开 onkeyup 某个键盘按键被松开 可在实践中发现 只注册key ...

  7. js键盘事件全面控制

    js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型 ...

  8. js键盘事件全面控制详解【转】

    js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型 ...

  9. 深入了解jquery中的键盘事件

    很多时候,我们需要获取用户的键盘事件,下面就一起来看看jquery是如何操作键盘事件的. 一.首先需要知道的是: 1.keydown() keydown事件会在键盘按下时触发. 2.keyup() k ...

随机推荐

  1. php与国付宝对接过程吐槽

    最近.我们在打造全国第一家互联网+风险管理平台(避险谷)时.须要与第三方支付平台"国付宝"进行在线交易对接. 之前对接过支付宝 .感觉还非常easy,拿到国付宝的接口文档.我晕啊. ...

  2. linux文件系统的权限简单介绍

    linux系统下,文件的权限是这样表示的: - --- --- --- 一共用10位的二进制进行表示,其中 位置 0 :  - :文件        d :目录剩下的9个位置:位置1-3 当前用户(应 ...

  3. Genymotion模拟器连接不上开发服务器解决办法

    问题截图: 问题原因:虚拟机没有联网.可以打开虚拟机的浏览器随便打开一个网站试一下能不能正常上网.如果不能正常上网. 第一步: 打开VirtualBox 点击确定.重启Genymotion.

  4. Hibernate - Query简易

    package cn.demo; import java.util.List; import org.hibernate.Query; import org.hibernate.Session; im ...

  5. JQuery 日期选择框

    一    jeDate日期控件,关于官方的文档请查看: http://www.jayui.com/jedate/ 1 引入js文件 <script type="text/javascr ...

  6. 10.06 WZZX Day1总结

    今天迎来了WZZX的模拟.打开pdf的时候我特别震惊,出题的竟然是神仙KCZ!没错,就是那个活跃于各大OJ,在各大OJ排名靠前(LOJ Rank1),NOI2018 Rank16进队的kczno1!! ...

  7. 9 Range 实用操作

    9.1 剪切.复制和粘贴来移动数据 sourceRange.Cut [Destination] 如果指定Destination,相当于Ctrl^X(sourceRange) & Ctrl^V( ...

  8. is not mapped [from错误

    我出现的错误是:org.hibernate.hql.ast.QuerySyntaxException: loginuser is not mapped [from loginuser] 配置文件如下: ...

  9. bzoj 3942: [Usaco2015 Feb]Censoring【kmp+栈】

    好久没写kmp都不会写了-- 开两个栈,s存当前串,c存匹配位置 用t串在栈s上匹配,栈每次入栈一个原串字符,用t串匹配一下,如果栈s末尾匹配了t则弹栈 #include<iostream> ...

  10. redis之简单动态字符串(SDS)

    O(N):时间复杂度 N的值越大 时间复杂度随N的平方增大 O(1):就是说N很大的时候,复杂度基本不增长了.基本就是常量了. 在Redis数据库里 包含字符串值的键值对 在底层都是由SDS实现的. ...