第十二天实现了一个键盘事件监听,当输入了特定字符串后,在页面上添加一些特殊效果。

Key Point

  • 全局绑定 'keyup' 事件,通过 e.key 获取用户输入
  • 截取与 secretCode 相同长度的用户输入字符串,比较两者,相同出发添加效果

阅读更多


day-10


GitHub 地址

断了一天,甚是罪恶😆。今天是实现一个自定义的视频播放器。实现视频的播放、暂停、进度条托拽更新、音量加减、倍速播放、快进快退等功能。

Preview

Key Point

功能实现大概分成了三个部分

  • 页面元素绑定
  • 事件监听
  • 功能实现

阅读更多


day-10


第 10 天啦,今天实现的是类似 Gmail 网页,按住 Shift 点选邮件,可以选中点选区间中的所有邮件。

Preview

Key Point

这次的练习在 JavaScript 方面没有新增操作,主要是一个思路的实现。在 CSS 方面,接触了一些新的功能。

  • CSS Selector
  • JavaScript 实现思路

阅读更多

GitHub

第九天的练习,是熟悉一些浏览器调试的小技巧。

页面添加断点

按下 F12 打开 Chrome 的开发者工具,在 Elements 选项卡中,选择某个标签,右键,Break On 下的 attribute modifications。就可以为该页面元素添加断点。在本例中 <p onClick="makeGreen()">xBREAKxDOWNx</p> p 标签添加了 onClock 事件,并执行 makeGreen() 方法。添加断点之后就可以在点击时,跳转到 makeGreen() 函数中。

Console

Console.log()

除了直接传入字符串打印外,还可以格式化字符串打印,例如

Format Description
%s 字符串
%f 浮点数
%o 对象
%d 整数
%c 设定输出样式

阅读更多

GitHub 地址

第 8 天的练习是使用 HTML5 新增的 Canvas,创建一个简单的画板。画笔的颜色呈彩虹色渐变,画笔的粗细也会渐变循环。

Canvas 和 iOS 开发中常用的 Core Graphics 有许多相似的地方。

在页面中使用 Canvas,只需要添加 <canvas> 标签即可。本例中,添加了如下标签

1
<canvas id="draw"></canvas>

JavaScript 中,通过 querySelector('#draw') 获取到 canvas 页面元素。接下来通过 HTMLCanvasElement.getContext() 方法获取上下文,这一点与 iOS 中的 UIGraphicsGetCurrentContext() 一样。不同的是 HTMLCanvasElement.getContext() 有两个可选参数,具体解释。下面简单列举一下 contextType 的属性

阅读更多

GitHub 地址

今天的练习是关于 JavaScript 数组的第二次练习。这次主要涉及 JavaScript 数组的如下 API。

  • Array.prototype.some()
  • Array.prototype.every()
  • Array.prototype.find()
  • Array.prototype.findIndex()

给定如下测试数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const people = [
{ name: 'Wes', year: 1988 },
{ name: 'Kait', year: 1986 },
{ name: 'Irv', year: 1970 },
{ name: 'Lux', year: 2015 }
];

<!--- more --->

const comments = [
{ text: 'Love this!', id: 523423 },
{ text: 'Super good', id: 823423 },
{ text: 'You are the best', id: 2039842 },
{ text: 'Ramen is my fav food ever', id: 123523 },
{ text: 'Nice Nice Nice!', id: 542328 }
];

Array.prototype.some()

类比 Swift 集合类型中的 contains(where:) 方法,用来判断数组中是否包含特定条件的 element。例如,查找 people 数组中是否包含 19 岁以上的成年人,答案如下

1
const isAdult = people.some(person => (new Date()).getFullYear() - person.year >= 19);

Array.prototype.every()

类比 Swift 4.2 新增的 allSatisfy(_:) 方法,用来判断数组中是否所有元素都满足特定的条件。例如,是否所有人的年龄都大于 19 岁

1
const isAnybodyAdult = people.every(person => (new Date()).getFullYear() - person.year >= 19);

说实话,Swift 这个 allSatisfy 方法名,都 Swift 5.0 我才第一次知道这个方法。

Array.prototype.find()

类比 Swift 中的 first(where:) 方法,返回第一个满足条件的数组元素。例如,找出 ID 为 823423 的评论

1
const comment = comments.find(comment => comment.id === 823423);

Array.prototype.findIndex()

类比 Swift 中的 firstIndex(where:) 方法,都返回了第一个满足条件的数组元素的下标。例如,找到并删除 ID 为 823423 的评论

1
const index = comments.findIndex(comment => comment.id === 823423);

通过 slice() 方法,分割数组,通过上一天的练习提到的展开语法,展开数组,创建新的数组。


day-05


GitHub 地址

第 5 天的练习,使用 Flexbox 创建一个简单的页面,点击图片时,放大该图片,在图片放大动画结束之后,隐藏的文字分别从上下两端进入页面。再次点击该图片,回到初始的状态。

技术要点

  • Flexbox

Day 05 的 JavaScript 代码,在之前几天的练习中都有涉及,所以这里不再赘述。

Flexbox

关于 Flexbox 的内容,目前还是一知半解,在看完 Flexbox 之后整理一下,再来补充。

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×