今天得到一个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. HDU5768Lucky7

    Lucky7 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Subm ...

  2. 写一个简单的Makefile

    all: osx .PHONY: osx linux run osx: kale.dylib linux : kale.so run: kale.bin CC = gcc OBJECTS = $(pa ...

  3. A Go library implementing an FST (finite state transducer)——mark下

    https://github.com/couchbaselabs/vellum Building an FST To build an FST, create a new builder using ...

  4. Java 工程与 Eclipse 高级用法

    0. 显示各种视图(perspective)及工具窗口 [Window]⇒ [Perspective]⇒ [Open perspective]⇒ other(如下图所示): [Window]⇒ [Sh ...

  5. 5 Application 对象

    5.1鸟瞰Application对象 5.2 必须了解的面向显示特性 5.2.1 使用ScreenUpdating改进和完善执行性能 代码清单5.1:实现屏幕更新的性能 '代码清单5.1: 实现屏幕更 ...

  6. bzoj2338

    计算几何 我们先把所有的线段求出来,我们发现只有两个线段等长且中点重合时才能构成矩形,那么线段有n*n条,我们按中点,长度排序,然后对于一条线段扫描所有符合条件的线段计算答案,这样看起来是O(n^3) ...

  7. C++中虚析构函数的作用 (转载)

    转自:http://blog.csdn.net/starlee/article/details/619827 我们知道,用C++开发的时候,用来做基类的类的析构函数一般都是虚函数.可是,为什么要这样做 ...

  8. E20170603-ts

    sanitize vt. 净化; 进行消毒; 使清洁; 审查; omission  n. 遗漏; 疏忽; 省略,删节; [法] 不履行法律责任; separator   n. 分离器,分离装置; 防胀 ...

  9. bzoj 1704: [Usaco2007 Mar]Face The Right Way 自动转身机【贪心+差分】

    首先O(n^3)的贪心很好想,就是枚举k然后从前往后扫,扫到反就翻转区间 然后考虑优化掉翻转区间维,就是搞成差分的形式,在翻转区间的尾部打上标记,再用一个变量维护当前的翻转次数,加到当前状态上来判断是 ...

  10. Linux安装MySQL标准教程

    导读: 本文主要介绍 CentOS 系统二进制安装 MySQL 5.7.23 版本的安装步骤,其他版本安装过程相似. 1.前置准备 卸载旧版MySQL 查看rpm包 rpm -qa|grep mysq ...