Skip to content

Commit e3f75c3

Browse files
soyainesoyaine
committed
complete challenge 03 and guide of it
1 parent 2ee3849 commit e3f75c3

5 files changed

Lines changed: 487 additions & 0 deletions

File tree

‎01 - JavaScript Drum Kit/index-draft.html‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>JS Drum Kit</title>
6+
<link rel="stylesheet" href="style.css">
7+
</head>
8+
<body>
9+
10+
11+
<div class="keys">
12+
<div data-key="65" class="key">
13+
<kbd>A</kbd>
14+
<span class="sound">clap</span>
15+
</div>
16+
<div data-key="83" class="key">
17+
<kbd>S</kbd>
18+
<span class="sound">hihat</span>
19+
</div>
20+
<div data-key="68" class="key">
21+
<kbd>D</kbd>
22+
<span class="sound">kick</span>
23+
</div>
24+
<div data-key="70" class="key">
25+
<kbd>F</kbd>
26+
<span class="sound">openhat</span>
27+
</div>
28+
<div data-key="71" class="key">
29+
<kbd>G</kbd>
30+
<span class="sound">boom</span>
31+
</div>
32+
<div data-key="72" class="key">
33+
<kbd>H</kbd>
34+
<span class="sound">ride</span>
35+
</div>
36+
<div data-key="74" class="key">
37+
<kbd>J</kbd>
38+
<span class="sound">snare</span>
39+
</div>
40+
<div data-key="75" class="key">
41+
<kbd>K</kbd>
42+
<span class="sound">tom</span>
43+
</div>
44+
<div data-key="76" class="key">
45+
<kbd>L</kbd>
46+
<span class="sound">tink</span>
47+
</div>
48+
</div>
49+
50+
<audio data-key="65" src="sounds/clap.wav"></audio>
51+
<audio data-key="83" src="sounds/hihat.wav"></audio>
52+
<audio data-key="68" src="sounds/kick.wav"></audio>
53+
<audio data-key="70" src="sounds/openhat.wav"></audio>
54+
<audio data-key="71" src="sounds/boom.wav"></audio>
55+
<audio data-key="72" src="sounds/ride.wav"></audio>
56+
<audio data-key="74" src="sounds/snare.wav"></audio>
57+
<audio data-key="75" src="sounds/tom.wav"></audio>
58+
<audio data-key="76" src="sounds/tink.wav"></audio>
59+
60+
<script>
61+
function playAudio(e) {
62+
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
63+
const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
64+
65+
if(!audio) return;
66+
audio.currentTime = 0;
67+
audio.play();
68+
key.classList.add('playing');
69+
}
70+
71+
function removeTransition(e) {
72+
if(e.propertyName != 'border-left-color') return;
73+
this.classList.remove('playing');
74+
}
75+
76+
const keys = document.querySelectorAll('.key');
77+
keys.forEach(key => key.addEventListener('transitionend', removeTransition));
78+
window.addEventListener('keydown', playAudio);
79+
</script>
80+
81+
<script type="text/javascript">
82+
'use strict';
83+
84+
function playSound(event){
85+
const keyCode = event.key;
86+
87+
if ( keyCode === '76') {
88+
alert("76");
89+
} else {
90+
alert("false");
91+
}
92+
}
93+
94+
window.addEventListener("keydown", function(e){
95+
const audio = document.querySelector(`audio[data-key="${ e.keyCode }"]`);
96+
const key = document.querySelector(`div[data-key="${ e.keyCode }"]`);
97+
// console.log(video);
98+
// console.log(key);
99+
if(!audio) return;
100+
audio.currentTime = 0;
101+
audio.play();
102+
key.classList.add("playing");
103+
// key.classList.remove("playing");
104+
}, false);
105+
106+
function removeTransition(e){
107+
// if(e.propertyName !== "border-left-color") return;
108+
console.log(e.propertyName);
109+
// e.target.classList.remove("playing");
110+
}
111+
112+
const keys = document.querySelectorAll('.key');
113+
keys.forEach( keyin => keyin.addEventListener('transitionend', removeTransition));
114+
115+
116+
</script>
117+
118+
</body>
119+
</html>

