Skip to content

Commit f55e0ab

Browse files
soyainesoyaine
committed
1 parent 84f6d0b commit f55e0ab

File tree

9 files changed

+14
-10
lines changed

9 files changed

+14
-10
lines changed

‎01 - JavaScript Drum Kit/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ audio.play();
9292

9393
### 如何使页面按钮恢复原状？
9494

95-
利用一个叫 [`transitionened`](https://developer.mozilla.org/zh-CN/docs/Web/Events/transitionend) 的事件，它在 CSS transition 结束后会被触发。我们就可以利用这个事件，在每次打鼓的效果（尺寸变大、颜色变化）完成之后，去除相应样式。
95+
利用一个叫 [`transitionend`](https://developer.mozilla.org/zh-CN/docs/Web/Events/transitionend) 的事件，它在 CSS transition 结束后会被触发。我们就可以利用这个事件，在每次打鼓的效果（尺寸变大、颜色变化）完成之后，去除相应样式。
9696

9797
在这个页面中，发生 `transition` 的样式属性不止一个（`box-shadow`, `transform`, `border-color`），所以需要添加一个判断语句，使每发生一次按键事件时，只去除一次样式。
9898

‎04 - Array Cardio Day 1/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ console.table(thing)
2323

2424
1. 筛选 16 世纪出生的发明家
2525
2. 展示他们的姓和名
26-
3. 把他们按照年龄从大到小进行排序
26+
3. 把他们按照出生日期从大到小进行排序
2727
4. 计算所有的发明家加起来一共活了多少岁
2828
5. 按照他们活了多久来进行排序
2929
6. 筛选出一个网页里含有某个词语的标题

‎14 - JavaScript References VS Copying/README.md

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
> 简介：[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 14 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*)
55
66
> 创建时间：2017-07-19
7-
最后更新：2017-07-21
7+
最后更新：2018-12-05
88

99
## 实现效果
1010

@@ -98,6 +98,8 @@
9898

9999
使用 `Object.assign(target, ...sources)` 时，后来的源对象的属性值，将会覆盖它之前的对象的属性。所以可以先复制 `person` 之后，再赋给属性新的值。
100100

101+
需要注意的是：这个例子里面，我们用的数组和对象都只是一层嵌套，Lodash 有一个深度复制的方法，但使用之前需要多考虑一下。
102+
101103
```js
102104
const cap2 = Object.assign({}, person, { number: 99, age: 12 });
103105
console.log(cap2); // Object {name: "Wes Bos", age: 12, number: 99}
@@ -122,8 +124,7 @@
122124
console.log(dev);
123125
console.log(dev2);
124126
```
125-
126-
最后需要注意的是：在前面的例子里面，我们用的数组和对象都只是一层嵌套，Lodash 有一个深度复制的方法，但你使用之前需要多考虑一下。
127+
127128

128129
OVER~\(^o^)/~
129130

‎15 - LocalStorage/README.md

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
> 简介：[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 15 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*)
55
66
> 创建时间：2017-07-24
7-
最后更新：2017-08-10
7+
最后更新：2018-12-05
88

99
## 实现效果
1010
我们的目的是使网页模拟菜单的效果，在页面中添加新的菜品，而且在页面刷新之后也不清空。
@@ -74,4 +74,7 @@
7474
}
7575
```
7676
- **LocalStorage 更新**
77-
我们利用 LocalStorage 把信息存到本地，从而可以保证刷新后内容不变。但使用 `localStorage` 的时候，直接把 `items` 传入得到的值是 [object Object]，所以需要在把数据传进去之前就把内容转换成 String 类型的数据，之后读取时也使用 `JSON.parse()` 来将数据转换成 JSON 格式。
77+
我们利用 LocalStorage 把信息存到本地，从而可以保证刷新后内容不变。但使用 `localStorage` 的时候，直接把 `items` 传入得到的值是 [object Object]，所以需要在把数据传进去之前就把内容转换成 String 类型的数据，之后读取时也使用 `JSON.parse()` 来将数据转换成 JSON 格式。
78+
79+
> 来自 [@diabloevagto](https://github.com/diabloevagto) 在 [issue](https://github.com/soyaine/JavaScript30/issues/32) 里的补充：
80+
> 这样的原因是因为 localStorage 里面只会储存 String 类型数据，如果传入的是非 String 则会直接使用 toString 转换：`({}).toString() //"[object Object]"`，这时候就会发生异常，所以才需要先使用 `JSON.stringify()` 将 Object 转换成 json 格式，读取出来之后再利用 `JSON.parse()` 转换为 Object。

‎26 - Strip Follow Along Nav/README.md renamed to ‎26 - Stripe Follow Along Nav/README.md

File renamed without changes.

‎26 - Strip Follow Along Nav/effect.png renamed to ‎26 - Stripe Follow Along Nav/effect.png

File renamed without changes.

‎26 - Strip Follow Along Nav/index-finished-Dashrun.html renamed to ‎26 - Stripe Follow Along Nav/index-finished-Dashrun.html

File renamed without changes.

‎26 - Strip Follow Along Nav/index-start.html renamed to ‎26 - Stripe Follow Along Nav/index-start.html

File renamed without changes.

‎README.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
# JavaScript30 - 一个月纯 JS 挑战中文指南
22

33
创建日期：2016-12-20
4-
最后更新：2017-10-29
4+
最后更新：2018-12-05
55

66
> Repo by: [未枝丫](https://github.com/soyaine)
77
> [JavaScript30](https://javascript30.com) 教程作者：[Wes Bos](https://github.com/wesbos)
@@ -42,7 +42,7 @@ No | Guide | Demo
4242
--- | --- | ---
4343
1 | [JavaScript Drum Kit 指南](https://github.com/soyaine/JavaScript30/tree/master/01%20-%20JavaScript%20Drum%20Kit) | [纯 JS 模拟敲鼓效果](http://soyaine.github.io/JavaScript30/01%20-%20JavaScript%20Drum%20Kit/index-SOYAINE.html)
4444
2 | [JS + CSS Clock 指南](https://github.com/soyaine/JavaScript30/tree/master/02%20-%20JS%20%2B%20CSS%20Clock) | [纯 JavaScript+CSS 时钟效果](http://soyaine.github.io/JavaScript30/02%20-%20JS%20%2B%20CSS%20Clock/index-SOYAINE.html)
45-
3 | [CSS Variables 指南](https://github.com/soyaine/JavaScript30/tree/master/03%20-%20CSS%20%Variables) | [用 CSS 变量实现拖动控制参数效果](http://soyaine.github.io/JavaScript30/03%20-%20CSS%20Variables/index-SOYAINE.html)
45+
3 | [CSS Variables 指南](https://github.com/soyaine/JavaScript30/tree/master/03%20-%20CSS%20Variables) | [用 CSS 变量实现拖动控制参数效果](http://soyaine.github.io/JavaScript30/03%20-%20CSS%20Variables/index-SOYAINE.html)
4646
4 | [Array Cardio, Day 1 指南](https://github.com/soyaine/JavaScript30/tree/master/04%20-%20Array%20Cardio%20Day%201) | [数组基本操作方法示例一](http://soyaine.github.io/JavaScript30/04%20-%20Array%20Cardio%20Day%201/index-SOYAINE.html)
4747
5 | [Flex Panel Gallery 指南](https://github.com/soyaine/JavaScript30/blob/master/05%20-%20Flex%20Panel%20Gallery/README.md) | [可伸缩的图片墙在线效果](https://soyaine.github.io/JavaScript30/05%20-%20Flex%20Panel%20Gallery/index-SOYAINE2.html)
4848
6 | [Type Ahead 指南](https://github.com/soyaine/JavaScript30/blob/master/06%20-%20Type%20Ahead/README.md) | [根据关键词快速匹配诗句在线效果](https://soyaine.github.io/JavaScript30/06%20-%20Type%20Ahead/index-SOYAINE.html)
@@ -54,7 +54,7 @@ No | Guide | Demo
5454
12 | [Key Sequence Detection 指南](https://github.com/soyaine/JavaScript30/tree/master/12%20-%20Key%20Sequence%20Detection/README.md) | [在线效果](https://soyaine.github.io/JavaScript30/12%20-%20Key%20Sequence%20Detection/index-FINISHED.html)
5555
13 | [Slide in on Scroll 指南](https://github.com/soyaine/JavaScript30/blob/master/13%20-%20Slide%20in%20on%20Scroll/README.md) | [图片随屏幕滚动而滑入滑出的在线效果](https://soyaine.github.io/JavaScript30/13%20-%20Slide%20in%20on%20Scroll/index-SOYAINE.html)
5656
14 | [JavaScript References vs. Copying 指南](https://github.com/soyaine/JavaScript30/tree/master/14%20-%20JavaScript%20References%20VS%20Copying) | -
57-
15 | LocalStorage | -
57+
15 | [LocalStorage](https://github.com/soyaine/JavaScript30/blob/master/15%20-%20LocalStorage/README.md) | [利用 localStorage 模拟在线菜单](https://soyaine.github.io/JavaScript30/15%20-%20LocalStorage/index-SOYAINE.html)
5858
16 | [Mouse Move Shadow 指南](https://github.com/soyaine/JavaScript30/blob/master/16%20-%20Mouse%20Move%20Shadow/README.md) | [文字阴影随鼠标移动在线效果](https://soyaine.github.io/JavaScript30/16%20-%20Mouse%20Move%20Shadow/index-finished-es5.html)
5959
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)
6060
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)

0 commit comments

Comments
 (0)