Skip to content

Commit 507a1fa

Browse files
a90100a90100
committed
add day 11~19
1 parent eefa54e commit 507a1fa

File tree

26 files changed

+4611
-56
lines changed

26 files changed

+4611
-56
lines changed

‎11 - Custom Video Player/README.md

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# JS30-Day11-Custom HTML5 Video Player
2+
實作一個影片撥放器
3+
4+
## 重點整理
5+
### 1. 選取 HTML data 屬性
6+
在教學中看到用 querySelectorAll 選取標籤內的 data，以前不知道可以這樣選取，紀錄一下
7+
```javascript
8+
const skipButtons = player.querySelectorAll('[play-skip]');
9+
```
10+
11+
### 2. timeupdate 事件
12+
屬於 Audio/Video 的事件，這裡用來控制影片進度條
13+
14+
### 3. 小技巧
15+
為了讓滑鼠**實際有點擊**並拉動進度條時才會成功控制影片進度，所以使用 mouseClick 紀錄點擊狀態，當 mouseClick 為 true 時，才觸發後面 controlBar() 此函式
16+
```javascript
17+
progress.addEventListener('mousemove', (e) => mouseClick && controlBar(e));
18+
```

‎11 - Custom Video Player/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
</div>
2525
</div>
2626

27-
<script src="scripts.js"></script>
27+
<script src="scripts-Harry.js"></script>
2828
</body>
2929

3030
</html>

‎11 - Custom Video Player/scripts-FINISHED.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ function updateButton() {
2020
}
2121

2222
function skip() {
23-
video.currentTime += parseFloat(this.dataset.skip);
23+
video.currentTime += parseFloat(this.dataset.skip);
2424
}
2525

2626
function handleRangeUpdate() {

‎11 - Custom Video Player/scripts-Harry.js

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
const player = document.querySelector('.player'),
2+
video = player.querySelector('.viewer'),
3+
progress = player.querySelector('.progress'),
4+
progressBar = player.querySelector('.progress__filled'),
5+
toggle = player.querySelector('.toggle'),
6+
skipButtons = player.querySelectorAll('[data-skip]'),
7+
range = player.querySelectorAll('.player__slider');
8+
9+
let mouseClick = false;
10+
11+
function togglePlay(e) {
12+
const status = video.paused ? 'play' : 'pause';
13+
const icon = status === 'play' ? '❚ ❚' : '►';
14+
toggle.textContent = icon;
15+
video[status]();
16+
}
17+
18+
function skip() {
19+
video.currentTime += parseInt(this.dataset.skip);
20+
}
21+
22+
function changeRange(e) {
23+
video[e.target.name] = e.target.value;
24+
}
25+
26+
function fillBar() {
27+
const percent = (video.currentTime / video.duration) * 100;
28+
progressBar.style.flexBasis = `${percent}%`;
29+
}
30+
31+
function controlBar(e) {
32+
const time = (e.offsetX / this.offsetWidth) * video.duration;
33+
video.currentTime = time;
34+
}
35+
36+
video.addEventListener('click', togglePlay); // 控制撥放暫停
37+
video.addEventListener('timeupdate', fillBar); // 控制已撥放部分的樣式
38+
toggle.addEventListener('click', togglePlay);
39+
progress.addEventListener('click', controlBar); // 控制影片進度
40+
progress.addEventListener('mousemove', (e) => mouseClick && controlBar(e));
41+
progress.addEventListener('mousedown', () => mouseClick = true);
42+
progress.addEventListener('mouseup', () => mouseClick = false);
43+
skipButtons.forEach(btn => btn.addEventListener('click', skip)); // 控制影片前進/後退
44+
range.forEach(btn => btn.addEventListener('mousemove', changeRange)); // 控制音量/撥放速度

‎11 - Custom Video Player/style.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ body {
101101
width: 50%;
102102
background: #ffc600;
103103
flex: 0;
104-
flex-basis: 50%;
104+
flex-basis: 0%;
105105
}
106106

107107
/* unholy css to style input type="range" */

‎12 - Key Sequence Detection/README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# JS30-Day12-Key Sequence Detection
2+
監聽鍵盤按鈕的實作，如果你按下 wesbos 的字串，還會出現作者放的圖片XDD

‎12 - Key Sequence Detection/index-Harry.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,20 @@
99

1010
<body>
1111
<script>
12+
const pressed = [],
13+
secretCode = 'wesbos';
14+
15+
window.addEventListener('keyup', (e) => {
16+
console.log(e.key);
17+
pressed.push(e.key);
18+
// 第一個參數是負的話，從陣列後面開始數(-1 為陣列最後一個數)
19+
pressed.splice(-secretCode.length - 1, pressed.length - secretCode.length);
20+
console.log(pressed);
21+
if(pressed.join('').includes(secretCode)) {
22+
console.log('DING DING!');
23+
cornify_add();
24+
}
25+
})
1226
</script>
1327
</body>
1428

‎13 - Slide in on Scroll/README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# JS30-Day13-Slide In on Scroll
2+
一個當滾動視窗到特定點時滑入圖片的實作

‎13 - Slide in on Scroll/index-Harry.html

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -160,6 +160,26 @@ <h1>Slide in on Scroll</h1>
160160
if (callNow) func.apply(context, args);
161161
};
162162
}
163+
164+
const slideImgs = document.querySelectorAll('.slide-in');
165+
166+
function checkSlide(e) {
167+
slideImgs.forEach(img => {
168+
const scrollTopPos = (window.scrollY + window.innerHeight) - img.height / 2;
169+
const isUpperHalfImg = scrollTopPos > img.offsetTop;
170+
const imgBtm = img.offsetTop + img.height;
171+
const isLowerImg = imgBtm > window.scrollY;
172+
173+
if(isUpperHalfImg && isLowerImg) {
174+
img.classList.add('active');
175+
} else {
176+
img.classList.remove('active');
177+
}
178+
})
179+
180+
}
181+
182+
window.addEventListener('scroll', debounce(checkSlide));
163183
</script>
164184

