# JavaScript30

**Repository Path**: lg8294/JavaScript30

## Basic Information

- **Project Name**: JavaScript30
- **Description**: 每天一个JavaScript项目挑战，30天玩转JavaScript
- **Primary Language**: HTML
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2020-03-02
- **Last Updated**: 2025-02-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# JavaScript30
每天一个JavaScript项目挑战，30天玩转JavaScript

# JavaScript30 - 一个月纯 JS 挑战

## JavaScript30 是什么？

JavaScirpt30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。

## 如何参加挑战

- [JavaScript30 官网](https://javascript30.com)：进入官网注册后可以观看和下载所有教程视频。Wes Bos 还把视频传到了百度云，进入官网直接拉到页面底部就能找到链接。

## [目录](http://lg8294.github.io/JavaScript30/index.html)

1. [x] [JavaScript Drum Kit  指南]() |  [纯 JS 模拟敲鼓效果在线示例](http://lg8294.github.io/JavaScript30/Day01%20-%20JavaScript%20Drum%20Kit)
2. [x] [JS + CSS Clock 指南]() |  [纯 JavaScript+CSS 时钟在线示例](http://lg8294.github.io/JavaScript30/Day02%20-%20JavaScript%20+%20CSS%20Clock)
3. [x] [CSS Variables 指南]() |  [用 CSS 变量实现拖动控制参数在线效果](http://lg8294.github.io/JavaScript30/Day03%20-%20CSS%20Variables)
4. [x] [Array Cardio 1 指南]() | [数组基本操作方法示例一](http://lg8294.github.io/JavaScript30/Day04%20-%20Array%20Cardio%201)
5. [x] [Flex Panel Gallery 指南]() | [可伸缩的图片墙在线效果](http://lg8294.github.io/JavaScript30/Day05%20-%20Flex%20Panel%20Gallery)
6. [x] [Type Ahead 指南]() |  [根据关键词快速匹配诗句在线效果](http://lg8294.github.io/JavaScript30/Day06%20-%20Type%20Ahead)
7. [x] [Array Cardio, Day 2 指南]() | [数组基本操作方法示例二](http://lg8294.github.io/JavaScript30/Day07%20-%20Array%20Cardio%202)
8. [x] [Fun with HTML5 Canvas 指南]() | [彩虹画笔绘画板在线效果](http://lg8294.github.io/JavaScript30/Day08%20-%20Fun%20with%20HTML5%20Canvas)
9. [x] [Dev Tools Domination 指南]() | [Console 调试技巧在线示例](http://lg8294.github.io/JavaScript30/Day09%20-%20Console%20Tricks)
10. [x] [Hold Shift to Check Multiple Checkboxes 指南]() | [Shift 批量选中在线效果](http://lg8294.github.io/JavaScript30/Day10%20-%20Hold%20Shift%20to%20Check%20Multiple%20Checkboxes)
11. [x] [Custom Video Player 指南]() | [自定义视频播放器在线示例](http://lg8294.github.io/JavaScript30/Day11%20-%20Custom%20Video%20Player)
12. [x] [Key Sequence Detection 指南]() | [关键字匹配插入图片在线示例](http://lg8294.github.io/JavaScript30/Day12%20-%20Key%20Sequence%20Detection)
13. [x] [Slide in on Scroll 指南]() | [图片随屏幕滚动而滑入滑出的在线效果](http://lg8294.github.io/JavaScript30/Day13%20-%20Slide%20in%20on%20Scrolll)
14. [x] [JavaScript References VS Copying 指南]() | [JS 引用和拷贝在线示例](http://lg8294.github.io/JavaScript30/Day14%20-%20JavaScript%20References%20VS%20Copying)
15. [x] [LocalStorage 指南]() | [Todo 本地存储在线示例](http://lg8294.github.io/JavaScript30/Day15%20-%20LocalStorage)
16. [x] [Mouse Move Shadow 指南]() | [鼠标移动让文字出现🌈效果在线示例](http://lg8294.github.io/JavaScript30/Day16%20-%20Mouse%20Move%20Shadow)
17. [x] Sort Without Articles | [数组排序在线示例](http://lg8294.github.io/JavaScript30/Day17%20-%20Sort%20Without%20Articles)
18. [x] Adding Up Times with Reduce | [Reduce、Map混合使用计算时分秒在线示例](http://lg8294.github.io/JavaScript30/Day18%20-%20Adding%20Up%20Times%20with%20Reduce)
19. [ ] Webcam Fun | [](http://lg8294.github.io/JavaScript30//index.html)
20. [ ] Speech Detection | [](http://lg8294.github.io/JavaScript30//index.html)
21. [ ] Geolocation | [](http://lg8294.github.io/JavaScript30//index.html)
22. [ ] Follow Along Link Highlighter | [](http://lg8294.github.io/JavaScript30//index.html)
23. [ ] Speech Synthesis | [](http://lg8294.github.io/JavaScript30//index.html)
24. [ ] Sticky Nav | [](http://lg8294.github.io/JavaScript30//index.html)
25. [ ] Event Capture, Propagation, Bubbling, and Once | [](http://lg8294.github.io/JavaScript30//index.html)
26. [ ] Stripe Follow Along Nav | [](http://lg8294.github.io/JavaScript30//index.html)
27. [ ] Click and Drag | [](http://lg8294.github.io/JavaScript30//index.html)
28. [ ] Video Speed Controller | [](http://lg8294.github.io/JavaScript30//index.html)
29. [ ] Countdown Timer | [](http://lg8294.github.io/JavaScript30//index.html)
30. [ ] Whack A Mole | [](http://lg8294.github.io/JavaScript30//index.html)

参加挑战并不需要你缴纳费用或是加入什么组织，也不会有人催着你去做什么，你只需要打开电脑，然后开始思考、敲击键盘。相信内在动机的力量，我在这里给出了一些建议和心得，最适合你的方法还需要你自己去摸索。