白抹灰

过去，要检测一个元素是否可见或者两个元素是否相交并不容易，很多解决办法不可靠或性能很差。然而，随着互联网的发展，这种需求却与日俱增，比如，下面这些情况都需要用到相交检测：

• 图片懒加载——当图片滚动到可见时才进行加载
• 内容无限滚动——也就是用户滚动到接近内容底部时直接加载更多，而无需用户操作翻页，给用户一种网页可以无限滚动的错觉
• 检测广告的曝光情况——为了计算广告收益，需要知道广告元素的曝光情况
• 在用户看见某个区域时执行任务或播放动画

JavaScript Date objects represent a single moment in time in a platform-independent format. Date objects contain a Number that represents milliseconds since 1 January 1970 UTC.

0. 获取 dom 节点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

document.getElementById('id')
// 通过 ID 获取，上下文只能是 document，返回值只获取到一个元素，没有找到返回 null

document.getElementsByName('name')
// 通过 name 属性获取，上下文只能是 document，返回值是一个类数组，没有找到返回空数组

document.getElementByTagName('p')
var oDiv = document.getElementById('divId')
oDiv.getElementsByTagName('p')
// 通过标签获取，上下文可以是 document 和 dom 节点，返回值是一个类数组，没有找到返回空数组

document.getElementByClassName('class')
// 通过类名获取，上下文可以是 document 和 dom 节点，返回值是一个类数组，没有找到返回空数组，ie8 以下不兼容

document.querySelector('div.class')
// 通过选择器获取，上下文可以是 document 和 dom 节点，返回值只获取到一个元素

document.querySelectorAll('div.class')
// 通过选择器获取，上下文可以是 document 和 dom 节点，返回值是一个类数组

document.documentElement // 获取 html
document.body // 获取 body
document.body.contentEditable="true" // 文本可编辑
document.querySelector('video').playbackRate = 3; // 视频播放速度

BFC 到底是什么东西

BFC（Block Formatting Context/块级格式化上下文）可以看作是是⼀块独⽴的区域，让处于其内部的元素与外部的元素互相隔离。

W3C官方解释为：BFC决定了元素如何对其内容进行定位，以及与其它元素的关系和相互作用，当涉及到可视化布局时，Block Formatting Context提供了一个环境，HTML在这个环境中按照一定的规则进行布局。

（一）核心知识

1. @规则

选择器和声明块组成了CSS 规则集（CSS ruleset），常简称为 CSS 规则。

用户体验设计秉承着以用户为中心的思想，以用户需求为目标。设计过程注重以用户为中心，用户体验的概念从开发的最早期就开始进入整个流程，并贯穿始终。良好的用户体验设计，是产品每一个环节共同努力的结果。

除去一些很难一蹴而就的，本文将就页面展示、交互细节、可访问性三个方面入手，罗列一些在实际的开发过程中，积攒的一些有益的经验。通过本文，你将能收获到：

• 了解到一些小细节是如何影响用户体验的

• 了解到如何在尽量小的开发改动下，提升页面的用户体验

• 了解到一些优秀的交互设计细节

• 了解基本的无障碍功能及页面可访问性的含义

• 了解基本的提升页面可访问性的方法

  阅读全文 »

当用户点击菜单按钮，在弹出导航栏的同时，汉堡形状的按钮也会动画渐变成叉号。再次对其点击时，导航栏收回，按钮也恢复原样。关于汉堡菜单，虽然 GitHub 上已经有相关的库 hamburgers，但因为我使用的 nuxt 框架采用的是 rem 布局，对于 px 到 rem 的转换让我实在头疼。再三思量之下，还是决定自己手动模仿一个出来。具体实现效果如下动图。

（一）响应式界面

1. 什么是响应式设计

响应式布局

响应式界面能够适应不同的设备。描述响应式界面最著名的一句话就是“Content is like water”，翻译成中文便是“如果将屏幕看作容器，那么内容就像水一样”。

在按设计稿搭建项目页面时，碰到了一处内容呈现方式如下图所示的元素。文字在菱形边框内居中摆放的布局看似简单，却让我陷入了长时间的束手无策。如果只是通过 transform 将一个 div 旋转 45deg，其内的文字也会跟着转动，这显然不符合要求。

原理：The Open Graph protocol (ogp.me)