165185
<style>
@@ -224,4 +244,4 @@ <h1>Slide in on Scroll</h1>
224244

225245
</body>
226246

227-
</html>
247+
</html>

‎14 - JavaScript References VS Copying/README.md

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
# JS30-Day14-Object and Arrays - Reference VS Copy
2+
探討如何複製不會傳同一個參考的陣列和物件
3+
4+
## 重點整理:
5+
### 1. 陣列的複製
6+
以下的這些方法只是淺複製而已，新陣列內的陣列被修改時，原陣列也會被修改
7+
```javascript
8+
const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];
9+
10+
// 方法1: 利用回傳新陣列的特性
11+
const team2 = players.slice();
12+
13+
// 方法2: 空陣列連接 players，也是出現新陣列
14+
const team3 = [].concat(players);
15+
16+
// 方法3:
17+
const team4 = [...players];
18+
19+
// 方法4: 利用回傳新陣列的特性
20+
const team5 = Array.from(players);
21+
```
22+
23+
### 2. 物件的複製
24+
以下的這些方法只是淺複製而已，新物件內的物件被修改時，原物件也會被修改
25+
```javascript
26+
const person = {
27+
name: 'Wes Bos',
28+
age: 80
29+
};
30+
31+
// 方法1: Object.assign 會複製第二個參數的物件到第一個參數去，第三個參數可為新物件增加屬性
32+
const person2 = Object.assign({}, person, {height: 172});
33+
34+
// 方法2:
35+
const person3 = {...person};
36+
37+
const wes = {
38+
name: 'Wes',
39+
age: 100,
40+
social: {
41+
twitter: '@wesbos',
42+
facebook: 'wesbos.developer'
43+
}
44+
};
45+
46+
// 要避免淺複製的話，可以使用下面的方式:
47+
const dev2 = JSON.parse(JSON.stringify(wes));
48+
```

0 commit comments

Comments
 (0)