米米的博客

做了一点微小的工作

发表于 分类于 Disqus： 本文字数： 256 阅读时长 ≈ 1 分钟

什么是 Range 对象

Range 是指 html 文档中的区域，如用户用鼠标拖动选中的区域，如下图：

通过 Range 对象，可以获取用户选中的区域，或者指定选中区域，得到 Range 的起点和终点、修改或者复制里边的文本，甚至是 html。在富文本编辑器开发中，经常会使用到这些功能。

获取当前的选区

由于兼容性的问题，需要区分 IE 浏览器。

1
2
3
4
5
6
7
8
9
10
11
var selection, range;
if (window.getSelection) {
    //现代浏览器
    selection = window.getSelection();
} else if (document.selection) {
    //IE
    selection = document.selection.createRange();
}

//Range对象
range = selection.getRangeAt(0);

Range 对象的属性

属性描述
collapsed如果范围的开始点和结束点在文档的同一位置，则为 true，即范围是空的，或折叠的。
commonAncestorContainer范围的开始点和结束点的（即它们的祖先节点）、嵌套最深的 Document 节点。
endContainer包含范围的结束点的 Document 节点。
endOffsetendContainer 中的结束点位置。
startContainer包含范围的开始点的 Document 节点。
startOffsetstartContainer 中的开始点位置。

Range 对象的操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//选中区域的文字
var text = range.toString();

//选中区域的Element元素
var elem = range.commonAncestorContainer;
if (elem.nodeType != 1) {
    elem = elem.parentNode;
}

//选中区域的html
var span = document.createElement('SPAN');
span.appendChild(range.cloneContents());

//选区是否为空
var isSelectionEmpty = false;
if (range.startContainer === range.endContainer) {
    if (range.startOffset === range.endOffset) {
        isSelectionEmpty = true;
    }
}

参考文章：JS Range 对象的使用

发表于 分类于 Disqus： 本文字数： 494 阅读时长 ≈ 2 分钟

Pro Controller 是任天堂为 Switch 适配的游戏手柄，于 2016 年 10 月 20 日与 Switch 一同亮相，并于 2017 年 1 月 25 日正式发布。除了在 Switch 上使用外，Pro Controller 还可以与 PC 配对或连接，进行 Steam 上的游戏 ——Steam 在 2018 年 5 月的客户端更新中增加了对 Pro Controller 的支持。

本文将介绍一个名为 x360ce 的工具，通过它可以将 Pro Controller 的操作映射为一个 Xbox 手柄。对于非 Steam 游戏，这比在 Steam 中设置手柄更加方便和友好。

Pro Controller 有两种与 PC 连接的方式：USB 有线连接和蓝牙连接。通过 USB 连接的 Pro Controller 只能被 steam 识别，而无论是 x360ce 还是 pygame 都无法正确读取数据。因此，要使用 x360ce，你的 PC 必须具有蓝牙功能。

下面将介绍操作步骤。

充电

通过 5V 电源适配器连接 USB Type-C 接口为 Pro Controller 充电，使其保持足够的电量。正如前面所说的，最好不要直接通过 PC 的 USB 接口连接 Pro Controller，以避免出现无法识别的情况。

蓝牙连接

长按 USB Type-C 接口旁的按键，使 Pro Controller 开机并进入蓝牙配对模式。在 PC 上通过蓝牙搜索并连接 Pro Controller。蓝牙配对完成后，就可以使用 x360ce 了。

安装 x360ce

下载最新版本的 x360ce，然后解压并运行。

点击「Add...」按钮，并勾选通过蓝牙连接的 Pro Controller。

完成后，点击「OK」回到之前的页面。

其它配置

将所有设置项按照前面图中的方式调整好即可。在「General」页面中，可以自行调整按键映射。在「Left Stick」和「Right Stick」中，可以调整灵敏度。完成设置后，需要点击「Save All」进行保存。

如果一切正常，系统会识别出 x360ce 虚拟的 Xbox 手柄，这样就可以愉快的进行游戏了！

发表于 分类于 Disqus： 本文字数： 440 阅读时长 ≈ 2 分钟

以下操作中的快捷键在 Windows 下有效，macOS 可能需要用 Command 代替 Ctrl。
原始素材尽量选择人物，最好不要全身。

笔者以下面这张梅西庆祝的照片为例。

调整对比度

打开素材，Ctrl+j 复制图层；选定新图层，Ctrl+m 打开曲线，调大对比度。

阅读全文 »

发表于 分类于 Disqus： 本文字数： 593 阅读时长 ≈ 2 分钟

如果要在网页上显示一些随机的语句，获得一些人生的经验，你会选择什么？
也许，一言是一个很好的选择，它可以提供一些动漫中的台词，或是网络上的各种小段子。
在前面的文章有趣的 Linux 命令行工具中提到的 fortune 命令或许也可以满足需求，pure-ftpd 就可以设置在连接成功时显示随机的来自 fortune 的语句。
那除此之外呢？历史上的今天是一个不错的方案。当你访问一些门户网站的首页，有时会看到这样的栏目。它也是一些百科全书网站，比如维基百科的传统。事实上，在 Mac 上就自带了一个小型的「历史上的今天」数据库，执行：

1
cat /usr/share/calendar/calendar.history

就可以看到。
这篇文章将介绍如何搭建一个提供「历史上的今天」信息的 API。

建立数据库

首先，建立 MySQL 数据库和数据表，用于存储爬取的信息。这里数据库和数据表名都以 event 为例。

1
2
3
4
5
6
7
8
9
10
CREATE DATABASE event;
USE event;
CREATE TABLE event (
  id int(10) UNSIGNED PRIMARY KEY NOT NULL AUTO_INCREMENT,
  type int(1) DEFAULT NULL,
  year varchar(6) DEFAULT NULL,
  date varchar(6) DEFAULT NULL,
  info text DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
QUIT;

获取数据

数据来源是维基百科，使用 Python 爬取数据，并存入数据库中。项目地址：TodayInHistory-Crawler，可以打包下载所有文件。

下载程序源码后，进入目录并安装依赖：

1
pip3 install -r requirements.txt

config.py 中的 username、password、dbname 和 tablename 分别是你的登录用户名、密码、数据库名和数据表名。将它们修改成和之前创建的数据库和数据表名一致。

然后，运行 spider.py，程序将会开始爬取数据。程序会用 try except 处理特殊字符（非 UTF-8 范围）的问题，并将失败的项目记录在 failed.txt 中。

查询数据

比较简单的方式是按照 json 格式进行输出，server.py 给出了一种使用 Python 的方案，运行后就可以访问 Flask 创建的服务器了。

阅读全文 »
0%