File tree Expand file tree Collapse file tree 4 files changed +6
-4
lines changed Expand file tree Collapse file tree 4 files changed +6
-4
lines changed Original file line number Diff line number Diff line change 7
7
8
8
![ 仿即时搜索诗句效果] ( https://cl.ly/0b360y270s0f/Screen%20recording%202016-12-31%20at%2010.05.23%20PM.gif )
9
9
10
- 在输入框中输入一个词,迅速匹配,展示含有这个词的诗句,诗句的来源 json 数据是加载页面时从网络中异步获得。(原课程中选的内容是英文城市名,我将其换成了唐诗,地址可在我的页面中获取) [ 在线效果请查看。] ( http://soyaine.cn/JavaScript30/06%20-%20Type%20Ahead/index-SOYAINE.html )
10
+ 在输入框中输入一个词,迅速匹配,展示含有这个词的诗句,诗句的来源 json 数据是加载页面时从网络中异步获得。[ 在线效果请查看。] ( http://soyaine.cn/JavaScript30/06%20-%20Type%20Ahead/index-SOYAINE.html )
11
11
12
12
初始文档中提供了 HTML 和 CSS,我们需要补全 JS 代码。这个挑战是 Ajax 的预热练习,在异步方面用到了一些目前还未被完全支持的新特性,但很好用。
13
13
14
+ 原文档中选的内容是英文城市名,我将其换成了唐诗,构造了一个含有 70 多首唐诗的 JSON 数据,访问地址是 https://gist.githubusercontent.com/soyaine/81399bb2b24ca1bb5313e1985533c640/raw/bdf7df2cbcf70706c4a5e51a7dfb8c933ed78878/TangPoetry.json,请自由取用。
15
+
14
16
## 涉及特性
15
17
16
18
- Promise
Original file line number Diff line number Diff line change 17
17
< script >
18
18
// const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
19
19
20
- const endpoint = 'https://raw .githubusercontent.com/soyaine/FE-Practice/f438d3bdf099461f88322b1b1f20c9d58f66f1ec/TangPoetryCut .json' ;
20
+ const endpoint = 'https://gist .githubusercontent.com/soyaine/81399bb2b24ca1bb5313e1985533c640/raw/bdf7df2cbcf70706c4a5e51a7dfb8c933ed78878/TangPoetry .json' ;
21
21
22
22
23
23
const poetrys = [ ] ;
Original file line number Diff line number Diff line change 7
7
8
8
这一部分是[ 挑战 04 ] ( https://github.com/soyaine/JavaScript30/blob/master/04%20-%20Array%20Cardio%20Day%201/README.md ) 的后续,继续熟悉 Array 的一些基本方法,包括 ` some() ` 、` every() ` 、` find() ` 、` splice() ` 、` slice() ` 。这篇比较简单,但如果没有看过上一篇文章,建议回去温习一下。(毕竟上一篇更酷 :)
9
9
10
- 文档提供了用于操作的 people 和 comments 数组,模拟的是人员信息及评论数据,基于这两个数组可以练习一下上面提及的各个方法,请打开 HTML 后在 Console 面板中查看输出结果。
10
+ 文档提供了用于操作的 people 和 comments 数组,模拟的是人员信息及评论数据,基于这两个数组可以练习一下上面提及的各个方法,[ 请打开 HTML] ( http://soyaine.github.io/JavaScript30/07%20-%20Array%20Cardio%20Day%202/index-SOYAINE.html ) 后在 Console 面板中查看输出结果。
11
11
12
12
## 过程指南
13
13
Original file line number Diff line number Diff line change @@ -48,7 +48,7 @@ JavaScirpt30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30
48
48
5 . [x] [ Flex Panel Gallery 指南] ( https://github.com/soyaine/JavaScript30/blob/master/05%20-%20Flex%20Panel%20Gallery/README.md ) | [ 可伸缩的图片墙在线效果] ( http://soyaine.cn/JavaScript30/05%20-%20Flex%20Panel%20Gallery/index-SOYAINE2.html )
49
49
6 . [x] [ Type Ahead 指南] ( https://github.com/soyaine/JavaScript30/blob/master/06%20-%20Type%20Ahead/README.md ) | [ 根据关键词快速匹配诗句在线效果] ( http://soyaine.cn/JavaScript30/06%20-%20Type%20Ahead/index-SOYAINE.html )
50
50
7 . [x] [ Array Cardio, Day 2 指南] ( https://github.com/soyaine/JavaScript30/tree/master/07%20-%20Array%20Cardio%20Day%202 ) | [ 数组基本操作方法示例二] ( http://soyaine.github.io/JavaScript30/07%20-%20Array%20Cardio%20Day%202/index-SOYAINE.html )
51
- 8 . [ ] Fun with HTML5 Canvas
51
+ 8 . [ ] Fun with HTML5 Canvas 指南
52
52
9 . [ ] Dev Tools Domination
53
53
10 . [ ] Hold Shift and Check Checkboxes
54
54
11 . [ ] Custom Video Player
You can’t perform that action at this time.
0 commit comments