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;
}