Whistle代理工具实践操作
前言之前介绍了 网络抓包和代理工具：Whistle，并没有实践操作。 产生这个想法也是因为之前迅雷账号被封的事情，猜想大概率是因为异地登录的原因，主要也是平常我都是开的全局代理，吃一堑长一智，下次可能我的其他网盘也会因为这个原因被封，所以准备搭建个代理这样通过局部代理的方式来使用。 需求 一台公网电脑或者服务器 安装安装流程可以查看我之前那个文章，这边再简单说一下我的过程： 安装Nodejs 略 手动安装Whistle npm install -g whistle 启动 w2 start -n yourusername -w yourpassword -p 555 用户名为 yourusername，密码为 yourpassword，端口为 555 放行端口 这一步很重要，服务器阻止该端口的话，是无法连接的 使用电脑端的SwitchyOmega浏览器插件 添加代理服务器 启用插件 访问 ip.cn 确认 可以看到IP地址和服务器的地址一致，即成功。 iOS手机端 需要手机连接WiFi，点击WiFi右侧感叹号进行配置。 ...
VuePress2部署博客
前言之前介绍了VuePress v2的使用，但是目前VuePress v2还处于beta阶段，博客插件是没有的。或者只能自己手动码，这个要求比较高。 如果实在需要在VuePress v2中部署博客，目前比较简单的方案是安装第三方主题。 本篇文章简单介绍一下这个主题，我看下来还是很好看的。 简介一个具有强大功能的 vuepress 主题 VuePress Theme Hope官网 。 前提条件安装Nodejs，略。 安装官网非常人性化的给了一个小白教程 不需要自行独立额外安装VuePress 比如我是计划安装在 /var/www 目录下面，程序文件夹为 vuepress 先 cd /var/www/ ，然后根据自身环境运行以下命令之一： # pnpm pnpm create vuepress-theme-hope vuepress # yarn yarn create vuepress-theme-hope vuepress # npm npm init vuepress-theme-hope vuepress 然后就根据提示一步一步选择即可。 运行安装完成后就可以使...
记录迅雷账号因行为异常永久封禁的前后
前言今天在登录迅雷的时候，提示：您的账号因行为异常被永久封禁。 当时就一头雾水。 猜想是什么原因才能导致我的账号永久封禁？ 下载的电影违规了 这个应该不至于永久吧？ 云盘保存的内容违规了 云盘里面其实也就几部新出的电影暂时先存在云盘，一般都是等存个十天半个月后，最后统一下载下来。 关键是里面也没有小电影，应该也不存在永久封禁的问题吧？ 多次异地登录 这个也是有可能的，公司的网是国外的网（虽然很少登录）；还有个可能是平时自己挂梯子下载东西，导致经常在异地登录 申诉过程我也是讲道理的，但是永久封禁我账号，至少也要让我知道理由吧？什么样的情况会涉及到永久封禁？ 于是我致电客服，客服先是帮我查看了账号的违规记录： “后台查询不到违规的具体内容” 然后就来来回回告诉我，无法为我解封。 我的要求就要求封禁我账号可以，至少要告诉我理由，哪里违规了。 然后他说他只能帮我转接给专员试试，现在我就静待回复了。 这段时间我来来回回想了好几次就只能是上面第三条异地登录的情况。 最后通过这个事情，不管最后结果怎么样，我也准备放弃迅雷了。 亏我还年年充会员，最后就是这样一点通知都没有的情...
CSS：01.字体属性和文本属性
本文内容 CSS的单位 字体属性 文本属性 定位属性：position、float、overflow等 CSS的单位html中的单位只有一种，那就是像素 px ，所以单位是可以省略的，但是在CSS中不一样。 CSS中的单位是必须要写的，因为它没有默认单位。 绝对单位1 in = 2.54 cm = 25.4 mm =72 pt = 6 pc 。 各种单位的含义： in：英寸Inches (1 英寸 = 2.54 厘米) cm：厘米Centimeters mm：毫米Millimeters pt：点Points，或者叫英镑 (1点 = 1/72英寸) pc：皮卡Picas (1 皮卡 = 12 点) 相对单位px：像素 em：印刷单位相当于12个点 %：百分比，相对周围的文字的大小 为什么说像素px是一个相对单位呢，这也很好理解。比如说，电脑屏幕的的尺寸是不变的，但是我们可以让其显示不同的分辨率，在不同的分辨率下，单个像素的长度肯定是不一样的啦。 font 字体属性CSS中，有很多...
HTML5简单的视频播放器举例
采用 Bootstrap 网站的图标字体，作为播放器的按钮图标。 index.html 的代码如下： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <!-- 引入字体图标的文件--> <link rel="stylesheet" href="css/font-awesome.min.css"/> <style> *{ margin: 0; padding: 0; } /*多媒体标题*/ figcaption{ text-align: center; line-height: 150px; font-family: "Microsoft Yahei"; ...
HTML5详解（三）
Web 存储随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统方式我们以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，给开发带来诸多不便，HTML5规范则提出解决方案。 H5 中有两种存储的方式1. window.sessionStorage 会话存储： 保存在内存中。 生命周期为关闭浏览器窗口。也就是说，当窗口关闭时数据销毁。 在同一个窗口下数据可以共享。 2. window.localStorage 本地存储： 有可能保存在浏览器内存里，有可能在硬盘里。 永久生效，除非手动删除（比如清理垃圾的时候）。 可以多窗口共享。 Web 存储的特性 设置、读取方便。 容量较大，sessionStorage 约5M 、 localStorage 约20M。 只能存储字符串，可以将对象 JSON.stringify() 编码后存储。 常见 API设置存储内容： setItem(key, value); 可以新增一个 item，也可...
HTML5详解（二）
本文主要内容 拖拽 历史 地理位置 全屏 拖拽 在HTML5的规范中，我们可以通过为元素增加 draggable="true" 来设置此元素是否可以进行拖拽操作，其中图片、链接默认是开启拖拽的。 1. 拖拽元素页面中设置了 draggable="true" 属性的元素。 举例如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>欢迎访问YYDNAS</title> <style> .box1{ width: 200px; hei...
HTML5详解（一）
HTML5的介绍Web 技术发展时间线 1991 HTML 1994 HTML2 1996 CSS1 + JavaScript 1997 HTML4 1998 CSS2 2000 XHTML1（严格的html） 2002 Tableless Web Design（表格布局） 2005 AJAX 2009 HTML5 2014 HTML5 Finalized 2002年的表格布局逐渐被淘汰，是因为：表格是用来承载数据的，并不是用来划分网页结构的。 2009年就已经推出了HTML5的草案，但直到2014年才有定稿，是因为有移动端的推动。 H5草案的前身是叫：Web Application，最早是由WHATWG这个组织在2004年提出的。 2007年被 W3C 组织接纳，并在 2008-01-22 发布 HTML5 的第一个草案。 什么是 HTML5HTML5并不仅仅只是做为HTML标记语言的一个最新版本，更重要的是它制定了Web应用开发的一系列标准，成为第一个将Web做为应用开发平台的HTML语言。 HTML5定义了一系列新元素，如新语义标签、智能表单、多媒体标...
通过简单的css+js实现图片不弹窗浏览完整图片
效果 方法1.添加css样式 <style> /* 初始状态 */ .enlarge { transition: all 0.2s ease-out; } /* 显示原图 */ .enlarge.fullsize { width: auto; height: auto; } </style> 这段 CSS 代码定义了一个名为 enlarge 的类，其中包含一个过渡效果的属性 transition ，该属性指定更改图像大小的过渡时间（0.2秒）和缓动函数（ease-out）。 另外，它还定义了一种新的类 .enlarge.fullsize ，用于在单击图像时将其扩大到其原始尺寸（使用 width:auto;height:auto ），以便让用户查看更大的图像。 也就是说, 比如网页中图片的初始状态大小定为设置为其他值, 在 .enlarge.fullsize 状态下则采用原图大小。 2.添加js <script> function toggleFullSize(img) { if ...
网络抓包和代理工具：Whistle
简介Whistle 是基于 Node 实现的跨平台抓包调试工具，其主要特点： 完全跨平台：支持 Mac、Windows 等桌面系统，且支持服务端等命令行系统 功能强大（理论上可以对请求做任意修改）： 支持作为 HTTP、HTTPS、SOCKS 代理及反向代理 支持抓包及修改 HTTP、HTTPS、HTTP2、WebSocket、TCP 请求 支持重放及构造 HTTP、HTTPS、HTTP2、WebSocket、TCP 请求 支持设置上游代理、PAC 脚本、Hosts、延迟（限速）请求响应等 支持查看远程页面的 console 日志及 DOM 节点 支持用 Node 开发插件扩展功能，也可以作为独立 npm 包引用 操作简单： 直接通过浏览器查看抓包、修改请求 所有修改操作都可以通过配置方式实现（类似系统 Hosts），并支持分组管理 项目可以自带代理规则配置并一键设置到本地 Whistle 代理，也可以通过定制插件简化操作 功能可以说是非常强大。可能作为代理服务器使用的需求会多一些。 Whistle 官网：https://wproxy.org/...