@@ -38,38 +38,38 @@ JavaScirpt30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30
3838
3939## 目录
4040
41- No. | Guide | Demo
41+ No | Guide | Demo
4242--- | --- | ---
43- 1 . | [ JavaScript Drum Kit 指南] ( https://github.com/soyaine/JavaScript30/tree/master/01%20-%20JavaScript%20Drum%20Kit ) | [ 纯 JS 模拟敲鼓效果] ( http://soyaine.github.io/JavaScript30/01%20-%20JavaScript%20Drum%20Kit/index-SOYAINE.html )
44- 2 . | [ JS + CSS Clock 指南] ( https://github.com/soyaine/JavaScript30/tree/master/02%20-%20JS%20%2B%20CSS%20Clock ) | [ 纯 JavaScript+CSS 时钟效果] ( http://soyaine.github.io/JavaScript30/02%20-%20JS%20%2B%20CSS%20Clock/index-SOYAINE.html )
45- 3 . | [ CSS Variables 指南] ( https://github.com/soyaine/JavaScript30/tree/master/03%20-%20CSS%20%Variables ) | [ 用 CSS 变量实现拖动控制参数效果] ( http://soyaine.github.io/JavaScript30/03%20-%20CSS%20Variables/index-SOYAINE.html )
46- 4 . | [ Array Cardio, Day 1 指南] ( https://github.com/soyaine/JavaScript30/tree/master/04%20-%20Array%20Cardio%20Day%201 ) | [ 数组基本操作方法示例一] ( http://soyaine.github.io/JavaScript30/04%20-%20Array%20Cardio%20Day%201/index-SOYAINE.html )
47- 5 . | [ Flex Panel Gallery 指南] ( https://github.com/soyaine/JavaScript30/blob/master/05%20-%20Flex%20Panel%20Gallery/README.md ) | [ 可伸缩的图片墙在线效果] ( https://soyaine.github.io/JavaScript30/05%20-%20Flex%20Panel%20Gallery/index-SOYAINE2.html )
48- 6 . | [ Type Ahead 指南] ( https://github.com/soyaine/JavaScript30/blob/master/06%20-%20Type%20Ahead/README.md ) | [ 根据关键词快速匹配诗句在线效果] ( https://soyaine.github.io/JavaScript30/06%20-%20Type%20Ahead/index-SOYAINE.html )
49- 7 . | [ Array Cardio, Day 2 指南] ( https://github.com/soyaine/JavaScript30/tree/master/07%20-%20Array%20Cardio%20Day%202 ) | [ 数组基本操作方法示例二] ( http://soyaine.github.io/JavaScript30/07%20-%20Array%20Cardio%20Day%202/index-SOYAINE.html )
50- 8 . | [ Fun with HTML5 Canvas 指南] ( https://github.com/soyaine/JavaScript30/tree/master/08%20-%20Fun%20with%20HTML5%20Canvas ) | [ 彩虹画笔绘画板在线效果] ( https://soyaine.github.io/JavaScript30/08%20-%20Fun%20with%20HTML5%20Canvas/index-SOYAINE.html )
51- 9 . | [ Dev Tools Domination 指南] ( https://github.com/soyaine/JavaScript30/blob/master/09%20-%20Dev%20Tools%20Domination/README.md ) | [ Console 调试技巧在线示例] ( https://soyaine.github.io/JavaScript30/09%20-%20Dev%20Tools%20Domination/index-SOYAINE.html )
52- 10 . | [ Hold Shift and Check Checkboxes 指南] ( https://github.com/soyaine/JavaScript30/blob/master/10%20-%20Hold%20Shift%20and%20Check%20Checkboxes/README.md ) | [ Shift 批量选中在线效果] ( https://soyaine.github.io/JavaScript30/10%20-%20Hold%20Shift%20and%20Check%20Checkboxes/index-SOYAINE.html )
53- 11 . | [ Custom Video Player 指南] ( https://github.com/soyaine/JavaScript30/blob/master/11%20-%20Custom%20Video%20Player/README.md ) |
54- 12 . | [ Key Sequence Detection 指南] ( https://github.com/soyaine/JavaScript30/tree/master/12%20-%20Key%20Sequence%20Detection/README.md ) | [ 在线效果] ( http://soyaine.cn/JavaScript30/12%20-%20Key%20Sequence%20Detection/index-FINISHED.html )
55- 13 . | [ Slide in on Scroll 指南] ( https://github.com/soyaine/JavaScript30/blob/master/13%20-%20Slide%20in%20on%20Scroll/README.md ) | [ 图片随屏幕滚动而滑入滑出的在线效果] ( http://soyaine.cn/JavaScript30/13%20-%20Slide%20in%20on%20Scroll/index-SOYAINE.html )
56- 14 . | [ JavaScript References vs. Copying 指南] ( https://github.com/soyaine/JavaScript30/tree/master/14%20-%20JavaScript%20References%20VS%20Copying ) |
57- 15 . | LocalStorage |
58- 16 . | Mouse Move Shadow |
59- 17 . | Sort Without Articles |
60- 18 . | Adding Up Times with Reduce |
61- 19 . | Webcam Fun |
62- 20 . | Speech Detection |
63- 21 . | Geolocation |
64- 22 . | Follow Along Link Highlighter |
65- 23 . | Speech Synthesis |
66- 24 . | Sticky Nav |
67- 25 . | Event Capture, Propagation, Bubbling, and Once |
68- 26 . | Stripe Follow Along Nav |
69- 27 . | Click and Drag |
70- 28 . | Video Speed Controller |
71- 29 . | Countdown Timer |
72- 30 . | Whack A Mole |
43+ 1 | [ JavaScript Drum Kit 指南] ( https://github.com/soyaine/JavaScript30/tree/master/01%20-%20JavaScript%20Drum%20Kit ) | [ 纯 JS 模拟敲鼓效果] ( http://soyaine.github.io/JavaScript30/01%20-%20JavaScript%20Drum%20Kit/index-SOYAINE.html )
44+ 2 | [ JS + CSS Clock 指南] ( https://github.com/soyaine/JavaScript30/tree/master/02%20-%20JS%20%2B%20CSS%20Clock ) | [ 纯 JavaScript+CSS 时钟效果] ( http://soyaine.github.io/JavaScript30/02%20-%20JS%20%2B%20CSS%20Clock/index-SOYAINE.html )
45+ 3 | [ CSS Variables 指南] ( https://github.com/soyaine/JavaScript30/tree/master/03%20-%20CSS%20%Variables ) | [ 用 CSS 变量实现拖动控制参数效果] ( http://soyaine.github.io/JavaScript30/03%20-%20CSS%20Variables/index-SOYAINE.html )
46+ 4 | [ Array Cardio, Day 1 指南] ( https://github.com/soyaine/JavaScript30/tree/master/04%20-%20Array%20Cardio%20Day%201 ) | [ 数组基本操作方法示例一] ( http://soyaine.github.io/JavaScript30/04%20-%20Array%20Cardio%20Day%201/index-SOYAINE.html )
47+ 5 | [ Flex Panel Gallery 指南] ( https://github.com/soyaine/JavaScript30/blob/master/05%20-%20Flex%20Panel%20Gallery/README.md ) | [ 可伸缩的图片墙在线效果] ( https://soyaine.github.io/JavaScript30/05%20-%20Flex%20Panel%20Gallery/index-SOYAINE2.html )
48+ 6 | [ Type Ahead 指南] ( https://github.com/soyaine/JavaScript30/blob/master/06%20-%20Type%20Ahead/README.md ) | [ 根据关键词快速匹配诗句在线效果] ( https://soyaine.github.io/JavaScript30/06%20-%20Type%20Ahead/index-SOYAINE.html )
49+ 7 | [ Array Cardio, Day 2 指南] ( https://github.com/soyaine/JavaScript30/tree/master/07%20-%20Array%20Cardio%20Day%202 ) | [ 数组基本操作方法示例二] ( http://soyaine.github.io/JavaScript30/07%20-%20Array%20Cardio%20Day%202/index-SOYAINE.html )
50+ 8 | [ Fun with HTML5 Canvas 指南] ( https://github.com/soyaine/JavaScript30/tree/master/08%20-%20Fun%20with%20HTML5%20Canvas ) | [ 彩虹画笔绘画板在线效果] ( https://soyaine.github.io/JavaScript30/08%20-%20Fun%20with%20HTML5%20Canvas/index-SOYAINE.html )
51+ 9 | [ Dev Tools Domination 指南] ( https://github.com/soyaine/JavaScript30/blob/master/09%20-%20Dev%20Tools%20Domination/README.md ) | [ Console 调试技巧在线示例] ( https://soyaine.github.io/JavaScript30/09%20-%20Dev%20Tools%20Domination/index-SOYAINE.html )
52+ 10 | [ Hold Shift and Check Checkboxes 指南] ( https://github.com/soyaine/JavaScript30/blob/master/10%20-%20Hold%20Shift%20and%20Check%20Checkboxes/README.md ) | [ Shift 批量选中在线效果] ( https://soyaine.github.io/JavaScript30/10%20-%20Hold%20Shift%20and%20Check%20Checkboxes/index-SOYAINE.html )
53+ 11 | [ Custom Video Player 指南] ( https://github.com/soyaine/JavaScript30/blob/master/11%20-%20Custom%20Video%20Player/README.md ) | -
54+ 12 | [ Key Sequence Detection 指南] ( https://github.com/soyaine/JavaScript30/tree/master/12%20-%20Key%20Sequence%20Detection/README.md ) | [ 在线效果] ( http://soyaine.cn/JavaScript30/12%20-%20Key%20Sequence%20Detection/index-FINISHED.html )
55+ 13 | [ Slide in on Scroll 指南] ( https://github.com/soyaine/JavaScript30/blob/master/13%20-%20Slide%20in%20on%20Scroll/README.md ) | [ 图片随屏幕滚动而滑入滑出的在线效果] ( http://soyaine.cn/JavaScript30/13%20-%20Slide%20in%20on%20Scroll/index-SOYAINE.html )
56+ 14 | [ JavaScript References vs. Copying 指南] ( https://github.com/soyaine/JavaScript30/tree/master/14%20-%20JavaScript%20References%20VS%20Copying ) | -
57+ 15 | LocalStorage | -
58+ 16 | Mouse Move Shadow | -
59+ 17 | Sort Without Articles | -
60+ 18 | Adding Up Times with Reduce | -
61+ 19 | Webcam Fun | -
62+ 20 | Speech Detection | -
63+ 21 | Geolocation | -
64+ 22 | Follow Along Link Highlighter | -
65+ 23 | Speech Synthesis | -
66+ 24 | Sticky Nav | -
67+ 25 | Event Capture, Propagation, Bubbling, and Once | -
68+ 26 | Stripe Follow Along Nav | -
69+ 27 | Click and Drag | -
70+ 28 | Video Speed Controller | -
71+ 29 | Countdown Timer | -
72+ 30 | Whack A Mole | -
7373
7474参加挑战并不需要你缴纳费用或是加入什么组织，也不会有人催着你去做什么，你只需要打开电脑，然后开始思考、敲击键盘。相信内在动机的力量，我在这里给出了一些建议和心得，最适合你的方法还需要你自己去摸索。
7575
0 commit comments