学习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. ionic2+Angular 使用ng2-file-upload 插件上传图片并实现本地预览

    第一步:npm install ng2-file-upload --save 安装 ng2-file-upload 第二步:在需要使用该插件的页面的对应module文件的imports中引入Commo ...

  2. asm添加删除磁盘

    一. ASM_POWER_LIMIT 参数 这个参数 ASM_POWER_LIMIT 参数控制 ASM 后台进程 ARBx 的数量.ARBx 进程用来进行 ASM 磁盘数据重新分布打散.ASM_POW ...

  3. 灵玖软件NLPIRParser智能文本聚类

    随着互联网的迅猛发展,信息的爆炸式增加,信息超载问题变的越来越严重,信息的更新率也越来越高,用户在信息海洋里查找信息就像大海捞针一样.搜索引擎服务应运而生,在一定程度上满足了用户查找信息的需要.然而互 ...

  4. Python3常用网络编程模块介绍

    一.socket模块 网络服务都是建立在socket基础之上的,socket是网络连接端点,是网络的基础:每个socket都被绑定到指定的IP和端口上: 1.首先使用socket(family=AF_ ...

  5. cacti监控部署与配置

    cacti是一套基于PHP,mysql,SNMP及RRDTool开发的网络流量测试图形分析工具 cacti是通过snmpget来获取数据,使用RRDtool绘画图形 ,而且完全可以不需要了解RRDto ...

  6. js判断移动终端（手机浏览器）

    方法1: <script type="text/javascript">         var browser = {             versions: f ...

  7. 多系统重装其中Win7后的启动引导列表恢复

    重装Win7后会导致原grub引导被覆盖,要修复grub需要一张Ubuntu的LiveCD(安装光盘),用LiveCD启动电脑,进入Try Ubuntu(试用Ubuntu),进入之后打开终端,做如下几 ...

  8. ASP.NET MVC5+EF6+EasyUI 后台管理系统（999）-如何使用这个系统来开发?

    前言 这篇文本讲述了这个框架的使用方式,及一些疑问的答疑,更加精准的使用这个框架来建立功能 经过几个版本的迭代,系统使用更加方便,代码更加简洁也更加的智能,所以之前61节的文章也需要重新编排 对项目的 ...

  9. .NET Exceptionless 日志收集框架本地环境搭建

    一.简介 Exceptionless 是一个开源的实时的日志收集框架,它可以应用在基于 ASP.NET,ASP.NET Core,Web Api,Web Forms,WPF,Console,MVC 等 ...

  10. 二分图最大匹配：匈牙利算法的python实现

    二分图匹配是很常见的算法问题,一般用匈牙利算法解决二分图最大匹配问题,但是目前网上绝大多数都是C/C++实现版本,没有python版本,于是就用python实现了一下深度优先的匈牙利算法,本文使用的是 ...