今天得到一个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. hdu 3006 The Number of set(思维+壮压DP)

    The Number of set Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others ...

  2. CodeIgniter RestServer中put请求获取不到參数的问题解决

    近期用restserver遇到个蛋疼的问题,发现$this->put得到的參数都是null.查了一下发现.这貌似这个普遍问题,參见链接:https://github.com/chriskacer ...

  3. Azure Pack演示样例缩放部署架构

  4. tf.float32 implicity

    简介  |  TensorFlow https://tensorflow.google.cn/programmers_guide/low_level_intro 我们来构建一个简单的计算图.最基本的指 ...

  5. 动态代理3--Spring AOP分析

    Spring AOP的基本实现方式 ​Spring AOP,一种模块化机制,能够动态的对切点添加行为,而不破坏原有的代码结构. 这是一个非常好地动态代理的应用方式.Spring AOP实现依赖于JDK ...

  6. 编译android framework的例子【转】

    本文转载自:http://blog.csdn.net/brucexu1978/article/details/7610358 在开发过程中,尤其是Framework相关开发时,有时候需要重新编译资源文 ...

  7. Linux ALSA声卡驱动之一:ALSA架构简介【转】

    本文转载自:http://blog.csdn.net/droidphone/article/details/6271122 声明:本博内容均由http://blog.csdn.net/droidpho ...

  8. caioj1472: 后缀自动机1:多个串的LCS

    子串母串跑合并答案 一个点的fail的dep是比任意一条根到这个点路径长度要小的. 那么改就可以直接来了. #include<cstdio> #include<iostream> ...

  9. 杂项:MySQL

    ylbtech-杂项:MySQL 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部 0. https://www.mysql.com/ 1. https://bai ...

  10. js中setInterval() 和 setTimeout()

    setInterval() 方法 定义和用法 setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. setInterval() 方法会不停地调用函数,直到 clearI ...