diff --git a/16 - Mouse Move Shadow/README.md b/16 - Mouse Move Shadow/README.md new file mode 100644 index 0000000..6eb91ee --- /dev/null +++ b/16 - Mouse Move Shadow/README.md @@ -0,0 +1,55 @@ +# 16 文字阴影的鼠标随动效果 + +> 本篇作者：©[大史快跑Dashrun](https://github.com/dashrun)——Chinasoft Frontend Web Developer + +> 简介：[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 16 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*) + +> 创建时间：2017-08-20 +最后更新：2017-08-21 + +## 挑战任务 + 初始文件`index-start.html`中提供了一个包含了`h1`元素的`div`元素，`h1`元素已经设置了`text-Shadow`的样式。本次编程挑战中需要完成的效果是根据用户当前的鼠标位置来操纵文字阴影的位置。 + +## 实现效果 +![结果展示](https://github.com/dashrun/vanilla-javascript-30/blob/master/day16-mouseMoveShadow/effects.png) + +## 基本知识 +`text-shadow`样式为标准CSS3样式，用于添加**一个或多个**文字阴影，用于其的语法格式为： +```css +text-shadow: h-shadow v-shadow blur color + +``` + +## 过程指南 +1.在`script`标签中，我们使用3个变量，一个指向`div`元素，一个指向其子元素`h1`，最后一个变量`factor`用于标记阴影距离`h1`中心的距离和鼠标距离`h1`中心距离的比例，用于计算阴影的具体位置。 + +2.在`hero`元素上监听鼠标移动事件`mousemove`，并添加事件处理的回调函数`shadowMove`. +```js +hero.addEventListener('mousemove',shadowMove); +``` + +3.为获得第一个阴影的瞬时位置，需要通过鼠标位置距离`h1`中心的距离乘以`factor`系数来获得，`pos`表示鼠标当前位置的坐标,range指代`hero`元素的宽和高： +```js + var disX = parseInt((pos.x-range.x/2)*factor); + var disY = parseInt((pos.y-range.y/2)*factor); +``` +4.从事件发生的event对象中获取需要的值： +```js + var range = { + x:hero.offsetWidth, + y:hero.offsetHeight + } + var pos = { + x:e.target.offsetLeft+e.offsetX, + y:e.target.offsetTop+e.offsetY + } +``` +5.计算出`h1`元素第一个阴影位置后，可以以坐标镜像或旋转90°等不同的方式来生成其他阴影，本例中我们采用绕`h1`元素中心旋转90°的方式共生成4个阴影： +```js + text.style.textShadow = ` + ${xWalk}px ${yWalk}px 0 rgba(255,0,255,0.7), + ${xWalk * -1}px ${yWalk}px 0 rgba(0,255,255,0.7), + ${yWalk}px ${xWalk * -1}px 0 rgba(0,255,0,0.7), + ${yWalk * -1}px ${xWalk}px 0 rgba(0,0,255,0.7) + `; +``` diff --git a/16 - Mouse Move Shadow/effects.png b/16 - Mouse Move Shadow/effects.png new file mode 100644 index 0000000..76a04c1 Binary files /dev/null and b/16 - Mouse Move Shadow/effects.png differ diff --git a/16 - Mouse Move Shadow/index-finished-es5.html b/16 - Mouse Move Shadow/index-finished-es5.html new file mode 100644 index 0000000..93f97b4 --- /dev/null +++ b/16 - Mouse Move Shadow/index-finished-es5.html @@ -0,0 +1,62 @@ + + + + + Mouse Shadow-ES5 + + + +
+

🔥WOAH!

+
+ + + + + + diff --git a/16 - Mouse Move Shadow/index-finished-es6.html b/16 - Mouse Move Shadow/index-finished-es6.html new file mode 100644 index 0000000..8d015b9 --- /dev/null +++ b/16 - Mouse Move Shadow/index-finished-es6.html @@ -0,0 +1,72 @@ + + + + + Mouse Shadow + + + +
+

🔥WOAH!

+
+ + + + + + diff --git a/16 - Mouse Move Shadow/index-start.html b/16 - Mouse Move Shadow/index-start.html new file mode 100644 index 0000000..543cb51 --- /dev/null +++ b/16 - Mouse Move Shadow/index-start.html @@ -0,0 +1,40 @@ + + + + + Mouse Shadow + + + +
+

🔥WOAH!