‎03 - CSS Variables/README.md‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
# 03 CSS Variable
2+
3+
## 实现效果
4+
5+
![实现 by Soyaine](https://cl.ly/2Z1x1N0M2u2D/Screen%20recording%202016-12-22%20at%2002.03.35%20PM.gif)
6+
7+
用 JavaScript 和 CSS3 实现拖动滑块时，实时调整图片的内边距、模糊度、背景颜色，同时标题中 JS 两字的颜色也随图片背景颜色而变化。
8+
9+
## 涉及特性
10+
11+
- [`:root`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:root)
12+
- `var(--xxx)`：CSS 变量（[CSS Variables](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_variables)）
13+
- `filter: blur()`
14+
- 事件 `change`、`mousemove`
15+
16+
## 过程指南
17+
18+
### CSS 部分准备
19+
20+
1. 声明全局（`:root`）的 CSS 变量
21+
2. 将变量应用到页面中对应元素 `<img>`
22+
3. 处理标题的 CSS 值
23+
24+
### JS 实时更新 CSS 值
25+
1. 获取页面中 `input` 元素
26+
2. 给每个 `input` 添加监听事件，使其在值变动，触发更新操作
27+
3. 同 2 ，添加鼠标滑过是的事件监听
28+
4. 编写处理更新操作的方法
29+
1. 获取参数值后缀
30+
- 获取参数名（blur、spacing、color）
31+
- 获取参数值（12px、#efefef）
32+
- 赋值给对应的 CSS 变量
33+
34+
## 基础知识
35+
36+
1. NodeList 和 Array 的区别
37+
可以打开 __proto__ 查看它的方法，其中有 `forEach()`、`item()`、`keys()` 等。而 Array 的 prototype 中有 `map()`、`pop()` 等数组才有的方法。
38+
39+
3. HTML5 中的自定义数据属性 `dataset`
40+
HTML5 中可以为元素添加非标准的自定义属性，只需要加上 `data-` 前缀，可以随便添加和命名。添加之后，可以通过元素的 `dataset` 属性来访问这些值，`dataset` 的值是 DOMStringMap 的一个实例化对象，其中包含之前所设定的自定义属性的“名-值”对。
41+
42+
4. [CSS variable](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_variables)
43+
这是一个 CSS3 的新特性，[IE 和 Edge 目前都还不支持](http://caniuse.com/#feat=css-variables)。命名写法是 `--变量名`，在引用这个变量时写法是 `var(--变量名)`。具体实例见下一条代码。
44+
45+
5. `:root` 伪类
46+
这个伪元素匹配的是文档的根元素，也就是 `<html>` 标签。
47+
48+
所以常用于声明全局的 CSS 变量：
49+
50+
```css
51+
:root {
52+
--base: #ffc600;
53+
--blur: 10px;
54+
--padding: 10px;
55+
}
56+
```
57+
58+
在使用时：
59+
60+
```css
61+
img {
62+
padding: var(--spacing);
63+
background: var(--base);
64+
filter: blur(var(--blur));
65+
}
66+
```
67+
5. CSS 滤镜 [filter](https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter)
68+
CSS 的滤镜提供了一些图形特效，比如高斯模糊、锐化、变色等。它带有一些预设的函数，在使用时加上参数调用这些函数即可。[在 Chrome、Firefox 中都支持。](http://caniuse.com/#search=filter)
69+
70+
## 解决难点
71+
72+
1. **如何处理参数值（一个有 px 、另一个没有）**
73+
运用 `dataset` 储存后缀，有 px 后缀的标签中设置 `<input data-sizing: px>`：
74+
75+
```html
76+
<input type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
77+
<input type="color" name="base" value="#8aa8af">
78+
```
79+
80+
JS 中通过 `dataset.sizing` 来获取后缀值：
81+
82+
```javascript
83+
const suffix = this.dataset.sizing || '';
84+
```
85+
86+
此时 `suffix` 获取到的值，针对颜色为空，而针对长度类的则为 'px'。
87+
88+
2. **如何用 JavaScript 改变 CSS 属性值？**
89+
在 JavaScript 中 `document.documentElement` 即代表文档根元素。所以要改变全局的 CSS 变量，可以这样写：
90+
91+
```js
92+
document.documentElement.style.setProperty('--base', '#fff');
93+
```
94+
95+
96+
97+
98+
99+
100+
101+
102+
103+
104+
105+
106+

‎03 - CSS Variables/index-FINISHED.html‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Scoped CSS Variables and JS</title>
6+
</head>
7+
<body>
8+
<h2>Update CSS Variables with <span class='hl'>JS</span></h2>
9+
10+
<div class="controls">
11+
<label for="spacing">Spacing:</label>
12+
<input type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
13+
14+
<label for="blur">Blur:</label>
15+
<input type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
16+
17+
<label for="base">Base Color</label>
18+
<input type="color" name="base" value="#ffc600">
19+
</div>
20+
21+
<img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
22+
23+
<style>
24+
:root {
25+
--base: #ffc600;
26+
--spacing: 10px;
27+
--blur: 10px;
28+
}
29+
30+
img {
31+
padding: var(--spacing);
32+
background: var(--base);
33+
filter: blur(var(--blur));
34+
}
35+
36+
.hl {
37+
color: var(--base);
38+
}
39+
40+
/*
41+
misc styles, nothing to do with CSS variables
42+
*/
43+
44+
body {
45+
text-align: center;
46+
}
47+
48+
body {
49+
background: #193549;
50+
color: white;
51+
font-family: 'helvetica neue', sans-serif;
52+
font-weight: 100;
53+
font-size: 50px;
54+
}
55+
56+
.controls {
57+
margin-bottom: 50px;
58+
}
59+
60+
input {
61+
width:100px;
62+
}
63+
</style>
64+
65+
<script>
66+
const inputs = document.querySelectorAll('.controls input');
67+
68+
function handleUpdate() {
69+
const suffix = this.dataset.sizing || '';
70+
document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
71+
}
72+
73+
inputs.forEach(input => input.addEventListener('change', handleUpdate));
74+
inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
75+
</script>
76+
77+
78+
</body>
79+
</html>

0 commit comments

Comments
 (0)