JavaScript30 之01 – 架子鼓

JavaScript30是30天每天用原生JavaScript完成一个网页项目的挑战，附有免费的视频教程。（https://javascript30.com/ ）

无意间在网上看到，觉得很有趣，就开始了。在这里记录一下过程中涉及到的自己不熟悉的内容吧。

01 – JavaScript Drum Kit

HTML5中添加了data-*的方式来自定义属性，所谓data-*实际上上就是data-前缀加上自定义的属性名，使用这样的结构可以进行数据存放。使用data-*可以解决自定义属性混乱无管理的现状。element.dataset.*以获取该属性。

ES6新特性。模板字符串使用反引号 (` `) 来代替普通字符串中的用双引号和单引号。模板字符串可以包含特定语法（${expression}）的占位符。占位符中的表达式和周围的文本会一起传递给一个默认函数，该函数负责将所有的部分连接起来，如果一个模板字符串由表达式开头，则该字符串被称为带标签的模板字符串，该表达式通常是一个函数，它会在模板字符串处理后被调用，在输出最终结果前，你都可以通过该函数来对模板字符串进行操作处理。在模版字符串内使用反引号（`）时，需要在它前面加转义符（\）。
audio.play()
<kbd> 标签定义键盘文本。说到技术概念上的特殊样式时，就要提到 <kbd> 标签。正如你已经猜到的，它用来表示文本是从键盘上键入的。

CSS

CSS是题目给好的。因为CSS比较少写，就研读一下吧。

/*key的父节点*/
.keys {display: flex; /*表示它的子节点是flex布局*/flex: 1; /*flex属性是flex-grow, flex-shrink 和 flex-basis的简写。但是这个不是应该写在items上吗，为什么写在了容器上，不清楚是不是写错了。再研究一下。*/min-height: 100vh; /*视窗高度的百分比。视窗被均分为100单位的vh。视窗(Viewport)是你的浏览器实际显示内容的区域—，换句话说是你的不包括工具栏和按钮的网页浏览器。*/align-items: center; /*定义flex的盒子纵轴对齐的*/justify-content: center; /*定义flex的盒子横轴对齐的*/}

flex布局的相关属性见http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

.key {border: .4rem solid black; /*border-width border-style border-color*/border-radius: .5rem;margin: 1rem;font-size: 1.5rem;padding: 1rem .5rem;transition: all .07s ease; /* transition-property transition-duration transition-timing-function transition-delay */width: 10rem;text-align: center;color: white;background: rgba(0,0,0,0.4);text-shadow: 0 0 .5rem black;
}

.playing {transform: scale(1.1);border-color: #ffc600;box-shadow: 0 0 1rem #ffc600;
}
/* 当键盘被点击时，把对应的key加上playing这个类，就可以实现变化效果 */

.sound {font-size: 1.2rem;text-transform: uppercase; /*字面意思*/letter-spacing: .1rem; /*字面意思*/color: #ffc600;
}

JavaScript30 之01 – 架子鼓相关推荐

ios开发架子鼓功能开发_适用于iOS开发人员的功能标志
ios开发架子鼓功能开发 When building modern applications, things tend to move quite quickly. When you add mul ...
阿比路架子鼓音源合集 Native Instruments Abbey Road Drummer Collection
Native Instruments AbbeyRoad Drummer Collection | 43GB 精致录制的鼓声 6个时代的鼓声,仅需 ¥ 1,599.00 (正常价格 ¥4,794.00 ...
零起点学算法01——第一个程序Hello World！
零起点学算法01--第一个程序Hello World! Description 题目很简单输出"Hello World!"(不含引号),并换行. Input 没有输入 Outpu ...
hdu5296 01字典树
根据二进制建一棵01字典树,每个节点的答案等于左节点0的个数 * 右节点1的个数 * 2,遍历整棵树就能得到答案. AC代码: #include<cstdio> using namespa ...
20150411--Dede二次开发-01
20150411--Dede二次开发-01 目录一.目前市场流行的电子商城系统 1 二.ecshop的介绍 1 三.安装 2 四.echsop 的目录结构 5 五.分析ecshop里面程序的架构 5 ...
（九）单片机串行口内部结构的讲解 01
1. 基本概念常用于数据通信的传输方式有单工.半双工.全双工和多工方式. 单工方式:数据仅按一个固定方向传送.因而这种传输方式的用途有限,常用于串行口的打印数据传输与简单系统间的数据采集. 半双工方 ...
Python 学习笔记01
print:直接输出 type,求类型数据类型:字符串,整型,浮点型,Bool型 note01.py # python learning note 01 print('Hello world!') ...
ACM1881 01背包问题应用
01背包问题动态规划应用 acm1881毕业bg 将必须离开的时间限制看作背包容量,先将他们由小到大排序,然后在排完序的数组中对每个实例都从它的时间限制开始(背包容量)到它的延长时间进行遍历: 1 # ...
什么是壳 - 脱壳篇01
什么是壳 - 脱壳篇01 让编程改变世界 Change the world by program 壳在自然界中,植物用壳来保护种子,动物用壳来保护身体,我们人类没有壳,但我们有衣服,房子也起到了壳的 ...

JavaScript30 之01 – 架子鼓

CSS

JavaScript30 之01 – 架子鼓相关推荐

最新文章

热门文章