From fdbf02e9973b79a4ed38648c5355820c8adc6b3d Mon Sep 17 00:00:00 2001 From: Dash <389399428@qq.com> Date: Fri, 25 Aug 2017 10:03:24 +0800 Subject: [PATCH 1/2] try to finish the work of day16 (#20) by dashrun * try to finish the work of day16 * modify some details to improve the performance of readme.md as asked --- day16 - mouseMoveShadow/README.md | 55 +++++++++++++ day16 - mouseMoveShadow/effects.png | Bin 0 -> 36309 bytes .../index-finished-es5.html | 62 +++++++++++++++ .../index-finished-es6.html | 72 ++++++++++++++++++ day16 - mouseMoveShadow/index-start.html | 40 ++++++++++ day16 - mouseMoveShadow/style.css | 6 ++ 6 files changed, 235 insertions(+) create mode 100644 day16 - mouseMoveShadow/README.md create mode 100644 day16 - mouseMoveShadow/effects.png create mode 100644 day16 - mouseMoveShadow/index-finished-es5.html create mode 100644 day16 - mouseMoveShadow/index-finished-es6.html create mode 100644 day16 - mouseMoveShadow/index-start.html create mode 100644 day16 - mouseMoveShadow/style.css diff --git a/day16 - mouseMoveShadow/README.md b/day16 - mouseMoveShadow/README.md new file mode 100644 index 0000000..6eb91ee --- /dev/null +++ b/day16 - mouseMoveShadow/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/day16 - mouseMoveShadow/effects.png b/day16 - mouseMoveShadow/effects.png new file mode 100644 index 0000000000000000000000000000000000000000..76a04c16654c064ef1a4c827458c4f2c5c01b047 GIT binary patch literal 36309 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

qv=$Jd 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 + + + + Mouse Shadow-ES5 + + + +

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

🔥WOAH!

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

🔥WOAH!

+
+ + + + + + diff --git a/day16 - mouseMoveShadow/style.css b/day16 - mouseMoveShadow/style.css new file mode 100644 index 0000000..9d543f3 --- /dev/null +++ b/day16 - mouseMoveShadow/style.css @@ -0,0 +1,6 @@ +@charset "UTF-8"; +/** + * @dashrun (@389399428@qq.com) + * @date 2017-08-20 + * @version $1.0 + */ From b85c3ffbbbef2c3911d02df9441d8b59ee858dcf Mon Sep 17 00:00:00 2001 From: soyaine Date: Fri, 25 Aug 2017 19:57:04 +0800 Subject: [PATCH 2/2] update day 15 --- 15 - LocalStorage/README.md | 83 +++++++++++++++++++++------- 15 - LocalStorage/index-SOYAINE.html | 6 +- 2 files changed, 65 insertions(+), 24 deletions(-) diff --git a/15 - LocalStorage/README.md b/15 - LocalStorage/README.md index f5697e3..80173b6 100644 --- a/15 - LocalStorage/README.md +++ b/15 - LocalStorage/README.md @@ -4,33 +4,74 @@ > 简介:[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 -最后更新:2017-08-05 +最后更新:2017-08-10 ## 实现效果 -## 知识点 -## 过程指南 +我们的目的是使网页模拟菜单的效果,在页面中添加新的菜品,而且在页面刷新之后也不清空。 -默认情况下,在表单空间拥有焦点时按下 Enter 键或者点击提交按钮,会提交表单,提交时浏览器会在将请求发送给服务器之前触发 submit 事件,可以先添加事件监听后看看效果: -```js -function addItem(e) { - console.log('hello'); -} +现在的初始页面中,点击提交按钮(Add Item)时页面默认触发 `submit` 事件,并重新加载页面,这导致重新加载之后的页面中,已丢失刚提交的内容。页面所用到的 CSS 文件已经完成了,我们需要做的是完成 JavaScript 部分的内容,以实现目标效果。 -addItems.addEventListener('submit', addItem); -``` -结果就是 Console 中闪现 hello 后刷新整个页面,这是 submit 的默认行为,在当前的场景中不适用,先去除。 -```js -function addItem(e) { - e.preventDefault(); -} -``` +这一个挑战所用时间可能比之前的稍稍长一些,但理解了 localStorage 的机制,想明白菜单的实现之后,就会一目了然了,带上耐心我们开始吧~ +## 知识点 +- Event + - [event.preventDefault](https://developer.mozilla.org/zh-CN/docs/Web/API/Event/preventDefault) + - [eventTarget.addEventListener](https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener) +- [localStorage](https://developer.mozilla.org/zh-CN/docs/Web/API/Storage/LocalStorage) + - `localStorage.setItem()` + - `localStorage.getItem()` +- [JSON](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON) + - `JSON.stringify()` + - `JSON.parse()` -this 获取当前 form,是从 submit 事件获取到的。 +## 过程指南 -this.querySelector('[name=item]'); 获取其中的输入框 +1. 默认情况下,在表单空间拥有焦点时按下 `Enter` 键或者点击提交按钮,会提交表单,提交时,浏览器会在发送请求给服务器之前触发 `submit` 事件,为了验证这个行为,我们可以添加事件监听后看看效果,此处先写一个处理函数: + ```js + function addItem(e) { + console.log('hello'); + } -this.reset(); -以清空 input 中正在输入的值 + addItems.addEventListener('submit', addItem); + ``` + 点击按钮后发现 `submit` 事件触发后的结果是, Console 中闪现 hello 后刷新整个页面,这是 `submit` 的默认行为,在当前的场景中不适用,所以我们需要先去除此事件的默认行为。 + ```js + function addItem(e) { + e.preventDefault(); + } + ``` -使用 localStorage 的时候,直接传入 items 得到的是 [object Object],所以需要在把数据传进去之前就把内容转换成 String 类型的数据。 \ No newline at end of file +2. 下面我们开始改造 `addItem` 方法,以实现我们的功能。 + 首先在事件监听中,`this` 可以获取当前 form 即我们为其添加事件监听的 `addItem` 元素,所以可以借此方便的获取输入框中的值。在 `addItem()` 方法中获取输入,并构造一个对象 `item` 来存储这个信息,: + ```js + /* function addItem(){} 中 */ + const text = this.querySelector('[name=item]').value; + const item = { + text, // ES6中对 text: text, 的简写 + done: false // 为后续的勾选做准备 + } + ``` +3. 把对象放入此前声明好的数组 `items`,同时更新数据,包括页面中的 HTML 内容、LocalStorage。 + ```js + /* function addItem(){} 中 */ + items.push(item); + this.reset();// 以清空 input 中正在输入的值 + populateList(items, itemsList); + localStorage.setItem('items', JSON.stringify(items)); + ``` + - **HTML 内容更新** + 声明一个 `populateList` 方法来更新页面的内容。接收需要更新的数组作为参数,根据数组里的内容构造一组 `
  • ` 组成的列表,并且加上一些标识信息,以助于之后需要实现的选中功能。 + ```js + function populateList(plates = [], plateslist) { + plateslist.innerHTML = plates.map((plate, i) => { + return ` +
  • + + +
  • + `; + }).join(''); + } + ``` + - **LocalStorage 更新** + 我们利用 LocalStorage 把信息存到本地,从而可以保证刷新后内容不变。但使用 `localStorage` 的时候,直接把 `items` 传入得到的值是 [object Object],所以需要在把数据传进去之前就把内容转换成 String 类型的数据,之后读取时也使用 `JSON.parse()` 来将数据转换成 JSON 格式。 \ No newline at end of file diff --git a/15 - LocalStorage/index-SOYAINE.html b/15 - LocalStorage/index-SOYAINE.html index c8d8ba2..a450fa7 100644 --- a/15 - LocalStorage/index-SOYAINE.html +++ b/15 - LocalStorage/index-SOYAINE.html @@ -24,8 +24,7 @@

    LOCAL TAPAS

    - - + @@ -72,7 +71,8 @@

    LOCAL TAPAS

    itemsList.addEventListener('click', toggleDone); populateList(items, itemsList); - + + // 延伸部分 const checkAllBtn = document.querySelector('.check-all'); const unCheckAllBtn = document.querySelector('.uncheck-all'); const deleteAllBtn = document.querySelector('.delete-all');