├── 06 - 实时在线查找地址 ├── test │ ├── test1.txt │ ├── test2.txt │ ├── test1.html │ └── test2.html ├── final │ └── final.png ├── index.html ├── README.md ├── js │ └── search.js └── css │ └── layout.css ├── 02 - 行走的时钟 ├── images │ └── bg.jpg ├── final │ └── final.png ├── README.md ├── index.html ├── js │ ├── move.js │ └── move-dev.js └── css │ └── layout.css ├── 01 - 有趣的架子鼓小游戏 ├── images │ ├── 1.jpg │ └── timg.jpg ├── final │ └── final.png ├── sounds │ ├── boom.wav │ ├── clap.wav │ ├── kick.wav │ ├── ride.wav │ ├── tink.wav │ ├── tom.wav │ ├── hihat.wav │ ├── snare.wav │ └── openhat.wav ├── test │ └── querySelector.html ├── js │ ├── player.js │ └── player-dev.js ├── README.md ├── css │ └── layout.css └── index.html ├── 03 - 定制属于你的相册 ├── images │ └── 1.jpg ├── final │ └── final.png ├── test │ ├── test6.html │ ├── test1.html │ ├── test3.html │ ├── test2.html │ ├── test4.html │ └── test5.html ├── js │ ├── customize.js │ └── customize-dev.js ├── css │ └── layout.css ├── index.html └── README.md ├── 12 - 键盘序列检测 ├── final │ └── final.png └── index.html ├── 13 - 滚动加载页面图片 ├── images │ ├── 1.jpg │ ├── 2.jpg │ └── 3.jpg ├── css │ └── layout.css ├── js │ ├── scroll.js │ └── scroll-dev.js └── index.html ├── 05 - 制作唯美交互的网页图集 ├── images │ ├── 1.jpg │ ├── 2.jpg │ ├── 3.jpg │ ├── 4.jpg │ └── 5.jpg ├── final │ └── final.png ├── js │ └── animation.js ├── README.md ├── index.html └── css │ └── layout.css ├── 10 - 按住 shift 实现复选框全选 ├── final │ └── final.png ├── README.md ├── js │ └── shift.js ├── css │ └── layout.css └── index.html ├── 11 - 自定义本地 HTML5 播放器 ├── final │ └── final.png ├── README.md ├── index.html ├── js │ └── controller.js └── css │ └── layout.css ├── .idea ├── watcherTasks.xml ├── misc.xml ├── vcs.xml ├── jsLibraryMappings.xml ├── modules.xml ├── JavaScript-30days.iml └── workspace.xml ├── 08 - canvas 五彩缤纷的画笔 ├── js │ └── pen.js ├── index.html └── test │ └── test1 - 矩形.html ├── 14 - JavaScript Reference 与 Copy 的对比 ├── index.html └── js │ └── compare.js ├── 04 - Array.prototype 方法学习（1） ├── index.html ├── README.md └── js │ └── array-dev.js ├── 07 - Array.prototype 方法学习（2） ├── index.html ├── README.md └── js │ └── array-dev.js ├── 09 - 控制台操作小技巧必知必会 ├── README.md ├── index.html └── js │ └── devtools.js ├── 17 - 使用 JavaScript 排序数据并渲染到页面 ├── index.html ├── css │ └── layout.css └── js │ └── sort.js ├── 16 - 鼠标移动阴影效果 ├── index.html ├── css │ └── layout.css └── js │ └── mousemove.js ├── .gitattributes ├── 18 - 动态计算视频总时长 ├── js │ ├── reduce.js │ └── reduce-dev.js └── index.html ├── .gitignore ├── 15 - LocalStorage 的使用 ├── js │ └── localStorage.js ├── css │ └── layout.css └── index.html └── README.md /06 - 实时在线查找地址/test/test1.txt: -------------------------------------------------------------------------------- 1 | Hello World! -------------------------------------------------------------------------------- /06 - 实时在线查找地址/test/test2.txt: -------------------------------------------------------------------------------- 1 | Hello World! 2 | If you see me that is you are success! -------------------------------------------------------------------------------- /02 - 行走的时钟/images/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hushabyme/JavaScript-30days/HEAD/02 - 行走的时钟/images/bg.jpg -------------------------------------------------------------------------------- /01 - 有趣的架子鼓小游戏/images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hushabyme/JavaScript-30days/HEAD/01 - 有趣的架子鼓小游戏/images/1.jpg -------------------------------------------------------------------------------- /02 - 行走的时钟/final/final.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hushabyme/JavaScript-30days/HEAD/02 - 行走的时钟/final/final.png -------------------------------------------------------------------------------- /03 - 定制属于你的相册/images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hushabyme/JavaScript-30days/HEAD/03 - 定制属于你的相册/images/1.jpg -------------------------------------------------------------------------------- /12 - 键盘序列检测/final/final.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hushabyme/JavaScript-30days/HEAD/12 - 键盘序列检测/final/final.png -------------------------------------------------------------------------------- /13 - 滚动加载页面图片/images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hushabyme/JavaScript-30days/HEAD/13 - 滚动加载页面图片/images/1.jpg -------------------------------------------------------------------------------- /13 - 滚动加载页面图片/images/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hushabyme/JavaScript-30days/HEAD/13 - 滚动加载页面图片/images/2.jpg -------------------------------------------------------------------------------- /13 - 滚动加载页面图片/images/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hushabyme/JavaScript-30days/HEAD/13 - 滚动加载页面图片/images/3.jpg -------------------------------------------------------------------------------- /01 - 有趣的架子鼓小游戏/final/final.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hushabyme/JavaScript-30days/HEAD/01 - 有趣的架子鼓小游戏/final/final.png -------------------------------------------------------------------------------- /01 - 有趣的架子鼓小游戏/images/timg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hushabyme/JavaScript-30days/HEAD/01 - 有趣的架子鼓小游戏/images/timg.jpg -------------------------------------------------------------------------------- /01 - 有趣的架子鼓小游戏/sounds/boom.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hushabyme/JavaScript-30days/HEAD/01 - 有趣的架子鼓小游戏/sounds/boom.wav -------------------------------------------------------------------------------- /01 - 有趣的架子鼓小游戏/sounds/clap.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hushabyme/JavaScript-30days/HEAD/01 - 有趣的架子鼓小游戏/sounds/clap.wav -------------------------------------------------------------------------------- /01 - 有趣的架子鼓小游戏/sounds/kick.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hushabyme/JavaScript-30days/HEAD/01 - 有趣的架子鼓小游戏/sounds/kick.wav -------------------------------------------------------------------------------- /01 - 有趣的架子鼓小游戏/sounds/ride.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hushabyme/JavaScript-30days/HEAD/01 - 有趣的架子鼓小游戏/sounds/ride.wav -------------------------------------------------------------------------------- /01 - 有趣的架子鼓小游戏/sounds/tink.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hushabyme/JavaScript-30days/HEAD/01 - 有趣的架子鼓小游戏/sounds/tink.wav -------------------------------------------------------------------------------- /01 - 有趣的架子鼓小游戏/sounds/tom.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hushabyme/JavaScript-30days/HEAD/01 - 有趣的架子鼓小游戏/sounds/tom.wav -------------------------------------------------------------------------------- /03 - 定制属于你的相册/final/final.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hushabyme/JavaScript-30days/HEAD/03 - 定制属于你的相册/final/final.png -------------------------------------------------------------------------------- /05 - 制作唯美交互的网页图集/images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hushabyme/JavaScript-30days/HEAD/05 - 制作唯美交互的网页图集/images/1.jpg -------------------------------------------------------------------------------- /05 - 制作唯美交互的网页图集/images/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hushabyme/JavaScript-30days/HEAD/05 - 制作唯美交互的网页图集/images/2.jpg -------------------------------------------------------------------------------- /05 - 制作唯美交互的网页图集/images/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hushabyme/JavaScript-30days/HEAD/05 - 制作唯美交互的网页图集/images/3.jpg -------------------------------------------------------------------------------- /05 - 制作唯美交互的网页图集/images/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hushabyme/JavaScript-30days/HEAD/05 - 制作唯美交互的网页图集/images/4.jpg -------------------------------------------------------------------------------- /05 - 制作唯美交互的网页图集/images/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hushabyme/JavaScript-30days/HEAD/05 - 制作唯美交互的网页图集/images/5.jpg -------------------------------------------------------------------------------- /06 - 实时在线查找地址/final/final.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hushabyme/JavaScript-30days/HEAD/06 - 实时在线查找地址/final/final.png -------------------------------------------------------------------------------- /01 - 有趣的架子鼓小游戏/sounds/hihat.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hushabyme/JavaScript-30days/HEAD/01 - 有趣的架子鼓小游戏/sounds/hihat.wav -------------------------------------------------------------------------------- /01 - 有趣的架子鼓小游戏/sounds/snare.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hushabyme/JavaScript-30days/HEAD/01 - 有趣的架子鼓小游戏/sounds/snare.wav -------------------------------------------------------------------------------- /05 - 制作唯美交互的网页图集/final/final.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hushabyme/JavaScript-30days/HEAD/05 - 制作唯美交互的网页图集/final/final.png -------------------------------------------------------------------------------- /01 - 有趣的架子鼓小游戏/sounds/openhat.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hushabyme/JavaScript-30days/HEAD/01 - 有趣的架子鼓小游戏/sounds/openhat.wav -------------------------------------------------------------------------------- /10 - 按住 shift 实现复选框全选/final/final.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hushabyme/JavaScript-30days/HEAD/10 - 按住 shift 实现复选框全选/final/final.png -------------------------------------------------------------------------------- /11 - 自定义本地 HTML5 播放器/final/final.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hushabyme/JavaScript-30days/HEAD/11 - 自定义本地 HTML5 播放器/final/final.png -------------------------------------------------------------------------------- /.idea/watcherTasks.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /.idea/misc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | -------------------------------------------------------------------------------- /08 - canvas 五彩缤纷的画笔/js/pen.js: -------------------------------------------------------------------------------- 1 | const canvas = document.querySelector('#canvas'); 2 | const ctx = canvas.getContext('2d'); 3 | 4 | canvas.width = window.innerWidth; 5 | canvas.height = window.innerHeight; 6 | -------------------------------------------------------------------------------- /.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /03 - 定制属于你的相册/test/test6.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | test6 6 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /.idea/jsLibraryMappings.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /14 - JavaScript Reference 与 Copy 的对比/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Reference VS Copy 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /04 - Array.prototype 方法学习（1）/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Array 6 | 7 | 8 |

