# 30days_javascript

**Repository Path**: firzhangyu/30days_javascript

## Basic Information

- **Project Name**: 30days_javascript
- **Description**: 30天javascript练习
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2024-04-28
- **Last Updated**: 2025-03-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

[纯CSS/CSS3制作的动画小demo](https://github.com/SUNNERCMS/CSS-CSS3-Animation-effects)  
# JavaScript 30天每日效果图  

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

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

## Day01 - JavaScript Drum Kit
![](http://oslwafb71.bkt.clouddn.com/small0.jpg)

## Day02 - JS and CSS Clock
![](https://github.com/SUNNERCMS/30daysJavascript/blob/master/02%20-%20JS%20and%20CSS%20Clock/image/GIF.gif)  

## Day03 - CSS Variables
![](https://github.com/SUNNERCMS/30daysJavascript/blob/master/03%20-%20CSS%20Variables/GIF.gif)

## Day04 - Array Cardio Day 1
![](http://oslwafb71.bkt.clouddn.com/small3.jpg)

## Day05 - Flex Panel Gallery
![](http://oslwafb71.bkt.clouddn.com/small4.jpg)

## Day06 - Quick match
![](https://github.com/SUNNERCMS/30daysJavascript/blob/master/06%20-%20Fetch%E3%80%81filter%E3%80%81%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F%E5%AE%9E%E7%8E%B0%E5%BF%AB%E9%80%9F%E5%8F%A4%E8%AF%97%E5%8C%B9%E9%85%8D/DemoGIF.gif)

## Day07 - Array Cardio Day 2
![](http://oslwafb71.bkt.clouddn.com/small6.jpg)

## Day08 - Fun with HTML5 Canvas
![](https://github.com/SUNNERCMS/30daysJavascript/blob/master/08%20-%20HTML5%20Canvas%20%E5%AE%9E%E7%8E%B0%E5%BD%A9%E8%99%B9%E7%94%BB%E7%AC%94%E7%BB%98%E7%94%BB%E6%9D%BF/GIF.gif)

## Day09 - Dev Tools Domination
![](http://oslwafb71.bkt.clouddn.com/small8.jpg)

## Day10 - Hold Shift and Check Checkboxes
![](https://github.com/SUNNERCMS/30daysJavascript/blob/master/10%20-%20JS%20%E5%AE%9E%E7%8E%B0%20Checkbox%20%E4%B8%AD%E6%8C%89%E4%BD%8F%20Shift%20%E7%9A%84%E5%A4%9A%E9%80%89%E5%8A%9F%E8%83%BD/GIF.gif)

## Day11 - Custom Video Player
![](https://github.com/SUNNERCMS/30daysJavascript/blob/master/11%20-%20%E8%87%AA%E5%AE%9A%E4%B9%89%E8%A7%86%E9%A2%91%E6%92%AD%E6%94%BE%E5%99%A8/GIF.gif)

## Day12 - Key Sequence Detection
![](https://github.com/SUNNERCMS/30daysJavascript/blob/master/12%20-%20%E9%94%AE%E7%9B%98%E8%BE%93%E5%85%A5%E5%BA%8F%E5%88%97%E7%9A%84%E9%AA%8C%E8%AF%81%E6%8C%87%E5%8D%97/GIF.gif)  

## Day13 - Slide in on Scroll
![](https://github.com/SUNNERCMS/30daysJavascript/blob/master/13%20-%20%E5%9B%BE%E7%89%87%E9%9A%8F%E5%B1%8F%E5%B9%95%E6%BB%9A%E5%8A%A8%E8%80%8C%E6%BB%91%E5%85%A5%E6%BB%91%E5%87%BA%E7%9A%84%E6%95%88%E6%9E%9C/demoshow/GIF.gif)

## Day14 - JavaScript References VS Copying
![](https://github.com/SUNNERCMS/30daysJavascript/blob/master/14%20-%20JavaScript%20%E5%BC%95%E7%94%A8%E5%92%8C%E5%80%BC%E6%8B%B7%E8%B4%9D/showpicture.PNG)

## Day15 - LocalStorage
![](https://github.com/SUNNERCMS/30daysJavascript/blob/master/15%20-%20LocalStorage/GIF.gif)

## Day16 - Mouse Move Shadow
![](https://github.com/SUNNERCMS/30daysJavascript/blob/master/16%20-%20%E7%A7%BB%E5%8A%A8%E9%BC%A0%E6%A0%87%E8%AE%A9%E5%AD%97%E4%BD%93%E5%91%88%E7%8E%B0%E5%BD%A9%E8%99%B9%E6%95%88%E6%9E%9C/show.PNG)

## Day17 - Sort Without Articles
![](https://github.com/SUNNERCMS/30daysJavascript/blob/master/17%20-%20%E6%95%B0%E7%BB%84%E6%8E%92%E5%BA%8F/show.PNG)

## Day18 - Adding Up Times with Reduce

![](https://github.com/SUNNERCMS/30daysJavascript/blob/master/18%20-%20Day18%20-%20Reduce%E3%80%81Map%E6%B7%B7%E5%90%88%E4%BD%BF%E7%94%A8%E8%AE%A1%E7%AE%97%E6%97%B6%E5%88%86%E7%A7%92/show.PNG)

## Day19 - Webcam Fun
![](http://oslwafb71.bkt.clouddn.com/small18.jpg)

## Day20 - Speech Detection
![](http://oslwafb71.bkt.clouddn.com/small19.jpg)

## Day21 - Geolocation
![](https://github.com/SUNNERCMS/30daysJavascript/blob/master/21%20-%20Geolocation/show.PNG)

## Day22 - Follow Along Link Highlighter
![](https://github.com/SUNNERCMS/30daysJavascript/blob/master/22%20-%20Follow%20Along%20Link%20Highlighter/SHOWGIF.gif)

## 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)

## Day31 - Canvas CountdownClock  
![](https://github.com/SUNNERCMS/30daysJavascript/blob/master/31%20-%20Canvas%20CountClock/image/GIF.gif)

本人博客：https://sunzhaoxiang.com   
欢迎关注微信公众号：一线开发