JavaScript 30 - 1 学习笔记
学习JavaScirpt30的笔记！
...虽然英语不是很好，但是跟着来还是学到了一些东西。
1-------> JavaScirpt Drum Kit
功能是这样的 ，敲击键盘上面的按钮，播放一段打鼓的音乐 。
教程之中是有很多个按键，我的demo只做了4个按钮，实现了就可以啦。
直接贴代码吧。
<div class="keys">
<div data-key="65" class="key">
<kbd>A</kbd>
<span class="sound">good</span>
</div> <div data-key="83" class="key">
<kbd>S</kbd>
<span class="sound">not</span>
</div> <div data-key="68" class="key">
<kbd>D</kbd>
<span class="sound">pig</span>
</div> <div data-key="70" class="key">
<kbd>F</kbd>
<span class="sound">ow</span>
</div>
</div> <audio data-key="65" src="sound/3834.wav"></audio>
<audio data-key="83" src="sound/6300.wav"></audio>
<audio data-key="68" src="sound/6714.wav"></audio>
<audio data-key="70" src="sound/982.wav"></audio>
音频是自己从素材网上下载的....
这里一个没有接触过的标签<kdb></kdb>
w3school上面是这样解释的..
定义和用法
<kbd> 标签定义键盘文本。
说到技术概念上的特殊样式时，就要提到 <kbd> 标签。正如你已经猜到的，它用来表示文本是从键盘上键入的。
浏览器通常用等宽字体来显示该标签中包含的文本。
还有就是 div 标签里面的 data-key， 这个key 是什么值呢？为什么是65，83...而不是1,2,3。。
其实他是根据键盘上每个键位的keyCode来填入这个data-key的。
在js里面，可以通过监听keydown事件获取每个键位的keyCode..
window.addEventListener('keydown',function(e){
console.log(e.key+'的keyCode是'+e.keyCode);
});
大家也可以直接百度keyCode对照表，进行查阅。
既然，我们已经知道了keyCode，那么我们就可以使用这个keyCode来搞事了噢。
function playSound(e){
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
if(!audio) return;
audio.currentTime = 0 ;
audio.play();
key.classList.add('playing');
}
首先，我们要选到所需要的元素audio 和 key。 audio用来播放音乐，key用来操作css样式。
在教程里面使用了ES6的写法。
基本用法
const声明一个只读的常量。一旦声明，常量的值就不能改变。
const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。
首先是定义的时候用了const，然后是找元素的时候用了 `` (是键盘tab上面的`不是单引号！！！）
在百度比较难快速查到``是什么的情况下，使用了google，真的 好用...
查到了 深入浅出ES6系列文章中讲的，这是ES6新加的 模板字符串的写法。
反撇号（`）基础知识
ES6引入了一种新型的字符串字面量语法，我们称之为模板字符串（template strings）。除了使用反撇号字符 ` 代替普通字符串的引号 ' 或 " 外，它们看起来与普通字符串并无二致。
模板字符串名之有理，它为JavaScript提供了简单的字符串插值功能，从此以后，你可以通过一种更加美观、更加方便的方式向字符串中插值了。
而我们在上面代码里${e.keyCode},其实就是字符串插值的功能。
classList 也是之前写代码的时候没有用到的新东西...（对于我来说）
定义和用法
classList 属性返回元素的类名，作为 DOMTokenList 对象。
该属性用于在元素中添加，移除及切换 CSS 类。
classList 属性是只读的，但你可以使用 add() 和 remove() 方法修改它。
总之这段代码就是实现了按下并且播放，同时为按下的key添加playing 这个类
可是我们需要的效果是playing之后又复原。 所以我们还需要把添加好的playing 移除。
于是乎：
const keys = document.querySelectorAll('.key');
keys.forEach(key =>key.addEventListener('transitionend',removeTransition));
function removeTransition(e){
if(e.propertyName !=='transform') return;
this.classList.remove('playing');
}
看这段代码..又有新的东西啦！
基本用法
ES6 允许使用“箭头”（
=>）定义函数。var f = v => v;上面的箭头函数等同于：
var f = function(v) {
return v;
};
也就是说 上面那段代码的意思就是 为keys里面的每个元素都执行一次
key.addEventListener('transitionend',removeTransition)；
transitionend代表着动画结束。 动画结束后，就自己移除playing类。 那么，为什么要加这样一句呢？
if(e.propertyName !=='transform') return; 因为，如果不对e进行选择，那么，每个e里面都会有许多属性，因为，我们想要操作的只是transform...所以要加上这一句来过滤掉那些不需要操作的css 最后贴上完整的代码吧：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head> <style type="text/css"> body{
background-color: cadetblue; } .keys{
display: flex;
} .key{
border: 4px solid black;
border-radius: 5px;
margin: 1rem;
font-size: 1.5rem;
padding: 1rem .5rem;
transition: all 0.07s;
width: 100px;
text-align: center;
color: #fff;
background-color: rgba(0,0,0,0.4);
text-shadow: 0 0 5px black;
} .playing{
transform: scale(1.1);
border-color: #ffc600;
box-shadow: 0 0 10px #FFC600;
} kbd{
display: block;
font-size: 40px;
} .sound{
font-size: 1.2rem;
text-transform: uppercase;
letter-spacing: 1px;
color: #FFC600;
} </style> <body>
<div class="keys">
<div data-key="65" class="key">
<kbd>A</kbd>
<span class="sound">good</span>
</div> <div data-key="83" class="key">
<kbd>S</kbd>
<span class="sound">not</span>
</div> <div data-key="68" class="key">
<kbd>D</kbd>
<span class="sound">pig</span>
</div> <div data-key="70" class="key">
<kbd>F</kbd>
<span class="sound">ow</span>
</div>
</div> <audio data-key="65" src="sound/3834.wav"></audio>
<audio data-key="83" src="sound/6300.wav"></audio>
<audio data-key="68" src="sound/6714.wav"></audio>
<audio data-key="70" src="sound/982.wav"></audio> </body> <script> function playSound(e){
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
const key = document.querySelector(`.key[data-key="${e.keyCode}"]`); if(!audio) return;
audio.currentTime = 0 ;
audio.play();
key.classList.add('playing');
} function removeTransition(e){
if(e.propertyName !=='transform') return; this.classList.remove('playing'); } const keys = document.querySelectorAll('.key');
keys.forEach(key =>key.addEventListener('transitionend',removeTransition)); window.addEventListener('keydown',playSound);
</script> </html>
谢谢...
JavaScript 30 - 1 学习笔记的更多相关文章
- JavaScript 30 - 2 学习笔记
学习JavaScirpt30的笔记! 有意思! 2-------> CSS clock 效果是这样的.... 这是改良过后的 版本.... 话不多说,直接来看代码. 首先是html部分 &l ...
- JavaScript 30 - 3 学习笔记
今天学习的是JavaScript 30-3 ---css Variables 实现的效果如下图所示. 废话不多,我们直接来看代码. html: <h1>大家好,这个一个<span c ...
- ArcGIS API for JavaScript 4.2学习笔记[0] AJS4.2概述、新特性、未来产品线计划与AJS笔记目录
放着好好的成熟的AJS 3.19不学,为什么要去碰乳臭未干的AJS 4.2? 4.2全线基础学习请点击[直达] 4.3及更高版本的补充学习请关注我的博客. ArcGIS API for JavaScr ...
- 7 种 Javascript 常用设计模式学习笔记
7 种 Javascript 常用设计模式学习笔记 由于 JS 或者前端的场景限制,并不是 23 种设计模式都常用. 有的是没有使用场景,有的模式使用场景非常少,所以只是列举 7 个常见的模式 本文的 ...
- JavaScript 权威指南-学习笔记（一）
本文所有教程及源码.软件仅为技术研究.不涉及计算机信息系统功能的删除.修改.增加.干扰,更不会影响计算机信息系统的正常运行.不得将代码用于非法用途,如侵立删! ## JavaScript 权威指南-学 ...
- ArcGIS API for JavaScript 4.2学习笔记[1] 显示地图
ArcGIS API for JavaScript 4.2直接从官网的Sample中学习,API Reference也是从官网翻译理解过来,鉴于网上截稿前还没有人发布过4.2的学习笔记,我就试试吧. ...
- JavaScript权威设计--JavaScript函数(简要学习笔记十一)
1.函数调用的四种方式 第三种:构造函数调用 如果构造函数调用在圆括号内包含一组实参列表,先计算这些实参表达式,然后传入函数内.这和函数调用和方法调用是一致的.但如果构造函数没有形参,JavaScri ...
- JavaScript权威设计--JavaScript函数(简要学习笔记十)
1.函数命名规范 函数命名通常以动词为前缀的词组.通常第一个字符小写.当包含多个单词时,一种约定是将单词以下划线分割,就像"like_Zqz()". 还有一种就是"lik ...
- 《你不知道的 JavaScript 上卷》 学习笔记
第一部分: 作用域和闭包 一.作用域 1. 作用域:存储变量并且查找变量的规则 2. 源代码在执行之前(编译)会经历三个步骤: 分词/此法分析:将代码字符串分解成有意义的代码块(词法单元) 解析/语法 ...
随机推荐
- (转)MySql数据库索引原理（总结性）
本文引用文章如链接: http://www.codinglabs.org/html/theory-of-mysql-index.html#more-100 参考书籍:Mysql技术内幕 本文主要是阐述 ...
- tensorflow官方文档中的sub 和mul中的函数已经在API中改名了
在照着tensorflow 官方文档和极客学院中tensorflow中文文档学习tensorflow时,遇到下面的两个问题: 1)AttributeError: module 'tensorflow' ...
- 在同一个sql语句中，统计不同条件的Count数量
前几天帮同事优化了个SQL,原写法使用多个子查询这里不再重现了,大家都遇到过这样一种情况,在项目后期的维护中, 修改别人的SQL代码,超过30行的语句,多层子查询,读起来很坑,时间久的项目伴随着人员的 ...
- python 一个包中的文件调用另外一个包文件 实例
python不同文件夹中模块的引用调用顺序,被调用的模块中①有类的 模块.类().方法() ②无类的:模块.方法() test包中testIm.py 调用 test1包中testIm1.py中的方 ...
- 假面舞会[NOI2008]
题目描述 一年一度的假面舞会又开始了,栋栋也兴致勃勃的参加了今年的舞会.今年的面具都是主办方特别定制的.每个参加舞会的人都可以在入场时选择一 个自己喜欢的面具.每个面具都有一个编号,主办方会把此编号告 ...
- HttpRequest 类
关于此类的介绍:查看HttpRequest类 点击查看:HttpRequest中方法的封装 跟这个类对应的HttpResponse类 定义:使 ASP.NET 能够读取客户端在 Web 请求期间发送的 ...
- HashMap遍历和使用
map的几种遍历方式: Map< String, String> map = new HashMap<>(); map.put("aa", "@s ...
- JavaScript数组遍历（迭代）方法 8种
最近工作中经常涉及到数据的处理,数组尤其常见,经常需要对其进行遍历.转换操作,网上的文章零零散散,不得已自己又找出红宝书来翻出来看,顺便记一笔,便于以后查询. 数组常用的方法 ECMAScript5为 ...
- js单页hash路由原理与应用实战
什么是路由? 通俗点说,就是不同的URL显示不同的内容 什么是单页应用? 单页,英文缩写为SPA( Single Page Application),就是把各种功能坐在一个页面内. 那所谓的单页路由应 ...
- Maven干货
好处: 1. 依赖管理:对jar包统一管理 2. 项目构建: 项目编码完成后,对项目进行编译.测试.打包.部署.之前项目构建通过eclipse工具实现.今天学习新的工具也可以实现这些过程.比如:通过m ...