请按 F12 打开你的控制台 💁

9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /07 - Array.prototype 方法学习（2）/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Array 6 | 7 | 8 |

请按 F12 打开你的控制台 💁

9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /09 - 控制台操作小技巧必知必会/README.md: -------------------------------------------------------------------------------- 1 | # 控制台操作小技巧必知必会 2 | 3 | ## 任务描述 4 | 5 | 熟悉 Dev Tools 中的 console 的相关知识点，并能熟练使用它们在自己的项目中。 6 | 7 | 8 | 9 | ## 任务目的 10 | 11 | ### JavaScript 12 | 13 | 1. 熟练掌握 console.method() 的相关知识（例如： console.log()、 console.dir()、 console.tabel() 等方法）。 14 | 15 | -------------------------------------------------------------------------------- /09 - 控制台操作小技巧必知必会/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Dev Tools 6 | 7 | 8 |

×BREAK×DOWN×

9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /17 - 使用 JavaScript 排序数据并渲染到页面/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | sort 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /16 - 鼠标移动阴影效果/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | mousemove 6 | 7 | 8 | 9 |
10 |

🔥哇！还挺帅

11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /10 - 按住 shift 实现复选框全选/README.md: -------------------------------------------------------------------------------- 1 | # 按住 shift 实现复选框全选 2 | 3 | ## 任务描述 4 | 5 | 定制一个属于自己的书单列表，当按住 shfit 并点击某一复选框时，实现同时选中。 6 | 7 | 任务效果图： 8 | 9 | 10 | 11 | ## 任务目的 12 | 13 | ### HTML 14 | 15 | 1. 掌握 checkbox 的使用 16 | 17 | ### CSS 18 | 19 | 1. 掌握 flex 布局的技巧 20 | 21 | ### JavaScript 22 | 23 | 1. 熟练掌握 if-else 判断 24 | 2. 熟练掌握 this 的使用和指向问题 25 | 3. 掌握事件监听的相关知识 26 | 27 | -------------------------------------------------------------------------------- /16 - 鼠标移动阴影效果/css/layout.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body { 7 | color: #000; 8 | } 9 | 10 | .hero { 11 | min-height: 100vh; 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | color: #000; 16 | } 17 | 18 | h1 { 19 | text-shadow: 10px 10px 0 rgba(0, 0, 0, 1); 20 | font-size: 100px; 21 | } 22 | 23 | -------------------------------------------------------------------------------- /08 - canvas 五彩缤纷的画笔/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | canvas 画笔 6 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /03 - 定制属于你的相册/test/test1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | test1 6 | 17 | 18 | 19 |

