JavaScript专案学习笔记 -键盘监听 1/30天

感谢https://javascript30.com/的免费教程

Demo：http://codepen.io/FutureFronterAndy/pen/VmByjZ
1
JavaScript Drum Kit
2
CSS + JS Clock
3
Playing with CSS Variables and JS
4
Array Cardio Day 1
5
Flex Panels Image Gallery
6
Ajax Type Ahead
7
Array Cardio Day 2
8
Fun with HTML5 Canvas
9
14 Must Know Dev Tools Tricks
10
Hold Shift to Check Multiple Checkboxes
11
Custom HTML5 Video Player
12
Key Sequence Detection (KONAMI CODE)
13
Slide In on Scroll
14
Object and Arrays - Reference VS Copy
15
LocalStorage and Event Delegation
16
CSS Text Shadow Mouse Move Effect
17
Sorting Band Names without articles
18
Tally String Times with Reduce
19
Unreal Webcam Fun
20
Native Speech Recognition
21
Geolocation based Speedometer and Compass
22
Follow Along Links
23
Speech Synthesis
24
Sticky Nav
25
Event Capture, Propagation, Bubbling and Once
26
Stripe Follow Along Dropdown
27
Click and Drag to Scroll
28
Video Speed Controller UI
29
Countdown Clock
30
Whack A Mole Game

学习点：

[javascript]

window.addEventListener('keydown',function(e) {
/* Act on the event */
const audio = document.querySelector(audio[data-key="${e.keyCode}"]);
const key = document.querySelector(.key[data-key="${e.keyCode}"]);

if(!audio)return;
audio.currentTime=0;
key.classList.add('playing');
audio.play();

});

[/javascript]

关于backtick "`"(ES6 only):http://eslint.org/docs/rules/quotes, http://stackoverflow.com/questions/27678052/what-is-the-usage-of-the-backtick-symbol-in-javascript

*帮助留住换行

[javascript]
function removeTransition(e){
if(e.propertyName!="transform")return;
this.classList.remove('playing');
}
const keys =document.querySelectorAll('.key');
keys.forEach(key => key.addEventListener('transitionend',removeTransition));

[/javascript]

关于transitionend：http://www.w3schools.com/jsref/event_transitionend.asp

*控制CSS Transition动画，在动画结束后触发