学习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 学习笔记的更多相关文章

  1. JavaScript 30 - 2 学习笔记

    学习JavaScirpt30的笔记! 有意思! 2------->   CSS clock 效果是这样的.... 这是改良过后的 版本.... 话不多说,直接来看代码. 首先是html部分 &l ...

  2. JavaScript 30 - 3 学习笔记

    今天学习的是JavaScript 30-3 ---css Variables 实现的效果如下图所示. 废话不多,我们直接来看代码. html: <h1>大家好,这个一个<span c ...

  3. ArcGIS API for JavaScript 4.2学习笔记[0] AJS4.2概述、新特性、未来产品线计划与AJS笔记目录

    放着好好的成熟的AJS 3.19不学,为什么要去碰乳臭未干的AJS 4.2? 4.2全线基础学习请点击[直达] 4.3及更高版本的补充学习请关注我的博客. ArcGIS API for JavaScr ...

  4. 7 种 Javascript 常用设计模式学习笔记

    7 种 Javascript 常用设计模式学习笔记 由于 JS 或者前端的场景限制,并不是 23 种设计模式都常用. 有的是没有使用场景,有的模式使用场景非常少,所以只是列举 7 个常见的模式 本文的 ...

  5. JavaScript 权威指南-学习笔记（一）

    本文所有教程及源码.软件仅为技术研究.不涉及计算机信息系统功能的删除.修改.增加.干扰,更不会影响计算机信息系统的正常运行.不得将代码用于非法用途,如侵立删! ## JavaScript 权威指南-学 ...

  6. ArcGIS API for JavaScript 4.2学习笔记[1] 显示地图

    ArcGIS API for JavaScript 4.2直接从官网的Sample中学习,API Reference也是从官网翻译理解过来,鉴于网上截稿前还没有人发布过4.2的学习笔记,我就试试吧. ...

  7. JavaScript权威设计--JavaScript函数(简要学习笔记十一)

    1.函数调用的四种方式 第三种:构造函数调用 如果构造函数调用在圆括号内包含一组实参列表,先计算这些实参表达式,然后传入函数内.这和函数调用和方法调用是一致的.但如果构造函数没有形参,JavaScri ...

  8. JavaScript权威设计--JavaScript函数(简要学习笔记十)

    1.函数命名规范 函数命名通常以动词为前缀的词组.通常第一个字符小写.当包含多个单词时,一种约定是将单词以下划线分割,就像"like_Zqz()". 还有一种就是"lik ...

  9. 《你不知道的 JavaScript 上卷》 学习笔记

    第一部分: 作用域和闭包 一.作用域 1. 作用域:存储变量并且查找变量的规则 2. 源代码在执行之前(编译)会经历三个步骤: 分词/此法分析:将代码字符串分解成有意义的代码块(词法单元) 解析/语法 ...

随机推荐

  1. Python蜕变-2017-4-23

    我的第一篇博客,这是试水练习.这次上的菜是Haporxy配置文件操作. <1> 上需求: 具体配置文件如下: global log 127.0.0.1 local2 daemon maxc ...

  2. Spring源码情操陶冶-AbstractApplicationContext#finishRefresh

    承接前文Spring源码情操陶冶-AbstractApplicationContext#finishBeanFactoryInitialization 约定web.xml配置的contextClass ...

  3. CubieBoard开发板数据源介绍

    1: Linaro/Ubuntu Linaro is a not-for-profit engineering organization consolidating and optimizing op ...

  4. 13 年的 Bug 调试经验总结（来自蜗牛学院）

    在<Learning From Your Bugs>一文中,我写了关于我是如何追踪我所遇到的一些最有趣的bug. 最近,我回顾了我所有的194个条目,看看有什么经验教训是我可以学习的.下面 ...

  5. css简单实现五角星评分、点赞收藏、展示评分（半颗星、1/3颗星）

    1.前言 之前做的好几个项目中,都会遇到打分,评分,点赞这样的需求,写了很多次,每次需要再写的时候,就会翻出之前写过的代码,然后copy过来.总觉得这样的话没有进步,没有把知识放进脑袋里,所以,自己花 ...

  6. CentOS下安装Nginx服务器

    一.nginx安装环境 nginx是C语言开发,建议在linux上运行,本教程使用Centos7作为安装环境. 1.1  gcc 安装nginx需要先将官网下载的源码进行编译,编译依赖gcc环境,如果 ...

  7. 12. leetcode 455.Assign Cookies

    Assume you are an awesome parent and want to give your children some cookies. But, you should give e ...

  8. 《奇思妙想》在JavaScript语言中floor和round方法在某种随机分配场景下对分配区间的公平性！！！

    前言 大欢哥的题目完成了,但是衍生出一个新的问题!上篇随笔中我和大欢哥采用的随机数生成方式,到底是谁的比较公平??? 正文 欢迎来到阿段博客<奇思妙想>!我们的口号是 “心有多大,bug就 ...

  9. CocoaPods的一些略为高级一丁点的使用【转】

    记得我刚开始做iOS开发的时候,是没有项目依赖管理工具.当需要引入第三方库的时候是相当麻烦的,不是直接拷贝库近来,就是添加依赖工程,直到CocoaPods出来才改变这个状况.项目依赖管理不是Cocoa ...

  10. nopcommerce数据库字典

    http://www.xcode.me/open/document/nopcommercedatadict.html