Hello World!

20 | 21 | -------------------------------------------------------------------------------- /01 - 有趣的架子鼓小游戏/test/querySelector.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | querySelector 6 | 7 | 8 |
9 |
10 |
11 |
12 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | 4 | # Custom for Visual Studio 5 | *.cs diff=csharp 6 | 7 | # Standard to msysgit 8 | *.doc diff=astextplain 9 | *.DOC diff=astextplain 10 | *.docx diff=astextplain 11 | *.DOCX diff=astextplain 12 | *.dot diff=astextplain 13 | *.DOT diff=astextplain 14 | *.pdf diff=astextplain 15 | *.PDF diff=astextplain 16 | *.rtf diff=astextplain 17 | *.RTF diff=astextplain 18 | -------------------------------------------------------------------------------- /08 - canvas 五彩缤纷的画笔/test/test1 - 矩形.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 矩形 6 | 7 | 8 | 9 | 10 | 16 | 17 | -------------------------------------------------------------------------------- /03 - 定制属于你的相册/js/customize.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | const inputs = document.querySelectorAll('.controls input'); 3 | 4 | inputs.forEach(input => input.addEventListener('change' ,handleChange)); 5 | 6 | function handleChange() { 7 | const suffix = this.dataset.size || '', 8 | htmlStyle = document.documentElement.style, 9 | name = this.name, 10 | value = this.value; 11 | 12 | htmlStyle.setProperty(`--${name}`, value + suffix); 13 | } 14 | }()); -------------------------------------------------------------------------------- /03 - 定制属于你的相册/test/test3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | test3 6 | 18 | 19 | 20 |

