https://github.com/liyuechun/javascript30-liyuechun

每天一个JavaScript项目挑战，30天玩转JavaScript,免费视频：http://www.kongyixueyuan.com
https://github.com/liyuechun/javascript30-liyuechun

javascript

Last synced: 8 months ago
JSON representation

每天一个JavaScript项目挑战，30天玩转JavaScript,免费视频：http://www.kongyixueyuan.com

• Host: GitHub
• URL: https://github.com/liyuechun/javascript30-liyuechun
• Owner: liyuechun
• Created: 2017-07-17T12:44:15.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2018-08-08T02:08:28.000Z (over 7 years ago)
• Last Synced: 2025-05-19T21:04:29.425Z (11 months ago)
• Topics: javascript
• Language: HTML
• Homepage: http://www.kongyixueyuan.com
• Size: 38.9 MB
• Stars: 337
• Watchers: 18
• Forks: 139
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# JavaScript 30天每日效果图

在Github上看到了[wesbos](https://twitter.com/wesbos)的一个Javascript30天挑战的[repo](https://github.com/wesbos/JavaScript30)，旨在使用纯JS来进行练习，不允许使用任何其他的库和框架，该挑战共30天，我会在这里复现这30天遇到的挑战与问题，将其教程化、视频化分享给大家。

[在线查看JS30所有项目效果图](http://30daysofjs.michaeleinsohn.com/)

## Day01 - JavaScript Drum Kit

![](http://oslwafb71.bkt.clouddn.com/small0.jpg)

## Day02 - JS and CSS Clock

![](http://oslwafb71.bkt.clouddn.com/small1.jpg)

## Day03 - CSS Variables

![](http://oslwafb71.bkt.clouddn.com/small2.jpg)

## Day04 - Array Cardio Day 1

![](http://oslwafb71.bkt.clouddn.com/small3.jpg)

## Day05 - Flex Panel Gallery

![](http://oslwafb71.bkt.clouddn.com/small4.jpg)

## Day06 - Type Ahead

![](http://oslwafb71.bkt.clouddn.com/small5.jpg)

## Day07 - Array Cardio Day 2

![](http://oslwafb71.bkt.clouddn.com/small6.jpg)

## Day08 - Fun with HTML5 Canvas

![](http://oslwafb71.bkt.clouddn.com/small7.jpg)

## Day09 - Dev Tools Domination

![](http://oslwafb71.bkt.clouddn.com/small8.jpg)

## Day10 - Hold Shift and Check Checkboxes

![](http://oslwafb71.bkt.clouddn.com/small9.jpg)

## Day11 - Custom Video Player

![](http://oslwafb71.bkt.clouddn.com/small10.jpg)

## Day12 - Key Sequence Detection

![](http://oslwafb71.bkt.clouddn.com/small11.jpg)

## Day13 - Slide in on Scroll

![](http://oslwafb71.bkt.clouddn.com/small12.jpg)

## Day14 - JavaScript References VS Copying

![](http://oslwafb71.bkt.clouddn.com/small13.jpg)

## Day15 - LocalStorage

![](http://oslwafb71.bkt.clouddn.com/small14.jpg)

## Day16 - Mouse Move Shadow

![](http://oslwafb71.bkt.clouddn.com/small15.jpg)

## Day17 - Sort Without Articles

![](http://oslwafb71.bkt.clouddn.com/small16.jpg)

## Day18 - Adding Up Times with Reduce

![](http://oslwafb71.bkt.clouddn.com/small17.jpg)

## Day19 - Webcam Fun

![](http://oslwafb71.bkt.clouddn.com/small18.jpg)

## Day20 - Speech Detection

![](http://oslwafb71.bkt.clouddn.com/small19.jpg)

## Day21 - Geolocation

![](http://oslwafb71.bkt.clouddn.com/small20.jpg)

## Day22 - Follow Along Link Highlighter

![](http://oslwafb71.bkt.clouddn.com/small21.jpg)

## Day23 - Speech Synthesis

![](http://oslwafb71.bkt.clouddn.com/small22.jpg)

## Day24 - Sticky Nav

![](http://oslwafb71.bkt.clouddn.com/small23.jpg)

## Day25 - Event Capture, Propagation, Bubbling and Once

![](http://oslwafb71.bkt.clouddn.com/small24.jpg)

## Day26 - Stripe Follow Along Nav

![](http://oslwafb71.bkt.clouddn.com/small25.jpg)

## Day27 - Click and Drag

![](http://oslwafb71.bkt.clouddn.com/small26.jpg)

## Day28 - Video Speed Controller

![](http://oslwafb71.bkt.clouddn.com/small27.jpg)

## Day29 - Countdown Timer

![](http://oslwafb71.bkt.clouddn.com/small28.jpg)

## Day30 - Whack A Mole

![](http://oslwafb71.bkt.clouddn.com/small29.jpg)

## 加入我们，一起挑战吧

>社群品牌：[从零到壹全栈部落](http://www.kongyixueyuan.com)

>

>定位：寻找共好，共同学习，持续输出全栈技术社群

>

>业界荣誉：IT界的逻辑思维

>

>文化：输出是最好的学习方式

>

>官方公众号：全栈部落

>

>社群发起人：[春哥(从零到壹创始人，交流微信：liyc1215)](http://weibo.com/mobiledevelopment)

>

>技术交流社区：[全栈部落BBS](http://bbs.kongyixueyuan.com)

>

>全栈部落完整系列教程：[全栈部落完整电子书学习笔记](http://fullstack.kongyixueyuan.com)

|关注全栈部落官方公众号，每晚十点接收系列原创技术推送|

|:---------:|

|![](http://orhm8wuhd.bkt.clouddn.com/quanzhanbuluo.png)|