JavaScipt30(第一个案例)(主要知识点:键盘事件以及transitionend)

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);
备注:不过他的实现效果我感觉还是有一点点瑕疵,按住键位不放时,会不停在高亮与不高亮之间切换,最后保持高亮不变,松开也不再还原。不过思想值得借鉴。
JavaScipt30(第一个案例)(主要知识点:键盘事件以及transitionend)的更多相关文章
- Dom 键盘事件以及实战案例
键盘事件 //键盘操作 //1.某键盘按下执行的操作 document是对文档进行触发 document.onkeyup = function(){ console.log('你好') } docum ...
- 3-3 编程练习:jQuery键盘事件案例
3-3 编程练习 完善下面的代码,在input框中输入内容的时候同样显示在下面的p标签中 <!DOCTYPE html> <html lang="zh-CN"&g ...
- javascript进阶教程第一章案例实战
javascript进阶教程第一章案例实战 一.学习任务 通过几个案例练习回顾学过的知识 通过练习积累JS的使用技巧 二.实例 练习1:删除确认提示框 实例描述: 防止用户小心单击了“删除”按钮,在用 ...
- jquery键盘事件总结
在工作中在发现同事在写输入密码按键的相关js效果时,发现自己对于这块很是不了解,这几天特地了解了一下,进行以下总结: 一.首先要知道键盘事件的几个属性: 1.keydown():在键盘按下时触发. 2 ...
- js键盘事件全面控制详解
js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件 ...
- 读w3c中文教程对键盘事件解释的感想 -遁地龙卷风
写这篇博文源于w3c中文教程对键盘事件的解释, onkeydown 某个键盘按键被按下 onkeypress 某个键盘按键被按下并松开 onkeyup 某个键盘按键被松开 可在实践中发现 只注册key ...
- js键盘事件全面控制
js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型 ...
- js键盘事件全面控制详解【转】
js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型 ...
- 深入了解jquery中的键盘事件
很多时候,我们需要获取用户的键盘事件,下面就一起来看看jquery是如何操作键盘事件的. 一.首先需要知道的是: 1.keydown() keydown事件会在键盘按下时触发. 2.keyup() k ...
随机推荐
- 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 ...
- CodeIgniter RestServer中put请求获取不到參数的问题解决
近期用restserver遇到个蛋疼的问题,发现$this->put得到的參数都是null.查了一下发现.这貌似这个普遍问题,參见链接:https://github.com/chriskacer ...
- Azure Pack演示样例缩放部署架构
- tf.float32 implicity
简介 | TensorFlow https://tensorflow.google.cn/programmers_guide/low_level_intro 我们来构建一个简单的计算图.最基本的指 ...
- 动态代理3--Spring AOP分析
Spring AOP的基本实现方式 Spring AOP,一种模块化机制,能够动态的对切点添加行为,而不破坏原有的代码结构. 这是一个非常好地动态代理的应用方式.Spring AOP实现依赖于JDK ...
- 编译android framework的例子【转】
本文转载自:http://blog.csdn.net/brucexu1978/article/details/7610358 在开发过程中,尤其是Framework相关开发时,有时候需要重新编译资源文 ...
- Linux ALSA声卡驱动之一:ALSA架构简介【转】
本文转载自:http://blog.csdn.net/droidphone/article/details/6271122 声明:本博内容均由http://blog.csdn.net/droidpho ...
- caioj1472: 后缀自动机1:多个串的LCS
子串母串跑合并答案 一个点的fail的dep是比任意一条根到这个点路径长度要小的. 那么改就可以直接来了. #include<cstdio> #include<iostream> ...
- 杂项:MySQL
ylbtech-杂项:MySQL 1.返回顶部 2.返回顶部 3.返回顶部 4.返回顶部 5.返回顶部 0. https://www.mysql.com/ 1. https://bai ...
- js中setInterval() 和 setTimeout()
setInterval() 方法 定义和用法 setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. setInterval() 方法会不停地调用函数,直到 clearI ...