diff --git a/.github/issue_template.md b/.github/issue_template.md new file mode 100644 index 0000000..5834ef8 --- /dev/null +++ b/.github/issue_template.md @@ -0,0 +1,12 @@ +Title: 标号-题目-类型 问题简述 + +例子： + +``` +11 - Custom Video Player - readme: LocalStorage 補充 +11 - Custom Video Player - js: const 写法错误 +``` + +说明中最好提供问题所在的具体位置链接，链接获取方法： +1. Markdown 文档下，鼠标移动至你有问题的小标题，点击其左侧的链接图标，复制地址栏的地址即可。如：https://github.com/soyaine/JavaScript30/tree/master/11%20-%20Custom%20Video%20Player#图标切换 +2. 代码文档下，点击某一行左侧标号，复制地址栏地址即可，如 https://github.com/soyaine/JavaScript30/blob/master/11%20-%20Custom%20Video%20Player/index.html#L20 diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000..c2c9d7f --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,15 @@ +{ + // 使用 IntelliSense 了解相关属性。 + // 悬停以查看现有属性的描述。 + // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "type": "chrome", + "request": "launch", + "name": "Launch Chrome against localhost", + "url": "http://localhost:8080", + "webRoot": "${workspaceRoot}" + } + ] +} \ No newline at end of file diff --git a/01 - JavaScript Drum Kit/README.md b/01 - JavaScript Drum Kit/README.md index fb3822a..52e2d22 100644 --- a/01 - JavaScript Drum Kit/README.md +++ b/01 - JavaScript Drum Kit/README.md @@ -1,6 +1,6 @@ # 01 JavaScript Drum Kit 中文指南 -> 作者：©[缉熙Soyaine](https://github.com/soyaine) +> 作者：©[未枝丫](https://github.com/soyaine) > 简介：[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 1 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*) ## 实现效果 diff --git a/01 - JavaScript Drum Kit/index-FINISHED.html b/01 - JavaScript Drum Kit/index-FINISHED.html index 0e9d90b..c68b9e2 100644 --- a/01 - JavaScript Drum Kit/index-FINISHED.html +++ b/01 - JavaScript Drum Kit/index-FINISHED.html @@ -6,8 +6,6 @@ - -
A @@ -77,7 +75,5 @@ keys.forEach(key => key.addEventListener('transitionend', removeTransition)); // 添加 transition 事件监听 window.addEventListener('keydown', playSound); - - diff --git a/01 - JavaScript Drum Kit/index-SOYAINE.html b/01 - JavaScript Drum Kit/index-SOYAINE.html index ec73e1e..26c2eb0 100644 --- a/01 - JavaScript Drum Kit/index-SOYAINE.html +++ b/01 - JavaScript Drum Kit/index-SOYAINE.html @@ -77,6 +77,5 @@ keys.forEach(key => key.addEventListener('transitionend', removeTransition)); // 添加 transition 事件监听 window.addEventListener('keydown', playSound); - diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index c771dea..ea223f0 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -6,8 +6,6 @@ - -
A @@ -56,10 +54,25 @@ - + function playSound(event) { + const audio = document.querySelector(`audio[data-key="${event.keyCode}"]`); // 根据触发按键的键码，获取对应音频 + const key = document.querySelector(`div[data-key="${event.keyCode}"]`); // 获取页面对应按钮 DIV 元素 + if (!audio) return; // 处理无效的按键事件 + + key.classList.add('playing'); // 改变样式 + audio.currentTime = 0; // 每次播放之后都使音频播放进度归零 + audio.play(); // 播放相应音效 + } + const keys = Array.from(document.querySelectorAll('.key')); // 获取页面所有按钮元素 + keys.forEach(key => key.addEventListener('transitionend', removeTransition)); // 添加 transition 事件监听 + window.addEventListener('keydown', playSound); + diff --git a/01 - JavaScript Drum Kit/index-draft.html b/01 - JavaScript Drum Kit/index-draft.html index 903fcc3..44fa2e8 100644 --- a/01 - JavaScript Drum Kit/index-draft.html +++ b/01 - JavaScript Drum Kit/index-draft.html @@ -6,8 +6,6 @@ - -
A @@ -102,7 +100,6 @@ key.classList.add('playing'); // key.classList.remove("playing"); }, false); - function removeTransition(e){ // if(e.propertyName !== "border-left-color") return; console.log(e.propertyName); diff --git a/01 - JavaScript Drum Kit/style.css b/01 - JavaScript Drum Kit/style.css index 3e0a320..eac0ad8 100644 --- a/01 - JavaScript Drum Kit/style.css +++ b/01 - JavaScript Drum Kit/style.css @@ -1,6 +1,6 @@ html { font-size: 10px; - background:url(http://i.imgur.com/b9r5sEL.jpg) bottom center; + background:url(http://i.imgur.com/b9r5sEL.jpg) bottom center no-repeat; background-size: cover; } body,html { diff --git a/02 - JS + CSS Clock/README.md b/02 - JS + CSS Clock/README.md index 31544fe..7e808f2 100644 --- a/02 - JS + CSS Clock/README.md +++ b/02 - JS + CSS Clock/README.md @@ -1,6 +1,6 @@ # 02 纯 JS、CSS 时钟 中文指南 -> 作者：©[缉熙Soyaine](https://github.com/soyaine) +> 作者：©[未枝丫](https://github.com/soyaine) > 简介：[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 2 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*) > 创建时间：2016-12-21 diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html index 2712384..9c0e520 100644 --- a/02 - JS + CSS Clock/index-START.html +++ b/02 - JS + CSS Clock/index-START.html @@ -6,19 +6,22 @@ - +

HTML+CSS模拟
时钟效果

+
+ +
diff --git a/03 - CSS Variables/README.md b/03 - CSS Variables/README.md index fa175ef..e28b206 100644 --- a/03 - CSS Variables/README.md +++ b/03 - CSS Variables/README.md @@ -1,6 +1,6 @@ # 03 CSS Variable -> 作者：©[缉熙Soyaine](https://github.com/soyaine) +> 作者：©[未枝丫](https://github.com/soyaine) > 简介：[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 3 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*) ## 实现效果 diff --git a/03 - CSS Variables/index-FINISHED.html b/03 - CSS Variables/index-FINISHED.html index c3217fc..6e22e5a 100644 --- a/03 - CSS Variables/index-FINISHED.html +++ b/03 - CSS Variables/index-FINISHED.html @@ -18,7 +18,7 @@

Update CSS Variables with JS

- + diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index 7171607..e18954c 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -17,15 +17,19 @@

Update CSS Variables with JS

+ - + + const image = document.querySelector('img'); + const inputs = document.querySelectorAll('input'); + const spacingRange = document.querySelector('input[name="spacing"]'); + const blurRange = document.querySelector('input[name="blur"]'); + const colorPanel = document.querySelector('input[name="base"]'); + const styleContainer = document.querySelector('.styleMsg'); + +//我写的 + // inputs.forEach(inp => inp.addEventListener('mousemove', showStyle)); + // function showStyle(e) { + // styleContainer.innerHTML = "img { padding: " + `${e.target.value}` + // + "px; filter: blur(" + `${ e.target.value}` + "px); background:" + // + `${ e.target.value }` + "; }"; + // } + // spacingRange.addEventListener('change', changeSpacing); + // spacingRange.addEventListener('mousemove', changeSpacing); + // function changeSpacing(e) { + // image.style.padding = `${ e.target.value }` + 'px'; + // } + // + // blurRange.addEventListener('change', changeBlur); + // blurRange.addEventListener('mousemove', changeBlur); + // function changeBlur(e) { + // image.style.filter = "blur(" + `${ e.target.value}` + "px"; + // } + // + // colorPanel.addEventListener('change', changeBgColor); + // function changeBgColor(e) { + // image.style.background = `${ e.target.value }`; + // } + +//简单写法 + inputs.forEach(input => input.addEventListener('change', setStyle)); + inputs.forEach(input => input.addEventListener('mousemove', setStyle)); + + function setStyle(e) { + const suffix = this.dataset.sizing || ''; + document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix); + } + diff --git a/04 - Array Cardio Day 1/README.md b/04 - Array Cardio Day 1/README.md index c6e08e1..1e4215d 100644 --- a/04 - Array Cardio Day 1/README.md +++ b/04 - Array Cardio Day 1/README.md @@ -1,6 +1,6 @@ # 04 Array Cardio 💪 指南一 -> 作者：©[缉熙Soyaine](https://github.com/soyaine) +> 作者：©[未枝丫](https://github.com/soyaine) > 简介：[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 4 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*) ## 实现效果 diff --git a/04 - Array Cardio Day 1/index-SOYAINE.html b/04 - Array Cardio Day 1/index-SOYAINE.html index 6de312b..7419899 100644 --- a/04 - Array Cardio Day 1/index-SOYAINE.html +++ b/04 - Array Cardio Day 1/index-SOYAINE.html @@ -113,7 +113,7 @@ // 下面是我在豆瓣里筛选书名里含有 CSS 的书的代码 // https://book.douban.com/tag/web -// const links = document.querySelectorAll('.subject-list h2 a'); +// const links = Array.from(document.querySelectorAll('.subject-list h2 a')); // const book = links // .map(link => link.title) // .filter(title => title.includes('CSS')); diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index 4162bce..50ebf33 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -5,7 +5,7 @@ Array Cardio 💪 -

Psst: have a look at the JavaScript Console 💁

+

按 F12 打开 JavaScript 控制台查看输出结果，若无结果，刷新页面试试~ 💁

diff --git a/05 - Flex Panel Gallery/README.md b/05 - Flex Panel Gallery/README.md index af61333..90a1a04 100644 --- a/05 - Flex Panel Gallery/README.md +++ b/05 - Flex Panel Gallery/README.md @@ -1,6 +1,6 @@ # 05 Flex 实现可伸缩的图片墙 中文指南 -> 作者：©[缉熙Soyaine](https://github.com/soyaine) +> 作者：©[未枝丫](https://github.com/soyaine) > 简介：[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 5 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*) ## 实现效果 diff --git a/05 - Flex Panel Gallery/index-SOYAINE.html b/05 - Flex Panel Gallery/index-SOYAINE.html index 4606f8f..8d90255 100644 --- a/05 - Flex Panel Gallery/index-SOYAINE.html +++ b/05 - Flex Panel Gallery/index-SOYAINE.html @@ -67,19 +67,19 @@ justify-content: center; align-items: center; } - + .panel > *:first-child { transform: translateY(-100%); } - + .panel.open-actived > *:first-child { transform: translateY(0); } - + .panel > *:last-child { transform: translateY(100%); } - + .panel.open-actived > *:last-child { transform: translateY(0); } @@ -137,22 +137,22 @@ - \ No newline at end of file + diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index 04e974b..86932cb 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -24,14 +24,20 @@ .panels { min-height:100vh; overflow: hidden; + display: flex; + flex-direction: row; + align-items: center; } .panel { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; background:#6B0F9C; box-shadow:inset 0 0 0 5px rgba(255,255,255,0.1); color:white; - text-align: center; - align-items:center; /* Safari transitionend event.propertyName === flex */ /* Chrome + FF transitionend event.propertyName === flex-grow */ transition: @@ -39,6 +45,7 @@ flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11), background 0.2s; font-size: 20px; + min-height: 100vh; background-size:cover; background-position:center; } @@ -54,6 +61,10 @@ margin:0; width: 100%; transition:transform 0.5s; + flex: 1; + display: flex; + justify-content: center; + align-items: center; } .panel p { @@ -67,9 +78,17 @@ } .panel.open { + flex: 4; font-size:40px; } - + .containText p:first-child { + font-size: 1em; + transform: translateY(-100%); + } + .containText p:last-child { + font-size: 1em; + transform: translateY(100%); + } .cta { color:white; text-decoration: none; @@ -107,13 +126,20 @@
- - - - - - diff --git a/06 - Type Ahead/README.md b/06 - Type Ahead/README.md index 38845b5..349de2a 100644 --- a/06 - Type Ahead/README.md +++ b/06 - Type Ahead/README.md @@ -1,6 +1,6 @@ # 06 Fetch 结合 filter 实现快速匹配古诗 -> 作者：©[缉熙Soyaine](https://github.com/soyaine) +> 作者：©[未枝丫](https://github.com/soyaine) > 简介：[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 6 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*) ## 实现效果 @@ -46,7 +46,7 @@ 3. 构造 HTML 标签数据 4. 将匹配值的 HTML 标签放入 `
    ` 中 -## 相关知识 +## 相关知识 ### [Fetch API](https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API) @@ -119,8 +119,8 @@ arr1.push(...arr2); 这一部分用到的语句很简单，但都用了 ES6 的语法，所以不熟悉 ES6 的话需要时间适应一下。 ````js - const endpoint = 'https://raw.githubusercontent.com/soyaine/FE-Practice/f438d3bdf099461f88322b1b1f20c9d58f66f1ec/TangPoetryCut.json'; - const poetrys = []; + const endpoint = ****'https://raw.githubusercontent.com/soyaine/FE-Practice/f438d3bdf099461f88322b1b1f20c9d58f66f1ec/TangPoetryCut.json'; + const poetrys = [];**** fetch(endpoint) .then(blob => blob.json()) .then(data => poetrys.push(...data)); diff --git a/06 - Type Ahead/index-SOYAINE.html b/06 - Type Ahead/index-SOYAINE.html index 927d08d..84c7576 100644 --- a/06 - Type Ahead/index-SOYAINE.html +++ b/06 - Type Ahead/index-SOYAINE.html @@ -10,8 +10,7 @@
      -
    • 输入词句，找一首诗
      • -
    • +
    - + diff --git a/07 - Array Cardio Day 2/README.md b/07 - Array Cardio Day 2/README.md index 767a1f7..1783239 100644 --- a/07 - Array Cardio Day 2/README.md +++ b/07 - Array Cardio Day 2/README.md @@ -1,6 +1,6 @@ # 07 Array Cardio 💪 指南二 -> 作者：©[缉熙Soyaine](https://github.com/soyaine) +> 作者：©[未枝丫](https://github.com/soyaine) > 简介：[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 7 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*) ## 实现效果 @@ -22,8 +22,8 @@ 2. 删除 ID 号为 823423 的评论 1. 获取此 ID 对应元素在数组中所处的位置 2. 利用位置，删除该子元素 - 2. 或者拼接新的数组 - + 3. 或者拼接新的数组 + ## 相关知识 ### [some](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/some) 和 [every](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/every) @@ -74,7 +74,7 @@ ```js // 删除方法一，splice() // comments.splice(index, 1); - + // 删除方法二，slice 拼接 const newComments = [ ...comments.slice(0, index), @@ -87,4 +87,4 @@ 至此，数组基本操作二就结束啦~~\(≧▽≦)/~ > 创建日期：2017-01-03 -> 最后更新：2017-01-03 \ No newline at end of file +> 最后更新：2017-01-03 diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html index 206ec31..43d8f72 100644 --- a/07 - Array Cardio Day 2/index-START.html +++ b/07 - Array Cardio Day 2/index-START.html @@ -27,11 +27,26 @@ // Some and Every Checks // Array.prototype.some() // is at least one person 19? // Array.prototype.every() // is everyone 19? + const has19 = people.some((person, index) => { + const currentYear = (new Date()).getFullYear() + return currentYear - person.year >= 19 + }) + console.log({has19}) + const isAdult = people.every(person => { + const currentYear = (new Date()).getFullYear() + return currentYear - person.year >= 18 + }) + console.log({isAdult}) // Array.prototype.find() // Find is like filter, but instead returns just the one you are looking for // find the comment with the ID of 823423 - + const commentIndex = comments.findIndex(comment => { + return comment.id === 823423 + }) + const comment = comments.splice(commentIndex, 1) + console.table(comment) + console.table(comments) // Array.prototype.findIndex() // Find the comment with this ID // delete the comment with the ID of 823423 diff --git a/08 - Fun with HTML5 Canvas/README.md b/08 - Fun with HTML5 Canvas/README.md index f9397ef..3cf6bd9 100644 --- a/08 - Fun with HTML5 Canvas/README.md +++ b/08 - Fun with HTML5 Canvas/README.md @@ -1,6 +1,6 @@ # 08 HTML5 Canvas 实现彩虹画笔绘画板指南 -> 作者：©[缉熙Soyaine](https://github.com/soyaine) +> 作者：©[未枝丫](https://github.com/soyaine) > 简介：[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 8 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*) ## 实现效果 diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html index 37c148d..fc3ed3c 100644 --- a/08 - Fun with HTML5 Canvas/index-START.html +++ b/08 - Fun with HTML5 Canvas/index-START.html @@ -5,14 +5,82 @@ HTML5 Canvas - +

    拖动鼠标查看效果

    + diff --git a/09 - Dev Tools Domination/README.md b/09 - Dev Tools Domination/README.md index 3ec6934..f103fc4 100644 --- a/09 - Dev Tools Domination/README.md +++ b/09 - Dev Tools Domination/README.md @@ -1,6 +1,6 @@ # 09 Console 调试技巧指南 -> 作者：©[缉熙Soyaine](https://github.com/soyaine) +> 作者：©[未枝丫](https://github.com/soyaine) > 简介：[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 9 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*) > 创建时间：2017-01-06 diff --git a/09 - Dev Tools Domination/index-START.html b/09 - Dev Tools Domination/index-START.html index 196fffd..decd618 100644 --- a/09 - Dev Tools Domination/index-START.html +++ b/09 - Dev Tools Domination/index-START.html @@ -6,41 +6,63 @@ -

    ×BREAK×DOWN×

    +

    点击变绿，查看控制面板吧~

    + + 我的 Github 头像 + diff --git a/10 - Hold Shift and Check Checkboxes/README.md b/10 - Hold Shift and Check Checkboxes/README.md index 056f796..dbb6c5f 100644 --- a/10 - Hold Shift and Check Checkboxes/README.md +++ b/10 - Hold Shift and Check Checkboxes/README.md @@ -1,6 +1,6 @@ # 10 JS 实现 Checkbox 中按住 Shift 的多选功能 -> 作者：©[缉熙Soyaine](https://github.com/soyaine) +> 作者：©[未枝丫](https://github.com/soyaine) > 简介：[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 10 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*) > 创建时间：2017-01-07 diff --git a/11 - Custom Video Player/index.html b/11 - Custom Video Player/index.html index dee25cd..d9d526a 100644 --- a/11 - Custom Video Player/index.html +++ b/11 - Custom Video Player/index.html @@ -1,27 +1,35 @@ + HTML Video Player + -
    - +
    + -
    -
    +
    +
    -
    - - - - - -
    -
    - - +
    + + + + + + +
    +
    + - + + \ No newline at end of file diff --git a/11 - Custom Video Player/scripts-FINISHED.js b/11 - Custom Video Player/scripts-FINISHED.js index cedacf2..a98abf0 100644 --- a/11 - Custom Video Player/scripts-FINISHED.js +++ b/11 - Custom Video Player/scripts-FINISHED.js @@ -1,55 +1,55 @@ /* Get Our Elements */ -const player = document.querySelector('.player'); -const video = player.querySelector('.viewer'); -const progress = player.querySelector('.progress'); -const progressBar = player.querySelector('.progress__filled'); -const toggle = player.querySelector('.toggle'); -const skipButtons = player.querySelectorAll('[data-skip]'); -const ranges = player.querySelectorAll('.player__slider'); +const player = document.querySelector('.player') +const video = player.querySelector('.viewer') +const progress = player.querySelector('.progress') +const progressBar = player.querySelector('.progress__filled') +const toggle = player.querySelector('.toggle') +const skipButtons = player.querySelectorAll('[data-skip]') +const ranges = player.querySelectorAll('.player__slider') /* Build out functions */ -function togglePlay() { - const method = video.paused ? 'play' : 'pause'; - video[method](); +function togglePlay () { + const method = video.paused ? 'play' : 'pause' + video[method]() } -function updateButton() { - const icon = this.paused ? '►' : '❚ ❚'; - console.log(icon); - toggle.textContent = icon; +function updateButton () { + const icon = this.paused ? '►' : '❚ ❚' + console.log(icon) + toggle.textContent = icon } -function skip() { - video.currentTime += parseFloat(this.dataset.skip); +function skip () { + video.currentTime += parseFloat(this.dataset.skip) } -function handleRangeUpdate() { - video[this.name] = this.value; +function handleRangeUpdate () { + video[this.name] = this.value } -function handleProgress() { - const percent = (video.currentTime / video.duration) * 100; - progressBar.style.flexBasis = `${percent}%`; +function handleProgress () { + const percent = (video.currentTime / video.duration) * 100 + progressBar.style.flexBasis = `${percent}%` } -function scrub(e) { - const scrubTime = (e.offsetX / progress.offsetWidth) * video.duration; - video.currentTime = scrubTime; +function scrub (e) { + const scrubTime = (e.offsetX / progress.offsetWidth) * video.duration + video.currentTime = scrubTime } /* Hook up the event listners */ -video.addEventListener('click', togglePlay); -video.addEventListener('play', updateButton); -video.addEventListener('pause', updateButton); -video.addEventListener('timeupdate', handleProgress); - -toggle.addEventListener('click', togglePlay); -skipButtons.forEach(button => button.addEventListener('click', skip)); -ranges.forEach(range => range.addEventListener('change', handleRangeUpdate)); -ranges.forEach(range => range.addEventListener('mousemove', handleRangeUpdate)); - -let mousedown = false; -progress.addEventListener('click', scrub); -progress.addEventListener('mousemove', (e) => mousedown && scrub(e)); -progress.addEventListener('mousedown', () => mousedown = true); -progress.addEventListener('mouseup', () => mousedown = false); +video.addEventListener('click', togglePlay) +video.addEventListener('play', updateButton) +video.addEventListener('pause', updateButton) +video.addEventListener('timeupdate', handleProgress) + +toggle.addEventListener('click', togglePlay) +skipButtons.forEach(button => button.addEventListener('click', skip)) +ranges.forEach(range => range.addEventListener('change', handleRangeUpdate)) +ranges.forEach(range => range.addEventListener('mousemove', handleRangeUpdate)) + +let mousedown = false +progress.addEventListener('click', scrub) +progress.addEventListener('mousemove', (e) => mousedown && scrub(e)) +progress.addEventListener('mousedown', () => mousedown = true) +progress.addEventListener('mouseup', () => mousedown = false) diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js index e69de29..40be40a 100644 --- a/11 - Custom Video Player/scripts.js +++ b/11 - Custom Video Player/scripts.js @@ -0,0 +1,56 @@ +/* 获取元素 */ +const player = document.querySelector('.player') +const video = player.querySelector('.viewer') +const progress = player.querySelector('.progress') +const progressBar = player.querySelector('.progress__filled') +const toggle = player.querySelector('.toggle') +const skipButtons = player.querySelectorAll('[data-skip]') +const ranges = player.querySelectorAll('.player__slider') +let isDrag = false + +function togglePlay () { + video.paused ? video.play() : video.pause() +} + +function toggleButton () { + let icon = video.paused ? '►' : '❚ ❚' + toggle.textContent = icon +} + +function skip () { + video.currentTime += parseFloat(this.dataset.skip) +} + +function updateVolumeHandle () { + video[this.name] = this.value +} + +function progressHandle (e) { + let percent = (video.currentTime / video.duration) * 100 + progressBar.style.flexBasis = `${percent}%` +} + +function jump (e) { + let playPostion = (e.offsetX / progress.offsetWidth) * video.duration + console.log(typeof playPostion) + video.currentTime = playPostion +} + +video.addEventListener('click', togglePlay) +video.addEventListener('play', toggleButton) +video.addEventListener('pause', toggleButton) +// 时间更新，更新进度条 +video.addEventListener('timeupdate', progressHandle) +progress.addEventListener('click', jump) +progress.addEventListener('mousemove', (e) => { + isDrag && jump(e) +}) +progress.addEventListener('mousedown', () => isDrag = true) +progress.addEventListener('mouseup', () => isDrag = false) + +toggle.addEventListener('click', togglePlay) + +skipButtons.forEach(button => button.addEventListener('click', skip)) + +ranges.forEach(range => range.addEventListener('change', updateVolumeHandle)) + diff --git a/11 - Custom Video Player/style.css b/11 - Custom Video Player/style.css index c07581c..20e2e80 100644 --- a/11 - Custom Video Player/style.css +++ b/11 - Custom Video Player/style.css @@ -67,7 +67,7 @@ body { } .player:hover .progress { - height:15px; + height:10px; } .player__controls > * { @@ -78,22 +78,21 @@ body { flex:10; position: relative; display:flex; - flex-basis:100%; - height:5px; + flex-basis: 100%; + height: 5px; transition:height 0.3s; background:rgba(0,0,0,0.5); - cursor:ew-resize; + cursor: pointer; } .progress__filled { - width:50%; + width: 50%; background:#ffc600; - flex:0; - flex-basis:50%; + flex: 0; + flex-basis: 50%; } /* unholy css to style input type="range" */ - input[type=range] { -webkit-appearance: none; background:transparent; @@ -123,7 +122,7 @@ input[type=range]::-webkit-slider-thumb { margin-top: -3.5px; box-shadow:0 0 2px rgba(0,0,0,0.2); } -input[type=range]:focus::-wefbkit-slider-runnable-track { +input[type=range]:focus::-webkit-slider-runnable-track { background: #bada55; } input[type=range]::-moz-range-track { @@ -143,3 +142,15 @@ input[type=range]::-moz-range-thumb { background: #ffc600; cursor: pointer; } + +label[for="rate"] { + position: relative; +} + +input[name="playbackRate"] { + transform: rotate(-90deg); + display: none; +} +label[for="rate"]:hover input { + display: block; +} \ No newline at end of file diff --git a/12 - Key Sequence Detection/README.md b/12 - Key Sequence Detection/README.md index 0b84335..9956f18 100644 --- a/12 - Key Sequence Detection/README.md +++ b/12 - Key Sequence Detection/README.md @@ -1,6 +1,6 @@ # 12 键盘输入序列的验证指南 -> 作者：©[缉熙Soyaine](https://github.com/soyaine) +> 作者：©[未枝丫](https://github.com/soyaine) > 简介：[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 12 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*) > 创建时间：2017-02-27 diff --git a/13 - Slide in on Scroll/README.md b/13 - Slide in on Scroll/README.md index 22bb0d5..182908c 100644 --- a/13 - Slide in on Scroll/README.md +++ b/13 - Slide in on Scroll/README.md @@ -1,6 +1,6 @@ # 13 图片随屏幕滚动而滑入滑出的效果指南 -> 作者：©[缉熙Soyaine](https://github.com/soyaine) +> 作者：©[未枝丫](https://github.com/soyaine) > 简介：[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 13 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*) > 创建时间：2017-07-14 diff --git a/14 - JavaScript References VS Copying/README.md b/14 - JavaScript References VS Copying/README.md index 2af71f5..05dcef8 100644 --- a/14 - JavaScript References VS Copying/README.md +++ b/14 - JavaScript References VS Copying/README.md @@ -1,6 +1,6 @@ # 14 JS中的引用与复制 -> 作者：©[缉熙Soyaine](https://github.com/soyaine) +> 作者：©[未枝丫](https://github.com/soyaine) > 简介：[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 14 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*) > 创建时间：2017-07-19 diff --git a/15 - LocalStorage/README.md b/15 - LocalStorage/README.md index 80173b6..3793de1 100644 --- a/15 - LocalStorage/README.md +++ b/15 - LocalStorage/README.md @@ -1,6 +1,6 @@ # 15 LocalStorage -> 作者：©[缉熙Soyaine](https://github.com/soyaine) +> 作者：©[未枝丫](https://github.com/soyaine) > 简介：[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 15 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*) > 创建时间：2017-07-24 diff --git a/19 - Webcam Fun/script.js b/19 - Webcam Fun/script.js index b6f3a5a..574b277 100644 --- a/19 - Webcam Fun/script.js +++ b/19 - Webcam Fun/script.js @@ -1,119 +1,117 @@ -window.onload = function() { - canvas = document.querySelector('canvas'); - video = document.querySelector('video'); - ctx = canvas.getContext('2d'); - img = document.querySelector('#myimg'); - slider = document.querySelector('.rgb'); - a = document.querySelector('a'); - //滤色范围记录 - filter = { - rmin: 0, - rmax: 255, - gmin: 0, - gmax: 255, - bmin: 0, - bmax: 255 - } - - //调用摄像头数据 - askWebcam(); +window.onload = function () { + canvas = document.querySelector('canvas') + video = document.querySelector('video') + ctx = canvas.getContext('2d') + img = document.querySelector('#myimg') + slider = document.querySelector('.rgb') + a = document.querySelector('a') + // 滤色范围记录 + filter = { + rmin: 0, + rmax: 255, + gmin: 0, + gmax: 255, + bmin: 0, + bmax: 255 + } - //绑定change事件动态修改图片颜色 - slider.onchange = function(e) { - //先将canvas恢复至原始截图 - ctx.putImageData(origindata, 0, 0); - const target = e.target; - //startPos表示操作像素点数据时的起点，从canvas获取到的像素数据每四个值表示一个像素点 - //例如滑块为红色，则只需要改变像素数组中第0,4,8......个元素的值。 - const startPos = { - 'r': 0, - 'g': 1, - 'b': 2 - }[target.name[0]]; - //filterMin和filterMax表示相应的滤色范围上下限，若修改了红色滤色范围则取红色范围值。 - //若修改蓝色的滤色范围，则取蓝色。 - var tempFilter = checkFilter(target.name, target.value); - const filterMin = tempFilter.min; - const filterMax = tempFilter.max; - //从canvas获取像素数据 - var img = ctx.getImageData(0, 0, 300, 200); + // 调用摄像头数据 + askWebcam() + // 绑定change事件动态修改图片颜色 + slider.onchange = function (e) { + // 先将canvas恢复至原始截图 + ctx.putImageData(origindata, 0, 0) + const target = e.target + // startPos表示操作像素点数据时的起点，从canvas获取到的像素数据每四个值表示一个像素点 + // 例如滑块为红色，则只需要改变像素数组中第0,4,8......个元素的值。 + const startPos = { + 'r': 0, + 'g': 1, + 'b': 2 + }[target.name[0]] + // filterMin和filterMax表示相应的滤色范围上下限，若修改了红色滤色范围则取红色范围值。 + // 若修改蓝色的滤色范围，则取蓝色。 + var tempFilter = checkFilter(target.name, target.value) + const filterMin = tempFilter.min + const filterMax = tempFilter.max + // 从canvas获取像素数据 + var img = ctx.getImageData(0, 0, 300, 200) - var imgd = img.data; - //色彩过滤 - for (var i = startPos, len = imgd.length; i < len; i += 4) { - if (imgd[i] < filterMin) { - imgd[i] = filterMin; - } else if (imgd[i] > filterMax) { - imgd[i] = filterMax; - } - } - //将修改后的像素数据重绘制至canvas - ctx.putImageData(img, 0, 0); - img.src = canvas.toDataURL(); + var imgd = img.data + // 色彩过滤 + for (var i = startPos, len = imgd.length; i < len; i += 4) { + if (imgd[i] < filterMin) { + imgd[i] = filterMin + } else if (imgd[i] > filterMax) { + imgd[i] = filterMax + } } - + // 将修改后的像素数据重绘制至canvas + ctx.putImageData(img, 0, 0) + img.src = canvas.toDataURL() + } } -//点击函数 -function takePhoto() { - ctx.drawImage(video, 0, 0, 300, 200); - //将原始截图保存 - origindata = ctx.getImageData(0, 0, 300, 200); +// 点击函数 +function takePhoto () { + ctx.drawImage(video, 0, 0, 300, 200) + // 将原始截图保存 + origindata = ctx.getImageData(0, 0, 300, 200) } -//保存图片 -function savePhoto() { - img.src = canvas.toDataURL(); - a.href = canvas.toDataURL(); - a.setAttribute('download', 'handsome'); +// 保存图片 +function savePhoto () { + img.src = canvas.toDataURL() + a.href = canvas.toDataURL() + a.setAttribute('download', 'handsome') } -//申请网络摄像头操作权限 -function askWebcam() { - navigator.getUserMedia = navigator.getUserMedia || +// 申请网络摄像头操作权限 +function askWebcam () { + navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || - navigator.mozGetUserMedia; - if (navigator.getUserMedia) { - navigator.getUserMedia({ - audio: false, - video: { - width: 300, - height: 200 - } - }, function(stream) { - //若成功 - video.srcObject = stream; - video.onloadedmetadata = function(e) { - video.play(); - } - }, function(err) { - console.log('Error occured:' + err.name); - }); - } else { - console.log('this navigator doesn\'t support webcam!'); - } + navigator.mozGetUserMedia + if (navigator.getUserMedia) { + navigator.getUserMedia({ + audio: false, + video: { + width: 300, + height: 200 + } + }, function (stream) { + // 若成功 + video.srcObject = stream + video.onloadedmetadata = function (e) { + video.play() + } + }, function (err) { + console.log('Error occured:' + err.name) + }) + } else { + console.log('this navigator doesn\'t support webcam!') + } } -//滤色函数 -function checkFilter(name, value) { - var _min; - var _max; - var _antiname = { - 'rmin': 'rmax', - 'rmax': 'rmin', - 'gmin': 'gmax', - 'gmax': 'gmin', - 'bmin': 'bmax', - 'bmax': 'bmin' - }[name] - filter[name] = value; - //当下限值超过上限时，将两者对调 - _min = Math.min(filter[name], filter[_antiname]); - _max = Math.max(filter[name], filter[_antiname]); - console.log(filter); - return { - min: _min, - max: _max - } -} \ No newline at end of file +// 滤色函数 +function checkFilter (name, value) { + var _min + var _max + var _antiname = { + 'rmin': 'rmax', + 'rmax': 'rmin', + 'gmin': 'gmax', + 'gmax': 'gmin', + 'bmin': 'bmax', + 'bmax': 'bmin' + }[name] + filter[name] = value + // 当下限值超过上限时，将两者对调 + _min = Math.min(filter[name], filter[_antiname]) + _max = Math.max(filter[name], filter[_antiname]) + console.log(filter) + return { + min: _min, + max: _max + } +} diff --git a/24 - Sticky Nav/app.js b/24 - Sticky Nav/app.js index d6f5572..e988e83 100644 --- a/24 - Sticky Nav/app.js +++ b/24 - Sticky Nav/app.js @@ -1,16 +1,15 @@ - var oNav = document.getElementById('main'); - var changePoint = oNav.offsetTop; - var oLogo = document.getElementById('logo'); + var oNav = document.getElementById('main') + var changePoint = oNav.offsetTop + var oLogo = document.getElementById('logo') - function adjustNav(){ - if(window.scrollY >= changePoint){ - oNav.className = 'fixed-nav'; - oLogo.style['max-width'] = '200px'; - - }else{ - oNav.className = ''; - oLogo.style['max-width'] = '0'; + function adjustNav () { + if (window.scrollY >= changePoint) { + oNav.className = 'fixed-nav' + oLogo.style['max-width'] = '200px' + } else { + oNav.className = '' + oLogo.style['max-width'] = '0' } } - //把调整函数绑定至页面滚动事件 - window.addEventListener('scroll',adjustNav); + // 把调整函数绑定至页面滚动事件 + window.addEventListener('scroll', adjustNav) diff --git a/24 - Sticky Nav/index-start.html b/24 - Sticky Nav/index-start.html index 27ecf6c..36c45bc 100644 --- a/24 - Sticky Nav/index-start.html +++ b/24 - Sticky Nav/index-start.html @@ -54,7 +54,21 @@

    A story about getting lost.

diff --git a/24 - Sticky Nav/style.css b/24 - Sticky Nav/style.css index c2493a9..ea02845 100644 --- a/24 - Sticky Nav/style.css +++ b/24 - Sticky Nav/style.css @@ -1,22 +1,26 @@ html { box-sizing: border-box; - background:#eeeeee; - font-family:'helvetica neue'; + background: #eeeeee; + font-family: 'helvetica neue'; font-size: 20px; font-weight: 200; } + body { margin: 0; } -*, *:before, *:after { + +*, +*:before, +*:after { box-sizing: inherit; } .site-wrap { max-width: 700px; margin: 70px auto; - background:white; - padding:40px; + background: white; + padding: 40px; text-align: justify; box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.05); transform: scale(0.98); @@ -25,38 +29,38 @@ body { header { text-align: center; - height:50vh; - background:url(http://wes.io/iEgP/wow-so-deep.jpg) bottom center no-repeat; - background-size:cover; - display:flex; - align-items:center; + height: 50vh; + background: url(http://wes.io/iEgP/wow-so-deep.jpg) bottom center no-repeat; + background-size: cover; + display: flex; + align-items: center; justify-content: center; } h1 { - color:white; + color: white; font-size: 7vw; - text-shadow: 3px 4px 0 rgba(0,0,0,0.2) + text-shadow: 3px 4px 0 rgba(0, 0, 0, 0.2) } nav { - background:black; - top:0; + background: black; + top: 0; width: 100%; - transition:all 0.5s; + transition: all 0.5s; position: relative; z-index: 1; } nav ul { margin: 0; - padding:0; + padding: 0; list-style: none; - display:flex; + display: flex; } nav li { - flex:1; + flex: 1; text-align: center; display: flex; justify-content: center; @@ -64,7 +68,7 @@ nav li { } li.logo { - max-width:0; + max-width: 0; overflow: hidden; background: white; transition: all .5s; @@ -73,18 +77,18 @@ li.logo { } li.logo a { - color:black; + color: black; } nav a { text-decoration: none; - padding:20px; + padding: 20px; display: inline-block; - color:white; - transition:all 0.2s; + color: white; + transition: all 0.2s; text-transform: uppercase; } .fixed-nav { - position:fixed; + position: fixed; } \ No newline at end of file diff --git a/29 - Countdown Timer/scripts-START.js b/29 - Countdown Timer/scripts-START.js index 2d3747c..732286a 100644 --- a/29 - Countdown Timer/scripts-START.js +++ b/29 - Countdown Timer/scripts-START.js @@ -1,61 +1,58 @@ -const endTime = document.querySelector(".display__end-time"); -const leftTime = document.querySelector(".display__time-left"); -const buttons = document.querySelectorAll("button"); -const date = new Date(); -var left = 0;//剩余时间 -var end = 0;//结束时间 -var timer;//interval计时器 -leftTime.innerHTML = left;//未操作时，剩余时间显示0 - -//为button绑定点击事件 -const arr = Array.from(buttons); -arr.map(function(item){ - item.addEventListener('click',clickAction); -}); - -//监听自定义输入 -document.customForm.addEventListener('submit',function(e){ - e.preventDefault(); - updateTime(this.minutes.value*60); - updateTimer(); -}); - -//定义点击后的回调 -function clickAction(e){ - let deltaTime; - deltaTime = this.dataset.time; - updateTime(deltaTime); - - //点击后更新计时器 - updateTimer(); +const endTime = document.querySelector('.display__end-time') +const leftTime = document.querySelector('.display__time-left') +const buttons = document.querySelectorAll('button') +const date = new Date() +var left = 0// 剩余时间 +var end = 0// 结束时间 +var timer// interval计时器 +leftTime.innerHTML = left// 未操作时，剩余时间显示0 + +// 为button绑定点击事件 +const arr = Array.from(buttons) +arr.map(function (item) { + item.addEventListener('click', clickAction) +}) + +// 监听自定义输入 +document.customForm.addEventListener('submit', function (e) { + e.preventDefault() + updateTime(this.minutes.value * 60) + updateTimer() +}) + +// 定义点击后的回调 +function clickAction (e) { + let deltaTime + deltaTime = this.dataset.time + updateTime(deltaTime) + + // 点击后更新计时器 + updateTimer() } - - -//updateTime -function updateTime(delta){ - left = left + parseInt(delta,0); - end = date.getTime() + left*1000; - leftTime.innerHTML = left; - endTime.innerHTML =new Date(end).toLocaleTimeString(); +// updateTime +function updateTime (delta) { + left = left + parseInt(delta, 0) + end = date.getTime() + left * 1000 + leftTime.innerHTML = left + endTime.innerHTML = new Date(end).toLocaleTimeString() } -//每秒刷新时间 -function updateTimer(){ - //清除以前的timer - if(timer){ - clearInterval(timer); - } +// 每秒刷新时间 +function updateTimer () { + // 清除以前的timer + if (timer) { + clearInterval(timer) + } // 设置新的Timer - timer = setInterval(function(){ - if(left == 0){ - endTime.innerHTML = 'End'; - clearInterval(timer); - }else{ - left -= 1; - leftTime.innerHTML = left; - } -},1000); + timer = setInterval(function () { + if (left == 0) { + endTime.innerHTML = 'End' + clearInterval(timer) + } else { + left -= 1 + leftTime.innerHTML = left + } + }, 1000) } - diff --git a/README.md b/README.md index 872ae50..769f6f0 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@ 创建日期：2016-12-20 最后更新：2017-10-29 -> Repo by: [缉熙Soyaine](https://github.com/soyaine) +> Repo by: [未枝丫](https://github.com/soyaine) > [JavaScript30](https://javascript30.com) 教程作者：[Wes Bos](https://github.com/wesbos) > 完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*) @@ -58,16 +58,16 @@ No | Guide | Demo 16 | [Mouse Move Shadow 指南](https://github.com/dashrun/JavaScript30/blob/master/16%20-%20Mouse%20Move%20Shadow/README.md) | [文字阴影随鼠标移动在线效果](https://soyaine.github.io/JavaScript30/16%20-%20Mouse%20Move%20Shadow/index-finished-es5.html) 17 | [Sort Without Articles 指南](https://github.com/soyaine/JavaScript30/blob/master/17%20-%20Sort%20Without%20Articles/README.md) | [去前缀排序在线效果](https://soyaine.github.io/JavaScript30/17%20-%20Sort%20Without%20Articles/index-finished-Dashrun-es5.html) 18 | [Adding Up Times with Reduce 指南](https://github.com/soyaine/JavaScript30/tree/master/18%20-%20AddingUpTimesWithReduce) | [使用 Reduce 进行时间叠加效果](https://soyaine.github.io/JavaScript30/18%20-%20AddingUpTimesWithReduce/index-finished-Dashrun-es6.html) -19 | [Webcam Fun 指南](https://github.com/soyaine/JavaScript30/blob/master/19%20-%20Webcam%20Fun/README.md) | [网络摄像头及图片处理在线效果](https://github.com/soyaine/JavaScript30/blob/master/19%20-%20Webcam%20Fun/index-finished-Dashrun.html) -20 | [Speech Detection指南](https://github.com/soyaine/JavaScript30/blob/master/20%20-%20Speech%20Detection/README.md) | [Speech Detection效果](https://github.com/soyaine/JavaScript30/blob/master/20%20-%20Speech%20Detection/index-finished-Dashrun.html) -21 | [Geolocation指南](https://github.com/soyaine/JavaScript30/blob/master/21%20-%20Geolocation/README.md) | [Geolocation效果](https://github.com/soyaine/JavaScript30/blob/master/21%20-%20Geolocation/index-finished-Dashrun.html) -22 | [Follow Along Link Highlighter指南](https://github.com/soyaine/JavaScript30/blob/master/22%20-%20Follow%20Along%20Link%20Highlighter/README.md) | [Follow Along Link Highlighter效果](https://github.com/soyaine/JavaScript30/blob/master/22%20-%20Follow%20Along%20Link%20Highlighter/index-finished-Dashrun.html) -23 | [Speech Synthesis指南](https://github.com/soyaine/JavaScript30/blob/master/23%20-%20Speech%20Synthesis/README.md) | [Speech Synthesis效果](https://github.com/soyaine/JavaScript30/blob/master/23%20-%20Speech%20Synthesis/index-finished-Dashrun.html) -24 | [Sticky Nav指南](https://github.com/soyaine/JavaScript30/blob/master/24%20-%20Sticky%20Nav/README.md) | [Sticky Nav效果](https://github.com/soyaine/JavaScript30/blob/master/24%20-%20Sticky%20Nav/index-finished-Dashrun.html) -25 | [Event Related指南](https://github.com/soyaine/JavaScript30/blob/master/25%20-%20Event%20Related/README.md) | [Event Related效果](https://github.com/soyaine/JavaScript30/blob/master/25%20-%20Event%20Related/index-finished-Dashrun.html) -26 | [Stripe Follow Along Nav指南](https://github.com/soyaine/JavaScript30/blob/master/26%20-%20Stripe%20Follow%20Along%20Nav/README.md) | [Strip Follow Along Nav效果](https://github.com/soyaine/JavaScript30/blob/master/26%20-%20Stripe%20Follow%20Along%20Nav/index-finished-Dashrun.html) -27 | [Click and Drag指南](https://github.com/soyaine/JavaScript30/blob/master/27%20-%20Click%20and%20Drag/README.md) | [Click and Drag效果](https://github.com/soyaine/JavaScript30/blob/master/27%20-%20Click%20and%20Drag/index-finished-Dashrun.html) -28 | [Video Speed Controller指南](https://github.com/soyaine/JavaScript30/blob/master/28%20-%20Video%20Speed%20Controller/README.md) | [Video Speed Controller效果](https://github.com/soyaine/JavaScript30/blob/master/28%20-%20Video%20Speed%20Controller/index-finished-Dashrun.html) +19 | [Webcam Fun 指南](https://github.com/soyaine/JavaScript30/blob/master/19%20-%20Webcam%20Fun/README.md) | [网络摄像头及图片处理在线效果](https://soyaine.github.io/JavaScript30/19%20-%20Webcam%20Fun/index-finished-Dashrun.html) +20 | [Speech Detection指南](https://github.com/soyaine/JavaScript30/blob/master/20%20-%20Speech%20Detection/README.md) | [Speech Detection效果](https://soyaine.github.io/JavaScript30/20%20-%20Speech%20Detection/index-finished-Dashrun.html) +21 | [Geolocation指南](https://github.com/soyaine/JavaScript30/blob/master/21%20-%20Geolocation/README.md) | [Geolocation效果](https://soyaine.github.io/JavaScript30/21%20-%20Geolocation/index-finished-Dashrun.html) +22 | [Follow Along Link Highlighter指南](https://github.com/soyaine/JavaScript30/blob/master/22%20-%20Follow%20Along%20Link%20Highlighter/README.md) | [Follow Along Link Highlighter效果](https://soyaine.github.io/JavaScript30/22%20-%20Follow%20Along%20Link%20Highlighter/index-finished-Dashrun.html) +23 | [Speech Synthesis指南](https://github.com/soyaine/JavaScript30/blob/master/23%20-%20Speech%20Synthesis/README.md) | [Speech Synthesis效果](https://soyaine.github.io/JavaScript30/23%20-%20Speech%20Synthesis/index-finished-Dashrun.html) +24 | [Sticky Nav指南](https://github.com/soyaine/JavaScript30/blob/master/24%20-%20Sticky%20Nav/README.md) | [Sticky Nav效果](https://soyaine.github.io/JavaScript30/24%20-%20Sticky%20Nav/index-finished-Dashrun.html) +25 | [Event Related指南](https://github.com/soyaine/JavaScript30/blob/master/25%20-%20Event%20Related/README.md) | [Event Related效果](https://soyaine.github.io/JavaScript30/25%20-%20Event%20Related/index-finished-Dashrun.html) +26 | [Stripe Follow Along Nav指南](https://github.com/soyaine/JavaScript30/blob/master/26%20-%20Stripe%20Follow%20Along%20Nav/README.md) | [Strip Follow Along Nav效果](https://soyaine.github.io/JavaScript30/26%20-%20Stripe%20Follow%20Along%20Nav/index-finished-Dashrun.html) +27 | [Click and Drag指南](https://github.com/soyaine/JavaScript30/blob/master/27%20-%20Click%20and%20Drag/README.md) | [Click and Drag效果](https://soyaine.github.io/JavaScript30/27%20-%20Click%20and%20Drag/index-finished-Dashrun.html) +28 | [Video Speed Controller指南](https://github.com/soyaine/JavaScript30/blob/master/28%20-%20Video%20Speed%20Controller/README.md) | [Video Speed Controller效果](https://soyaine.github.io/JavaScript30/28%20-%20Video%20Speed%20Controller/index-finished-Dashrun.html) 29 | Countdown Timer | - 30 | Whack A Mole | - @@ -81,7 +81,7 @@ Name | Contribution [@zzh466](http://github.com/zzh466) | Review [@Xing Liu](https://github.com/S1ngS1ng) | Review [@大史快跑Dashrun](https://github.com/dashrun) | No.[16](https://github.com/soyaine/JavaScript30/tree/master/16%20-%20Mouse%20Move%20Shadow).[17](https://github.com/soyaine/JavaScript30/tree/master/17%20-%20Sort%20Without%20Articles).[18](https://github.com/soyaine/JavaScript30/tree/master/18%20-%20AddingUpTimesWithReduce).[19](https://github.com/soyaine/JavaScript30/blob/master/19%20-%20Webcam%20Fun).[20](https://github.com/soyaine/JavaScript30/tree/master/20%20-%20Speech%20Detection).[21](https://github.com/soyaine/JavaScript30/tree/master/21%20-%20Geolocation).[22](https://github.com/soyaine/JavaScript30/tree/master/22%20-%20Follow%20Along%20Link%20Highlighter).[23](https://github.com/soyaine/JavaScript30/tree/master/23%20-%20Speech%20Synthesis).[24](https://github.com/soyaine/JavaScript30/tree/master/24%20-%20Sticky%20Nav).[25](https://github.com/soyaine/JavaScript30/tree/master/25%20-%20Event%20Related).[26](https://github.com/soyaine/JavaScript30/tree/master/26%20-%20Strip%20Follow%20Along%20Nav).[27](https://github.com/soyaine/JavaScript30/tree/master/27%20-%20Click%20and%20Drag).[28](https://github.com/soyaine/JavaScript30/tree/master/28%20-%20Video%20Speed%20Controller) -[@缉熙Soyaine](https://github.com/soyaine) | No.[1](https://github.com/soyaine/JavaScript30/tree/master/01%20-%20JavaScript%20Drum%20Kit).[2](https://github.com/soyaine/JavaScript30/tree/master/02%20-%20JS%20%2B%20CSS%20Clock).[3](https://github.com/soyaine/JavaScript30/tree/master/03%20-%20CSS%20%Variables).[4](https://github.com/soyaine/JavaScript30/tree/master/04%20-%20Array%20Cardio%20Day%201).[5](https://github.com/soyaine/JavaScript30/blob/master/05%20-%20Flex%20Panel%20Gallery).[6](https://github.com/soyaine/JavaScript30/blob/master/06%20-%20Type%20Ahead).[7](https://github.com/soyaine/JavaScript30/tree/master/07%20-%20Array%20Cardio%20Day%202).[8](https://github.com/soyaine/JavaScript30/tree/master/08%20-%20Fun%20with%20HTML5%20Canvas).[9](https://github.com/soyaine/JavaScript30/blob/master/09%20-%20Dev%20Tools%20Domination).[10](https://github.com/soyaine/JavaScript30/blob/master/10%20-%20Hold%20Shift%20and%20Check%20Checkboxes/README.md).[12](https://github.com/soyaine/JavaScript30/tree/master/12%20-%20Key%20Sequence%20Detection/README.md).[13](https://github.com/soyaine/JavaScript30/blob/master/13%20-%20Slide%20in%20on%20Scroll/README.md).[14](https://github.com/soyaine/JavaScript30/tree/master/14%20-%20JavaScript%20References%20VS%20Copying) +[@未枝丫](https://github.com/soyaine) | No.[1](https://github.com/soyaine/JavaScript30/tree/master/01%20-%20JavaScript%20Drum%20Kit).[2](https://github.com/soyaine/JavaScript30/tree/master/02%20-%20JS%20%2B%20CSS%20Clock).[3](https://github.com/soyaine/JavaScript30/tree/master/03%20-%20CSS%20%Variables).[4](https://github.com/soyaine/JavaScript30/tree/master/04%20-%20Array%20Cardio%20Day%201).[5](https://github.com/soyaine/JavaScript30/blob/master/05%20-%20Flex%20Panel%20Gallery).[6](https://github.com/soyaine/JavaScript30/blob/master/06%20-%20Type%20Ahead).[7](https://github.com/soyaine/JavaScript30/tree/master/07%20-%20Array%20Cardio%20Day%202).[8](https://github.com/soyaine/JavaScript30/tree/master/08%20-%20Fun%20with%20HTML5%20Canvas).[9](https://github.com/soyaine/JavaScript30/blob/master/09%20-%20Dev%20Tools%20Domination).[10](https://github.com/soyaine/JavaScript30/blob/master/10%20-%20Hold%20Shift%20and%20Check%20Checkboxes/README.md).[12](https://github.com/soyaine/JavaScript30/tree/master/12%20-%20Key%20Sequence%20Detection/README.md).[13](https://github.com/soyaine/JavaScript30/blob/master/13%20-%20Slide%20in%20on%20Scroll/README.md).[14](https://github.com/soyaine/JavaScript30/tree/master/14%20-%20JavaScript%20References%20VS%20Copying) ## JOIN US 如果对这个系列的指南有什么改进的想法，欢迎[提 issue](https://github.com/soyaine/JavaScript30/issues)，如果你也想参与写作，请看 [wiki](https://github.com/soyaine/JavaScript30/wiki/%E6%8C%87%E5%8D%97%E7%BB%93%E6%9E%84%E8%AF%B4%E6%98%8E)，并联系 Soyaine。 diff --git a/bg.jpg b/bg.jpg new file mode 100644 index 0000000..ded3312 Binary files /dev/null and b/bg.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..dcaa2bb --- /dev/null +++ b/index.html @@ -0,0 +1,132 @@ + + + + + + + JavaScript 30 + + + +
+
+

JavaScript30 —— 30 天纯 JavaScript 编程练习

+
+
+ +
+ +
未完待续···
+ + +