Hello World!

21 | 22 | -------------------------------------------------------------------------------- /03 - 定制属于你的相册/test/test2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | test2 6 | 18 | 19 | 20 |

Hello World!

21 | 22 | -------------------------------------------------------------------------------- /.idea/JavaScript-30days.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /06 - 实时在线查找地址/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 查找地址 6 | 7 | 8 | 9 | 10 |
11 | 12 | 16 |
17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /11 - 自定义本地 HTML5 播放器/README.md: -------------------------------------------------------------------------------- 1 | # 自定义本地 HTML5 视频播放器 2 | 3 | ## 任务描述 4 | 5 | 利用 HTML5 中 Video 的相关知识点和 API，动手实现一个本地的视频播放器。要求包括但不限于进度条的读取、播放/暂停功能、快进/慢进功能等，部分功能可参考迅雷看看播放器实现。 6 | 7 | 任务效果图： 8 | 9 | 10 | 11 | ## 任务目的 12 | 13 | ### HTML 14 | 15 | 1. 掌握 HTML 中 data-* 的使用技巧 16 | 2. 掌握 input 中 range 属性的使用 17 | 18 | ### CSS 19 | 20 | 1. 熟练掌握 flex 布局的技巧 21 | 2. 掌握不同浏览器的不同样式设置 22 | 23 | ### JavaScript 24 | 25 | 1. 掌握事件监听的相关知识点 26 | 2. 掌握 video 相关的 API（例如：vedio.currentTime、vedio.duration 等） 27 | 3. 掌握 video 相关的事件监听（例如：timeupdate、play、pause 等） 28 | 29 | -------------------------------------------------------------------------------- /05 - 制作唯美交互的网页图集/js/animation.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | const panels = document.querySelectorAll('.panel'); 3 | 4 | panels.forEach(panel => panel.addEventListener('click', toggleOpen)); 5 | panels.forEach(panel => panel.addEventListener('transitionend', toggleActive)); 6 | 7 | function toggleOpen() { 8 | this.classList.toggle('open'); 9 | } 10 | 11 | function toggleActive(e) { 12 | // 因为浏览器的差异，有的浏览器显示 flex，有的浏览器显示 flex-grow，因此使用 includes() 13 | if(e.propertyName.includes('flex')) { 14 | this.classList.toggle('open-active'); 15 | } 16 | } 17 | }()); 18 | -------------------------------------------------------------------------------- /02 - 行走的时钟/README.md: -------------------------------------------------------------------------------- 1 | # 行走的时钟 2 | 3 | ## 任务描述 4 | 5 | 动手实现一个网页版的时钟吧！它不仅仅可以给你带来乐趣，更重要的是让你更牢固地掌握 new Date() 方法的使用。 6 | 7 | 任务效果图： 8 | 9 | ![](https://github.com/Hushabyme/JavaScript-30days/blob/master/%E8%A1%8C%E8%B5%B0%E7%9A%84%E6%97%B6%E9%92%9F/final/final.png) 10 | 11 | ## 任务目的 12 | 13 | ### HTML 14 | 15 | 1. 掌握 flexbox 布局，使元素在页面居中（也可使用 position 布局） 16 | 17 | ### CSS 18 | 19 | 1. 掌握 CSS3 中的 :nth-child() 伪类的使用 20 | 2. 掌握 position 中 absolute 和 relative 的使用 21 | 3. 掌握 transform-origin 属性的使用 22 | 4. 熟悉 rotate() 函数的运用 23 | 24 | ### JavaScript 25 | 26 | 1. 掌握 setInterval() 方法的使用 27 | 2. 掌握 new Date() 方法的使用 28 | 3. 掌握 ES6 模板字符串的用法 -------------------------------------------------------------------------------- /03 - 定制属于你的相册/test/test4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | test4 6 | 23 | 24 | 25 |