+
+ + + + + + diff --git a/16 - Mouse Move Shadow/style.css b/16 - Mouse Move Shadow/style.css new file mode 100644 index 0000000..9d543f3 --- /dev/null +++ b/16 - Mouse Move Shadow/style.css @@ -0,0 +1,6 @@ +@charset "UTF-8"; +/** + * @dashrun (@389399428@qq.com) + * @date 2017-08-20 + * @version $1.0 + */ diff --git a/17 - Sort Without Articles/README.md b/17 - Sort Without Articles/README.md new file mode 100644 index 0000000..a42fa14 --- /dev/null +++ b/17 - Sort Without Articles/README.md @@ -0,0 +1,42 @@ +# 17 数组的去前缀排序 + +> 本篇作者：©[大史快跑Dashrun](https://github.com/dashrun)——Chinasoft Frontend Web Developer + +> 简介：[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 17 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*) + +> 创建时间：2017-08-23 +最后更新：2017-08-24 + +## 挑战任务 + 初始文件`index-start.html`中提供了一个无序列表元素，并在`script`标签中提供了一个字符串数组。请为这些字符串排序，要求去除字符串中的`The`，`A`以及`An`的前缀后再进行排序，并把排序后的结果作为列表项展示在无序列表中。 + +## 实现效果 +![结果展示](https://github.com/dashrun/vanilla-javascript-30/blob/master/day17-SortWithoutArticles/effects.png) + +## 基本思路 +1.基本的编程任务有两个要点，即**排序**和**展示**;
+2.数组排序部分最外层即为`Array.sort(arr)`函数，内层实现具体排序规则;
+3.展示部分即将排列好的新数组拼接成带有标签的HTML元素，然后一次性插入到列表中。 + +## 过程指南(以非ES6版本为例) +1.声明去前缀函数，使用`String.replace()`函数实现，第一参数使用字面量正则表达式。 +```js +function delPrefix(item){ + return item.replace(/^(The|A|An)\s{1}/,''); +} +``` +2.使用`Array.sort()`对数组进行排序，将数组中逐项使用`delPrefix()`去掉前缀后再进行对比。 +```js +var sortedbands = bands.sort(function(a,b){ + return delPrefix(a) > delPrefix(b) ? 1 : -1; +}); +``` +3.使用选择器选中无序列表`#bands`，将排序后的数组作为列表项插入其中。 +```js + document.getElementById('bands').innerHTML = '
  • '+arr.join('
  • ')+'
    • '; +``` + +## 细节知识点 +1.`Array.prototype.sort(*param*)`方法虽然有返回值，但排序结果也影响原数组，在非ES6版本的代码中，我们使用了指向原数组的变量`bands`,而在ES6版本的代码中将排序后的结果赋值给了新的变量sortedbands，从结果可以看出，两者达到了相同的目的。 + +2.在ES6版本的代码结尾处，我们修改原数组`bands`中的第一项，并在控制台打印出排序后的数组`sortedbands`，从结果可以看出`sortedbands`也受到了影响，由此可以看出`Array.prototype.sort()`函数只是返回了一个指向原数组的引用，而并没有生成新的数组。 \ No newline at end of file diff --git a/17 - Sort Without Articles/effects.png b/17 - Sort Without Articles/effects.png new file mode 100644 index 0000000..63fb6be Binary files /dev/null and b/17 - Sort Without Articles/effects.png differ diff --git a/17 - Sort Without Articles/index-finished-Dashrun-es5.html b/17 - Sort Without Articles/index-finished-Dashrun-es5.html new file mode 100644 index 0000000..0f1523d --- /dev/null +++ b/17 - Sort Without Articles/index-finished-Dashrun-es5.html @@ -0,0 +1,74 @@ + + + + + Sort Without Articles-es5 + + + + + + + + + + + diff --git a/17 - Sort Without Articles/index-finished-Dashrun-es6.html b/17 - Sort Without Articles/index-finished-Dashrun-es6.html new file mode 100644 index 0000000..5204b8f --- /dev/null +++ b/17 - Sort Without Articles/index-finished-Dashrun-es6.html @@ -0,0 +1,66 @@ + + + + + Sort Without Articles-es6 + + + + + + + + + + + diff --git a/17 - Sort Without Articles/index-start.html b/17 - Sort Without Articles/index-start.html new file mode 100644 index 0000000..9bbd250 --- /dev/null +++ b/17 - Sort Without Articles/index-start.html @@ -0,0 +1,53 @@ + + + + + Sort Without Articles + + + + + + + + + + + diff --git a/17 - Sort Without Articles/style.css b/17 - Sort Without Articles/style.css new file mode 100644 index 0000000..9d543f3 --- /dev/null +++ b/17 - Sort Without Articles/style.css @@ -0,0 +1,6 @@ +@charset "UTF-8"; +/** + * @dashrun (@389399428@qq.com) + * @date 2017-08-20 + * @version $1.0 + */ diff --git a/day17-SortWithoutArticles/README.md b/day17-SortWithoutArticles/README.md new file mode 100644 index 0000000..a42fa14 --- /dev/null +++ b/day17-SortWithoutArticles/README.md @@ -0,0 +1,42 @@ +# 17 数组的去前缀排序 + +> 本篇作者：©[大史快跑Dashrun](https://github.com/dashrun)——Chinasoft Frontend Web Developer + +> 简介：[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 17 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*) + +> 创建时间：2017-08-23 +最后更新：2017-08-24 + +## 挑战任务 + 初始文件`index-start.html`中提供了一个无序列表元素，并在`script`标签中提供了一个字符串数组。请为这些字符串排序，要求去除字符串中的`The`，`A`以及`An`的前缀后再进行排序，并把排序后的结果作为列表项展示在无序列表中。 + +## 实现效果 +![结果展示](https://github.com/dashrun/vanilla-javascript-30/blob/master/day17-SortWithoutArticles/effects.png) + +## 基本思路 +1.基本的编程任务有两个要点，即**排序**和**展示**;
    +2.数组排序部分最外层即为`Array.sort(arr)`函数，内层实现具体排序规则;
    +3.展示部分即将排列好的新数组拼接成带有标签的HTML元素，然后一次性插入到列表中。 + +## 过程指南(以非ES6版本为例) +1.声明去前缀函数，使用`String.replace()`函数实现，第一参数使用字面量正则表达式。 +```js +function delPrefix(item){ + return item.replace(/^(The|A|An)\s{1}/,''); +} +``` +2.使用`Array.sort()`对数组进行排序，将数组中逐项使用`delPrefix()`去掉前缀后再进行对比。 +```js +var sortedbands = bands.sort(function(a,b){ + return delPrefix(a) > delPrefix(b) ? 1 : -1; +}); +``` +3.使用选择器选中无序列表`#bands`，将排序后的数组作为列表项插入其中。 +```js + document.getElementById('bands').innerHTML = '
  • '+arr.join('
  • ')+'
    • '; +``` + +## 细节知识点 +1.`Array.prototype.sort(*param*)`方法虽然有返回值，但排序结果也影响原数组，在非ES6版本的代码中，我们使用了指向原数组的变量`bands`,而在ES6版本的代码中将排序后的结果赋值给了新的变量sortedbands，从结果可以看出，两者达到了相同的目的。 + +2.在ES6版本的代码结尾处，我们修改原数组`bands`中的第一项，并在控制台打印出排序后的数组`sortedbands`，从结果可以看出`sortedbands`也受到了影响，由此可以看出`Array.prototype.sort()`函数只是返回了一个指向原数组的引用，而并没有生成新的数组。 \ No newline at end of file diff --git a/day17-SortWithoutArticles/effects.png b/day17-SortWithoutArticles/effects.png new file mode 100644 index 0000000..63fb6be Binary files /dev/null and b/day17-SortWithoutArticles/effects.png differ diff --git a/day17-SortWithoutArticles/index-finished-Dashrun-es5.html b/day17-SortWithoutArticles/index-finished-Dashrun-es5.html new file mode 100644 index 0000000..0f1523d --- /dev/null +++ b/day17-SortWithoutArticles/index-finished-Dashrun-es5.html @@ -0,0 +1,74 @@ + + + + + Sort Without Articles-es5 + + + + + + + + + + + diff --git a/day17-SortWithoutArticles/index-finished-Dashrun-es6.html b/day17-SortWithoutArticles/index-finished-Dashrun-es6.html new file mode 100644 index 0000000..5204b8f --- /dev/null +++ b/day17-SortWithoutArticles/index-finished-Dashrun-es6.html @@ -0,0 +1,66 @@ + + + + + Sort Without Articles-es6 + + + + + + + + + + + diff --git a/day17-SortWithoutArticles/index-start.html b/day17-SortWithoutArticles/index-start.html new file mode 100644 index 0000000..9bbd250 --- /dev/null +++ b/day17-SortWithoutArticles/index-start.html @@ -0,0 +1,53 @@ + + + + + Sort Without Articles + + + + + + + + + + + diff --git a/day17-SortWithoutArticles/style.css b/day17-SortWithoutArticles/style.css new file mode 100644 index 0000000..9d543f3 --- /dev/null +++ b/day17-SortWithoutArticles/style.css @@ -0,0 +1,6 @@ +@charset "UTF-8"; +/** + * @dashrun (@389399428@qq.com) + * @date 2017-08-20 + * @version $1.0 + */