Hello World!

26 | 27 | -------------------------------------------------------------------------------- /02 - 行走的时钟/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 行走的时钟 6 | 7 | 8 | 9 |
10 | 11 | 12 12 | 3 13 | 6 14 | 9 15 | 16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /06 - 实时在线查找地址/README.md: -------------------------------------------------------------------------------- 1 | # 查找地址功能 2 | 3 | ## 任务描述 4 | 5 | 使用 JavaScript 中的 fetch API 实现浏览器不刷新实时查找功能，在此学习和实践的过程中，对正则表达式会有更近一步的学习。 6 | 7 | 任务效果图： 8 | 9 | ![](https://github.com/Hushabyme/JavaScript-30days/blob/master/%E6%9F%A5%E6%89%BE%E5%9C%B0%E5%9D%80%E5%8A%9F%E8%83%BD/final/final.png) 10 | 11 | ## 任务目的 12 | 13 | ### HTML 14 | 15 | 1. 了解 HTML5 中新添加的 input 中 type 属性的 search 值 16 | 17 | ### CSS 18 | 19 | 1. 掌握使用 transition 进行相关的页面布局 20 | 2. 了解 box-sizing 属性的相关知识 21 | 22 | ### JavaScript 23 | 24 | 1. 自学并掌握 fetch 的相关知识点，可以通过搜索引擎进行查找 25 | 2. 熟练掌握正则表达式的使用和相关知识点 26 | 3. 掌握 ES6 模板字符串的使用 27 | 4. 掌握 ES6 胖箭头函数的使用 28 | 5. 掌握 Array.prototype.filter() 方法的实际使用 29 | -------------------------------------------------------------------------------- /05 - 制作唯美交互的网页图集/README.md: -------------------------------------------------------------------------------- 1 | # 制作唯美交互的网页图集 2 | 3 | ## 任务描述 4 | 5 | 考验的 flexbox 的时候到来啦！如何使用 flex 布局制作一份赏心悦目的 Web 图集。在此过程中，你会学习和实践 flexbox 和 css 过渡效果，来大显身手吧。 6 | 7 | 任务效果图： 8 | 9 | ![](https://github.com/Hushabyme/JavaScript-30days/blob/master/%E5%88%B6%E4%BD%9C%E5%94%AF%E7%BE%8E%E4%BA%A4%E4%BA%92%E7%9A%84%E7%BD%91%E9%A1%B5%E5%9B%BE%E9%9B%86/final/final.png) 10 | 11 | ## 任务目的 12 | 13 | ### CSS 14 | 15 | 1. 熟练掌握和运用 flexbox 的相关知识。 16 | 2. 掌握 transform 的相关属性（例如：translate() 等） 17 | 3. 掌握 transition 的相关用法 18 | 19 | ### JavaScript 20 | 21 | 1. 熟练掌握 classList 的相关方法 22 | 2. 掌握 addEventListener() 方法的使用 23 | 3. 理解函数解耦，使一个函数只做一件事 24 | 4. 了解 Array.prototype.includes() 方法的使用 25 | 26 | -------------------------------------------------------------------------------- /04 - Array.prototype 方法学习（1）/README.md: -------------------------------------------------------------------------------- 1 | # Array.prototype 方法学习（1） 2 | 3 | ## 任务描述 4 | 5 | 使用 Array.prototype.method() 来完成挑战吧！在此挑战中，你能学会使用 Array 的原型方法来简化代码的书写，包括但不限于 filter()、map()、sort()、reduce() 等方法的学习和实践。 6 | 7 | ## 任务目的 8 | 9 | ### JavaScript 10 | 11 | 1. 熟练掌握 filter() 方法的使用 12 | 2. 熟练掌握 sort() 方法的使用 13 | 3. 熟练掌握 map() 方法的使用 14 | 4. 熟练掌握 reduce() 方法的使用 15 | 5. 掌握额外的例如 includes()、forEach()、slice() 等方法的学习 16 | 17 | ## 参考资料 18 | 19 | 1. [MDN Array](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array) 20 | 2. [Hushaby丶 的简书 —— 引用类型之 Array（一）](http://www.jianshu.com/p/9546aa0d1c33) 21 | 3. [Hushaby丶 的简书 —— 引用类型之 Array（二）](http://www.jianshu.com/p/8dd1af6d868e) -------------------------------------------------------------------------------- /03 - 定制属于你的相册/css/layout.css: -------------------------------------------------------------------------------- 1 | /* 2 | 自定义属性 3 | */ 4 | 5 | :root { 6 | --base: #ffc600; 7 | --spacing: 10px; 8 | --blur: 0px; 9 | } 10 | 11 | img { 12 | padding: var(--spacing); 13 | background: var(--base); 14 | filter: blur(var(--blur)); 15 | } 16 | 17 | header span { 18 | color: var(--base); 19 | } 20 | 21 | /* 22 | 布局 23 | */ 24 | 25 | body { 26 | text-align: center; 27 | box-sizing: border-box; 28 | } 29 | 30 | body { 31 | background: #193549; 32 | color: white; 33 | font-family: '微软雅黑', 'helvetica neue', sans-serif; 34 | font-weight: 100; 35 | font-size: 36px; 36 | } 37 | 38 | .controls { 39 | margin-bottom: 55px; 40 | } 41 | 42 | input { 43 | width: 120px; 44 | } -------------------------------------------------------------------------------- /17 - 使用 JavaScript 排序数据并渲染到页面/css/layout.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | background: url("https://source.unsplash.com/nDqA4d5NL0k/2000x2000") center center; 4 | background-size: cover; 5 | display: flex; 6 | align-items: center; 7 | min-height: 100vh; 8 | } 9 | 10 | #bands { 11 | list-style: inside square; 12 | font-size: 20px; 13 | background: #fff; 14 | width: 500px; 15 | margin: auto; 16 | padding: 0; 17 | box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.05); 18 | } 19 | 20 | #bands li { 21 | border-bottom: 1px solid #efefef; 22 | padding: 20px; 23 | } 24 | 25 | #bands li:last-child { 26 | border-bottom: 0; 27 | } 28 | 29 | a { 30 | color: #ffc600; 31 | text-decoration: none; 32 | } -------------------------------------------------------------------------------- /07 - Array.prototype 方法学习（2）/README.md: -------------------------------------------------------------------------------- 1 | # Array.prototype 方法学习（2） 2 | 3 | ## 任务描述 4 | 5 | 使用 Array.prototype.method() 来完成挑战吧！在此挑战中，你能学会使用 Array 的原型方法来简化代码的书写，包括但不限于 some()、every()、find()、findIndex() 等方法的学习和实践。 6 | 7 | ## 任务目的 8 | 9 | ### JavaScript 10 | 11 | 1. 熟练掌握 some()方法的使用 12 | 2. 熟练掌握 every() 方法的使用 13 | 3. 熟练掌握 find() 方法的使用 14 | 4. 熟练掌握 findIndex() 方法的使用 15 | 5. 熟练掌握 slice() 方法的使用 16 | 6. 掌握额外的例如 includes()、forEach() 等方法的学习 17 | 18 | ## 参考资料 19 | 20 | 1. [MDN Array](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array) 21 | 2. [Hushaby丶 的简书 —— 引用类型之 Array（一）](http://www.jianshu.com/p/9546aa0d1c33) 22 | 3. [Hushaby丶 的简书 —— 引用类型之 Array（二）](http://www.jianshu.com/p/8dd1af6d868e) -------------------------------------------------------------------------------- /17 - 使用 JavaScript 排序数据并渲染到页面/js/sort.js: -------------------------------------------------------------------------------- 1 | // 原始数据 2 | const bands = ['The Plot in You', 'The Devil Wears Prada', 'Pierce the Veil', 'Norma Jean', 'The Bled', 'Say Anything', 'The Midway State', 'We Came as Romans', 'Counterparts', 'Oh, Sleeper', 'A Skylit Drive', 'Anywhere But Here', 'An Old Dog']; 3 | 4 | // 排序 5 | 6 | // 利用正则表达式替换以 a|an|the 开头的字符串 7 | function strip(str) { 8 | return str.replace(/^(a|an|the|)/i, ''); 9 | } 10 | 11 | // 将数据进行排序 12 | const isSort = bands.sort((a, b) => { 13 | return strip(a) > strip(b) ? 1 : -1; 14 | }); 15 | 16 | const bandList = document.querySelector('#bands'); 17 | 18 | // 渲染到页面中 19 | bandList.innerHTML = isSort 20 | .map(band => `
  • ${band}
    • `) 21 | .join(''); -------------------------------------------------------------------------------- /12 - 键盘序列检测/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Magic 6 | 7 | 8 | 9 |

    输入"magic"试试？看看会发生什么神奇的事

    10 | 11 | 26 | 27 | -------------------------------------------------------------------------------- /18 - 动态计算视频总时长/js/reduce.js: -------------------------------------------------------------------------------- 1 | (function(){ 2 | const timeNodes = document.querySelectorAll('[data-time]'); 3 | 4 | const realTimeNodes = [...timeNodes]; 5 | 6 | 7 | const seconds = realTimeNodes 8 | .map(node => node.dataset.time) 9 | .map(time => { 10 | const [min, sec] = time.split(':').map(Number.parseFloat); 11 | 12 | return min * 60 + sec; 13 | }) 14 | .reduce((total, seconds) => total + seconds, 0); 15 | 16 | 17 | let secondsLeft = seconds; 18 | 19 | const hours = Math.floor(secondsLeft / (60 * 60)); 20 | secondsLeft = secondsLeft % 3600; 21 | 22 | const minutes = Math.floor(secondsLeft / 60); 23 | secondsLeft = secondsLeft % 60; 24 | 25 | console.log(`所有视频总长度为 ${hours} 小时 ${minutes} 分钟 ${secondsLeft} 秒。`); 26 | }()); 27 | 28 | 29 | -------------------------------------------------------------------------------- /03 - 定制属于你的相册/js/customize-dev.js: -------------------------------------------------------------------------------- 1 | const inputs = document.querySelectorAll('.controls input'); 2 | // test 3 | console.log(inputs); 4 | 5 | // 对每一个 input 框进行事件监听 6 | inputs.forEach(input => input.addEventListener('change', test)); 7 | 8 | function test() { 9 | // this 指向的是每一个对应的 input 10 | 11 | // 返回当前的 input 的值 12 | console.log(this.value); 13 | 14 | // dataset 是 自定义的 data-* 的 DOMStringMap 集合，它会返回去掉 data- 后的字符串 15 | console.log(this.dataset); 16 | 17 | // suffix 的意思是"后缀"，prefix 的意思是"前缀" 18 | // 获取 dataset 中键为 size 的值（其实就是 dataset[size] = 'px'） 19 | const suffix = this.dataset.size || ''; 20 | 21 | // test 22 | console.log(suffix); 23 | 24 | // 在 body 标签上使用 setProperty 方法定义样式 25 | document.body.style.setProperty(`--${this.name}`, this.value + suffix); 26 | } 27 | 28 | -------------------------------------------------------------------------------- /10 - 按住 shift 实现复选框全选/js/shift.js: -------------------------------------------------------------------------------- 1 | // 本节的中心思想是： 2 | // 1. 获取所有的 checkbox 3 | // 2. 添加事件监听 4 | // 3. 当 shift 和 当前的 checkbox 被选中后循环所有的 checkbox 5 | // 4. 当第一个和最后一个 checkbox 被选中后 6 | // 5. inBetween 则为 true，接着它们的 checked 属性变为 true 7 | 8 | const checkboxes = document.querySelectorAll('#box input[type="checkbox"]'); 9 | let lastChecked; 10 | 11 | checkboxes.forEach(checkbox => checkbox.addEventListener('click', handleClick)); 12 | 13 | function handleClick(e) { 14 | 15 | let inBetween = false; 16 | 17 | if (e.shiftKey && this.checked) { 18 | checkboxes.forEach(checkbox => { 19 | if (checkbox === this || checkbox === lastChecked) { 20 | inBetween = !inBetween; 21 | } 22 | 23 | if (inBetween) { 24 | checkbox.checked = true; 25 | } 26 | }); 27 | } 28 | 29 | lastChecked = this; 30 | } -------------------------------------------------------------------------------- /01 - 有趣的架子鼓小游戏/js/player.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | function playSound(e) { 3 | const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); 4 | const key = document.querySelector(`.key[data-key="${e.keyCode}"]`); 5 | if(!audio) return false; 6 | 7 | audio.currentTime = 0; 8 | audio.play(); 9 | 10 | key.classList.add('playing'); 11 | } 12 | 13 | const keys = document.querySelectorAll('.key'); 14 | 15 | keys.forEach( key => { 16 | return key.addEventListener('transitionend', removeTransition); 17 | }); 18 | 19 | function removeTransition(e) { 20 | if(e.propertyName !== 'transform') return false; 21 | 22 | this.classList.remove('playing'); 23 | } 24 | 25 | window.addEventListener('keydown', playSound); 26 | }()); 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /02 - 行走的时钟/js/move.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | const secondHand = document.querySelector('.second-hand'); 3 | const minuteHand = document.querySelector('.minute-hand'); 4 | const hourHand = document.querySelector('.hour-hand'); 5 | 6 | function setTime() { 7 | const now = new Date(); 8 | 9 | const seconds = now.getSeconds(), 10 | secondDegrees = ((seconds / 60) * 360) + 90; 11 | 12 | const minutes = now.getMinutes(), 13 | minuteDegrees = ((minutes / 60) * 360) + 90; 14 | 15 | const hours = now.getHours(), 16 | hourDegrees = ((hours / 12) * 360) + 90; 17 | 18 | secondHand.style.transform = `rotate(${secondDegrees}deg)`; 19 | minuteHand.style.transform = `rotate(${minuteDegrees}deg)`; 20 | hourHand.style.transform = `rotate(${hourDegrees}deg)`; 21 | } 22 | 23 | setInterval(setTime ,1000); 24 | }()); 25 | 26 | -------------------------------------------------------------------------------- /16 - 鼠标移动阴影效果/js/mousemove.js: -------------------------------------------------------------------------------- 1 | const hero = document.querySelector('.hero'); 2 | const text = hero.querySelector('h1'); 3 | 4 | function shadow(e) { 5 | const {offsetWidth: width, offsetHeight: height} = hero; 6 | // console.log(width, height); 7 | 8 | let {offsetX: x, offsetY: y} = e; 9 | // console.log(x, y); 10 | 11 | const walk = 100; 12 | 13 | // this 指的是当前的监听事件的对象，就是 hero 14 | // 如果鼠标移入 text 中，那么 e.target 就变成了 text，而不再是 hero 了 15 | // console.log(this, e.target); 16 | if(this !== e.target) { 17 | x += e.target.offsetLeft; 18 | y += e.target.offsetTop; 19 | } 20 | 21 | const xWalk = Math.round((x / width * walk) - (walk / 2)); 22 | const yWalk = Math.round((y / height * walk) - (walk / 2)); 23 | 24 | text.style.textShadow = `${xWalk}px ${yWalk}px 0 pink`; 25 | } 26 | 27 | 28 | hero.addEventListener('mousemove', shadow); -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Windows image file caches 2 | Thumbs.db 3 | ehthumbs.db 4 | 5 | # Folder config file 6 | Desktop.ini 7 | 8 | # Recycle Bin used on file shares 9 | $RECYCLE.BIN/ 10 | 11 | # Windows Installer files 12 | *.cab 13 | *.msi 14 | *.msm 15 | *.msp 16 | 17 | # Windows shortcuts 18 | *.lnk 19 | 20 | # ========================= 21 | # Operating System Files 22 | # ========================= 23 | 24 | # OSX 25 | # ========================= 26 | 27 | .DS_Store 28 | .AppleDouble 29 | .LSOverride 30 | 31 | # Thumbnails 32 | ._* 33 | 34 | # Files that might appear in the root of a volume 35 | .DocumentRevisions-V100 36 | .fseventsd 37 | .Spotlight-V100 38 | .TemporaryItems 39 | .Trashes 40 | .VolumeIcon.icns 41 | 42 | # Directories potentially created on remote AFP share 43 | .AppleDB 44 | .AppleDesktop 45 | Network Trash Folder 46 | Temporary Items 47 | .apdisk 48 | -------------------------------------------------------------------------------- /01 - 有趣的架子鼓小游戏/README.md: -------------------------------------------------------------------------------- 1 | # 有趣的架子鼓小游戏 2 | 3 | ## 任务描述 4 | 5 | 实现一个可以互动的架子鼓游戏，敲击键盘时会发出相应的音效，如果你是个大神，最后就会产生美妙动听的音乐哦~来试试吧。 6 | 7 | 任务效果图： 8 | 9 | ![final](https://github.com/Hushabyme/JavaScript-30days/blob/master/%E6%9C%89%E8%B6%A3%E7%9A%84%E6%9E%B6%E5%AD%90%E9%BC%93%E5%B0%8F%E6%B8%B8%E6%88%8F/final/final.png) 10 | 11 | ## 任务目的 12 | 13 | ### HTML 14 | 15 | 1. 掌握 data-* 自定义属性的使用 16 | 2. 了解 `` 标签的用法 17 | 3. 掌握 `