JavaScript - 分类 - 菠菜眾長

使用 Node.js 自动创建 Vue 的路由

Lruihao — Wed, 14 Jun 2023 00:11:17 +0800

最近在写一个 Vue 插件，需要在项目中创建一些测试页面，由于都是些静态路由，就想到之前看到过的一个项目就是用 Node.js 来自动生成路由的，于是就借鉴过来改了一下。

源码

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57


const fs = require('fs')
const os = require('os')

const vueDir = './src/views/'
const routerFile = './src/router.js'

fs.readdir(vueDir, function (err, files) {
  if (err) {
    console.error('❌ Could not list the directory.', err)
    return
  }
  const routes = []
  for (const filename of files) {
    if (filename.indexOf('.') < 0) {
      continue
    }
    const [name, ext] = filename.split('.')
    if (ext !== 'vue') {
      continue
    }
    const routeName = name.replace(/-([a-z])/g, (_, match) => match.toUpperCase())
    let routeDescription = ''
    const contentFull = fs.readFileSync(`${vueDir}${filename}`, 'utf-8')
    // get route description from first line comment
    const match = //g.exec(contentFull.split(os.EOL)[0])
    if (match) {
      routeDescription = match[1].trim()
    }
    routes.push(`  {
    path: '/${name === 'home' ? '' : name}',
    name: '${routeName}',${routeDescription ? `\n    description: '${routeDescription}',` : ''}
    component: () => import(/* webpackChunkName: "${routeName}" */ '@/views/${filename}'),
  },`)
  }
  const result =
`// This file is automatically generated by gen-router.js, please do not modify it manually！
import VueRouter from 'vue-router'
import Vue from 'vue'

Vue.use(VueRouter)

const routes = [
${routes.join(os.EOL)}
]

const router = new VueRouter({
  mode: 'hash',
  routes,
})

export default router
`
  fs.writeFile(routerFile, result, 'utf-8', (err) => {
    if (err) throw err
    console.log(`✅ Router generated successfully in ${routerFile}`)
  })
})

生成效果如下：

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


// This file is automatically generated by gen-router.js, please do not modify it manually！
import VueRouter from 'vue-router'
import Vue from 'vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    description: 'Home',
    component: () => import(/* webpackChunkName: "home" */ '@/views/home.vue'),
  },
]

const router = new VueRouter({
  mode: 'hash',
  routes,
})

export default router

参考

sunzsh/vue-el-demo

Vue2 + tailwindcss 初始化

Lruihao — Sat, 03 Jun 2023 17:38:44 +0800

新建 Vue2 项目

通过 vue-cli 创建一个叫 v2-tailwind 的项目：

1

vue create vue2-tailwind

根据需要选择其他的功能插件，例如：Babel, Router, Vuex, CSS Pre-processors, Linter。

关于 ESLint

electron 踩坑总结

Lruihao — Fri, 12 Aug 2022 11:22:01 +0800

总结一下最近 electron 开发遇到的问题和一些重要知识点。

简介

如果你可以建一个网站，你就可以建一个桌面应用程序。 Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的开源框架，它负责比较难搞的部分，你只需把精力放在你的应用的核心上即可。

知识点

进程

electron 由两种进程组成，包括主进程和 0 个或 n 个渲染进程。

主进程：承担应用的生命周期（包括启动，退出，准备，正在切换到后台，正在切换到前台等，还负责与原生操作系统 API 通信）
渲染进程：做 web 页面的 ui，渲染进程之间独立在各自的单线程，渲染进程之间相互隔离，不能直接访问操作系统，需要通信到主线程，在通过主线程操作访问操作形态，一个 BrowserWindow 实例即为一个渲染进程

技术栈

electron 整合了 Node 和浏览器的所有能力，可以随意发挥这些技术栈的特点。由于固定浏览器内核，可以无需考虑兼容性地使用 html/js/css 新特性。

安装

安装 electron 时，可能因为网络问题导致下载失败，需要使用镜像仓库来下载。

1
2
3
4


# 设置 electron 镜像仓库
# https://registry.npmmirror.com/-/binary/electron
# 13.1.7 版本 下载链接可能会拼错导致 404，要设置成 https://registry.npmmirror.com/-/binary/electron/v
npm config set electron_mirror=https://npmmirror.com/mirrors/electron/

M1 Mac 安装较低版本 electron 时可能会报错，Failed to find Electron v xxx for darwin-arm64，因为这些版本的 electron 不支持 darwin-arm64 架构。Apple 针对未适配的 X64 应用提供了 Rosetta2 转换器，安装 darwin-x64 版本的 electron 在 Intel 模式下运行即可，参考。

remote

不要频繁使用 remote, 更多应该手动进行和主进程之间的通信。

使用时需在窗口创建时设置 webPreferences.enableRemoteModule 为 true。

旧版本的 electron.remote 已经弃用，应该使用依赖 electron/remote 代替。

使用了旧版本的 remote 时会有控制台警告信息：

1

(electron) The remote module is deprecated. Use https://github.com/electron/remote instead.

获取当前窗口：remote.getCurrentWindow()

问题点

打开外部浏览器

electron 的 shell 模块，可以使用 shell.openExternal(url) 在默认浏览器打开链接。

防抖与节流

防抖：短期内大量触发事件时，只执行最后一次。

1
2
3
4
5
6
7
8
9


function debounce(fn) {
  let timer = null;
  return function () {
    clearTimeOut(timer);
    timer = setTimeOut(() => {
      fn.applay(this, arguments);
    }, 300);
  };
}

节流：短期内大量触发事件时，只执行第一次。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


function throttle(fn) {
  let timer = null;
  return function () {
    if (timer) return;
    timer = setTimeOut(() => {
      fn.applay(this, arguments);
      timer = null;
    }, 300);
  };
}

devTools

初始化窗口时设置 webPreferences.devTools 为 true，然后通过 mainWindow.webContents.openDevTools() 打开开发者工具。

如果只在开发环境启用开发者工具，则需要设置 webPreferences.devTools 为 process.env.NODE_ENV === 'development'

启动白屏

在创建窗口时设置 show: false，在 ready-to-show 事件之后执行 mainWindow.show()，

可见官方文档优雅地显示窗口。

启动前 loading

额外创建一个 loading 窗口，该窗口可设置为透明只包含 loading 图标和文字，在 mainWindow.show() 后关闭。

启动后 loading

如果使用了 Vue 框架，在 Vue 初始化之前窗口虽然出现了，但是内容时空白的，可以在 Vue 实例 #app 里写一个 loading, Vue 加载完后会覆盖掉。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48


<div id="app">
  
  <style type="text/css">
    html,
    body {
      height: 100%;
      margin: 0;
    }
    body {
      display: flex;
    }
    #app {
      margin: auto;
      display: flex;
      align-items: center;
    }
    @media (prefers-color-scheme: dark) {
      body {
        color: #fff;
        background-color: #202124;
      }
    }
  style>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    style="margin:auto;background:0 0"
    width="60"
    height="60"
    viewBox="0 0 100 100"
    preserveAspectRatio="xMidYMid"
    display="block"
  >
    <circle
      cx="50"
      cy="50"
      r="20"
      stroke-width="4"
      stroke="#a5a5a5"
      stroke-dasharray="31.416 31.416"
      fill="none"
      stroke-linecap="round"
      transform="rotate(67.21 50 50)"
    >
      <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" keyTimes="0;1" values="0 50 50;360 50 50" />
    circle>
  svg>
  <span>加载中 ...span>
div>

阻止窗口关闭

可以在关闭前一些事件里做拦截，比如：onbeforeunload 等，详见实例事件。

手动关闭窗口

当自定义关闭时，使用 mainWindow.destroy() 来关闭窗口，因为使用 mainWindow.close() 时，windows 系统打开开发者工具时会出现无法关闭窗口的情况。

全局快捷键

当 electron 版本较低时，比如 13.1.7，会出现在 mac 系统上复制粘贴等常用快捷键失效的问题。可通过设置菜单并绑定快捷键的方式解决。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40


const main = [
  {
    label: '',
    submenu: [
      { label: '关于', role: 'about' },
      { label: '关闭', role: 'close' },
      { label: '退出', role: 'quit' }
    ]
  },
  {
    label: '编辑',
    submenu: [
      { label: '撤销', role: 'undo' },
      { label: '恢复', role: 'redo' },
      { type: 'separator' },
      { label: '剪切', role: 'cut' },
      { label: '复制', role: 'copy' },
      { label: '粘贴', role: 'paste' },
      { type: 'separator' },
      { label: '全选', role: 'selectAll' }
    ]
  }
];
const dev = [
  {
    label: '开发者',
    submenu: [
      { label: '刷新', role: 'reload' },
      { label: '强制刷新', role: 'forcereload' },
      { type: 'separator' },
      { label: '开发者工具', role: 'toggledevtools' }
    ]
  }
];

if (process.env.NODE_ENV === 'development') {
  main.push(...dev);
}

export default main;

1
2
3
4
5
6
7


import memuConfig from './menu';
import { Menu } from 'electron';

if (process.platform === 'darwin') {
  const menu = Menu.buildFromTemplate(memuConfig);
  Menu.setApplicationMenu(menu);
}

electron-builder

下载时，可能因为网络问题导致下载失败，可设置 GitHub 下载镜像。

1
2


# GitHub 仓库下载地址前缀镜像
# disturl=https://registry.npmmirror.com/-/binary/

或者去 GitHub 手动下载，然后解压到缓存目录：

macOS: ~/Library/Caches/electron-builder/
linux: ~/.cache/electron-builder/
windows: %LOCALAPPDATA%\electron-builder\cache\

mac 上缓存目录如下，其他可参考

1
2
3
4
5
6
7


▸ nsis/
  ▸ nsis-resources-3.4.1/
  ▸ nsis-3.0.4.1/
▸ winCodeSign/
  ▸ winCodeSign-2.6.0/
▸ wine/
  ▸ wine-4.0.1-mac/

windows 打包

windows 系统打包配置，当没有配置签名时，sign 字段应删除或者配置为 null，否则可能导致打包时报错。

1
2
3
4
5
6
7
8


{
  "win": {
    "icon": "static/icons/icon.ico",
    "verifyUpdateCodeSignature": false,
    "target": "nsis",
    "sign": null
  }
}

注：win11 打包在 win10 上可能运行不了，最好使用 win10 打包或者 mac 打包指定系统和位数。

macOS 打包

问题：mac 升级之后 electron 打包报错 Exit code: ENOENT. spawn /usr/bin/python ENOENT

解决：网上搜到的下载 python 2.7 是治标不治本，正确做法是升级 electron-builder 到 23.0.2 或更高版本，参考 electron-builder#6726

参考链接

Electron-Mac 应用的签名步骤说明

前端页面内容加密总结

Lruihao — Mon, 08 Aug 2022 13:49:22 +0800

记录一下前端实现页面加密的思路。

加密基础知识

双向加密

可还原的加密算法，可以逆向解密。

对称加密（单密钥加密）

采用单钥密码系统的加密方法，同一个密钥同时用作信息的加密和解密。

密钥生成算法有 DES、3DES、AES。
非对称加密（公开密钥系统）

两个密钥：公开密钥（publickey）和私有密钥（privatekey）。

公钥/私钥加密/签名，用私钥/公钥解密/验证签名。

密钥生成算法有 RSA（公钥、私钥）、DSA（公钥、私钥、数字签名）。

单向加密

不可还原的加密算法（暴力撞库除外），常见的算法有：MD5、SHA1、SHA256、SHA512。

页面内容加密

内容加密算法

通过比对密码和输入的 md5 值来判断密码是否输入正确
密码验证通过后，开始解密内容
1. 拿到正确的输入值的 sha256 值的部分内容
2. 然后按照加密规则解秘内容

这里利用 Set 进行事件管理，简单模拟了 addEventListener 和 removeEventListener 的操作。并提供了两个事件：decrypted 和 reset，详见 fixit-decryptor.js。

Node.js + GitHub Actions 自动刷新 CDN

Lruihao — Sun, 07 Aug 2022 14:40:33 +0800

问题

腾讯云云函数从 2022 年 6 月 1 日开始收费了，差不多每个月 12 块，对于可能几个月都用不上一次云函数刷新缓存的人来说，有点太贵了。使用 Node.js 和 GitHub Actions 刷新 CDN 的方式，可以节省不少钱。

安装依赖

1

npm install qcloud-cdn-node-sdk

编写脚本

1

vim .scripts/qcloudcdn.js

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


/**
 * Refresh Qcloud CDN cache
 * @command `node qcloudcdn.js $SECRET_ID $SECRET_KEY`
 */
const qcloudSDK = require('qcloud-cdn-node-sdk');

// Get the config from https://console.qcloud.com/capi
qcloudSDK.config({
  secretId: process?.argv[2],
  secretKey: process?.argv[3]
});

qcloudSDK.request(
  'RefreshCdnDir',
  {
    // See https://cloud.tencent.com/document/api/228/3947
    'dirs.0': 'https://lruihao.cn/'
  },
  (res) => {
    res.code && console.log(res);
  }
);

增加快捷指令

打开 package.json 增加 scripts:

1
2
3
4
5


{
  "scripts": {
    "qcloudcdn": "node .scripts/qcloudcdn.js $SECRET_ID $SECRET_KEY"
  }
}

运行方式：

1

SECRET_ID= SECRET_KEY= npm run qcloudcdn

Mac OS 环境变量配置（可选）

重新认识 JavaScript

Lruihao — Sun, 01 May 2022 10:59:36 +0800

前言

前端框架轮替变化越来越快，JavaScript 也在不断地升级迭代，越来越多的新特性让我们的代码写起来变得简洁有趣。

每隔一段时间就该重新认识一下 JS，这篇文章会介绍 6 种新特性，一起研究一下吧。

数组方法 some, every, find, filter, map

共同点：这几个方法都不会改变原始数组。

some

some() 方法测试数组中是不是至少有 1 个元素通过了被提供的函数测试，它返回一个布尔值。

数组中有至少一个元素通过回调函数的测试就会返回 true，所有元素都没有通过回调函数的测试返回值才会为 false。

1

arr.some(callback(element[, index[, array]])[, thisArg])

1
2


[2, 5, 8, 1, 4].some((x) => x > 10); // false
[12, 5, 8, 1, 4].some((x) => x > 10); // true

技巧

some() 不会对空数组进行检测，空数组返回 false

every

助记：every() 和 some() 功能相反

every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试，它返回一个布尔值。

如果回调函数的每一次返回都为 truthy 值，返回 true ，否则返回 false。

1

arr.every(callback(element[, index[, array]])[, thisArg])

1
2


[12, 5, 8, 130, 44].every((x) => x >= 10); // false
[12, 54, 18, 130, 44].every((x) => x >= 10); // true

技巧

every() 不会对空数组进行检测，空数组返回 true

Find

助记：功能和 some() 类似，some() 返回布尔值，find() 返回找到的元素

find() 方法返回数组中满足提供的测试函数的第一个元素的值，否则返回 undefined。

1

arr.find(callback[, thisArg])

1
2
3
4
5
6


const array1 = [5, 12, 8, 130, 44];

const found = array1.find((element) => element > 10);

console.log(found);
// expected output: 12

引用

另请参见 findIndex() 方法，它返回数组中找到的元素的索引，而不是其值。

如果你需要找到一个元素的位置或者一个元素是否存在于数组中，使用 Array.prototype.indexOf() 或 Array.prototype.includes()。

filter

助记：如字面意思，它是一个筛子，会筛选出满足条件的元素

filter() 方法创建一个新数组，其包含通过所提供函数实现的测试的所有元素。

返回值是一个新的、由通过测试的元素组成的数组，如果没有任何数组元素通过测试，则返回空数组。

1

var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

1
2
3
4
5
6


const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter((word) => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

map

助记：功能和 filter() 类似，filter() 返回筛选的元素，map() 返回筛选的结果值

map() 方法创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。

返回值是一个新的、由通过测试的元素组成的数组，如果没有任何数组元素通过测试，则返回空数组。

1
2
3


var new_array = arr.map(function callback(currentValue[, index[, array]]) {
 // Return element for new_array
}[, thisArg])

1
2
3
4
5
6
7


const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map((x) => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

使用 `Object.hasOwn` 替代 `in` 操作符

有时，我们想知道对象上是否存在某个属性，一般会使用 in 操作符或 obj.hasOwnProperty，但它们都有各自的缺陷。

如果指定的属性位于对象或其原型链中，in 运算符将返回 true。

1
2
3
4
5
6
7
8


const Person = function (age) {
  this.age = age;
};
Person.prototype.name = 'fatfish';

const p1 = new Person(24);
console.log('age' in p1); // true
console.log('name' in p1); // true  注意这里

obj.hasOwnProperty

hasOwnProperty 方法会返回一个布尔值，表示对象自身属性中是否具有对应的值（原型链上的属性不会读取）。

1
2
3
4
5
6
7
8


const Person = function (age) {
  this.age = age;
};
Person.prototype.name = 'fatfish';

const p1 = new Person(24);
console.log(p1.hasOwnProperty('age')); // true
console.log(p1.hasOwnProperty('name')); // fasle  注意这里

obj.hasOwnProperty 已经可以过滤掉原型链上的属性，但在某些情况下，它还是不安全。

1
2


Object.create(null).hasOwnProperty('name');
// Uncaught TypeError: Object.create(...).hasOwnProperty is not a function

Object.hasOwn

别急，我们可以使用 Object.hasOwn 来避免这两个问题，这比 obj.hasOwnProperty 方法更加方便、安全。

1
2
3
4
5


let object = { age: 24 };
Object.hasOwn(object, 'age'); // true

let object3 = Object.create(null);
Object.hasOwn(object3, 'age'); // false

使用 “#” 声明私有属性

以前，我们一般用 _ 表示私有属性，但它并不靠谱，还是会被外部修改。

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


class Person {
  constructor(name) {
    this._money = 1;
    this.name = name;
  }
  get money() {
    return this._money;
  }
  set money(money) {
    this._money = money;
  }
  showMoney() {
    console.log(this._money);
  }
}
const p1 = new Person('fatfish');
console.log(p1.money); // 1
console.log(p1._money); // 1
p1._money = 2; // 依旧可以从外部修改_money 属性，所以这种做法并不安全
console.log(p1.money); // 2
console.log(p1._money); // 2

使用 # 实现真正私有属性

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


class Person {
  #money = 1;
  constructor(name) {
    this.name = name;
  }
  get money() {
    return this.#money;
  }
  set money(money) {
    this.#money = money;
  }
  showMoney() {
    console.log(this.#money);
  }
}
const p1 = new Person('fatfish');
console.log(p1.money); // 1
// p1.#money = 2 // 没法从外部直接修改
p1.money = 2;
console.log(p1.money); // 2
console.log(p1.#money); // Uncaught SyntaxError: Private field '#money' must be declared in an enclosing class

有用的数字分隔符

可以使用 _ 分隔数字，当然也可以用于计算

1
2
3
4
5
6
7


// ✅ 更加易于阅读
const newSixBillion = 6000_000_000;
// ❌ 难以阅读
const originSixBillion = 6000000000;

console.log(newSixBillion === originSixBillion);
// expected output: true

1
2


const sum = 1000 + 6000_000_000;
// expected output: 6000001000

技巧

另外，我们写时间时，24*60*60*1000 的可读性也是远大于 86400000 的。

“?.”, “??”, “??=” 的使用

可选链 ?.

以前我们为了简化 if else，通常会写出这样的代码

1
2
3
4
5


const obj = null;
console.log(obj && obj.name);

const $title = document.querySelector('.title');
const title = $title ? title.innerText : undefined;

使用 ?. 简化 && 和三元运算符

1
2
3
4
5


const obj = null;
console.log(obj?.name);

const $title = document.querySelector('.title');
const title = $title?.innerText;

空值合并运算符 ??

之前给变量赋默认值时，我们一般会用 || 来写，比如

1
2
3
4
5
6
7


let foo = 1;
let bar = foo || 2;
console.log(bar); // 1

let foo = 0;
let bar = foo || 2;
console.log(bar); // 2 注意这里

所以，|| 有时候并不是很安全，所以我们不得不加判断

1
2
3


let foo = 0;
let bar = foo !== undefined ? foo : 2;
console.log(bar); // 0

现在使用 ?? 可以使代码更加优雅

1
2
3
4
5
6
7


let foo = 1;
let bar = foo ?? 2;
console.log(bar); // 1

let foo = 0;
let bar = foo ?? 2;
console.log(bar); // 0

空值赋值运算符 ??=

1
2
3
4
5
6
7


let foo = 0;
foo ??= 2;
console.log(foo); // 0

let foo = 1;
foo ??= 2;
console.log(foo); // 1

很好理解，这里的 foo ??= 2 等价于 foo = foo ?? 2

使用 BigInt 支持大数计算

JS 中超过 Number.MAX_SAFE_INTEGER 的数字计算将是不安全的。

Example:

1
2
3


Math.pow(2, 53) === Math.pow(2, 53) + 1; // true
// Math.pow(2, 53) => 9007199254740992
// Math.pow(2, 53) + 1 => 9007199254740992

使用 BigInt 完全可以避免这个问题

1
2
3


BigInt(Math.pow(2, 53)) === BigInt(Math.pow(2, 53)) + BigInt(1); // false
// BigInt(Math.pow(2, 53)) => 9007199254740992n
// BigInt(Math.pow(2, 53)) + BigInt(1) => 9007199254740993n

要创建一个 BigInt，可以在一个整数的末尾添加字符n，或者调用函数 BigInt()。

1
2
3
4
5


let foo = BigInt(1); // 1n
let bar = BigInt(2); // 2n
console.log(foo > bar); // false

console.log(1n > 2n); // false

学无止境，与未来的自己共勉

Lightbox

Lruihao — Mon, 21 Jun 2021 16:18:04 +0000

簡介

Lightbox （燈箱），用来放大显示图片覆盖于当前页面之上。其是用 CSS 来定义图片容器，用一幅半透明的 png 图片实现渐变阴暗的效果。

一般的網頁，圖片是使用 img 標籤寫在 HTML 頁面中，圖片點擊并不會放大，想放大看圖片要麼方法整個網頁，要麼複製圖片鏈接新開窗口，操作繁瑣，而使用 Lightbox 的網站可以点击缩略图浮层显示大图，放大後可点击键盘 ←、→ 键切换图片，也可以鼠标点击左右箭头切换。按下键盘 Esc 键或者点击关闭按钮可輕鬆關閉圖層，圖片流覽的體驗度是遠遠大於未使用的 Lightbox 的網站。

實現思路

大概思路就在每个图片的点击事件中添加图层与图片副本。

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193


/**
 * @author github.com@flymysql
 */
let container = document.documentElement || document.body;
let img, div, src, btnleft, btnright;
var imgid = 0;
let x, y, w, h, tx, ty, tw, th, ww, wh;
let closeMove = function () {
  if (div == undefined) {
    return false;
  }
  div.style.opacity = 0;
  img.style.height = h + 'px';
  img.style.width = w + 'px';
  img.style.left = x + 'px';
  img.style.top = y - container.scrollTop + 'px';
  // 延迟移除 dom
  setTimeout(function () {
    div.remove();
    img.remove();
    btnright.remove();
    btnleft.remove();
  }, 100);
};

let closeFade = function () {
  if (div == undefined) {
    return false;
  }
  div.style.opacity = 0;
  img.style.opacity = 0;
  // 延迟移除 dom
  setTimeout(function () {
    div.remove();
    img.remove();
    btnright.remove();
    btnleft.remove();
  }, 100);
};

let style = function () {
  btnleft.style.cssText = `
    position:fixed;
    border-radius: 50%;;
    left:${x - 20}px;
    top:${y - container.scrollTop + h / 2}px;
    width:50px;
    height:50px;
    border: 0px;
    background-color: rgba(200,200,200,0.8);
    font-size: 20px;
    z-index: 999999999;
    transition:all .3s cubic-bezier(0.165, 0.84, 0.44, 1);
`;
  btnright.style.cssText = `
    position:fixed;
    border-radius: 50%;
    left:${x + w + 20}px;
    top:${y - container.scrollTop + h / 2}px;
    width:50px;
    border: 0px;
    height:50px;
    font-size: 20px;
    background-color: rgba(200,200,200,0.8);
    z-index: 999999999;
    transition:all .3s cubic-bezier(0.165, 0.84, 0.44, 1);
`;
  btnleft.innerText = '<';
  btnright.innerText = '>';

  img.style.cssText = `
    position:fixed;
    border-radius: 12px;
    left:${x}px;
    top:${y - container.scrollTop}px;
    width:${w}px;
    height:${h}px;
    z-index: 999999999;
    transition:all .3s cubic-bezier(0.165, 0.84, 0.44, 1);
    opacity:0;
`;
};

// 监听滚动关闭层
document.addEventListener('scroll', function () {
  closeFade();
});
document.querySelectorAll('img').forEach((v) => {
  if (v.parentNode.localName != 'a') {
    v.id = imgid;
    imgid++;
    v.addEventListener('click', function (e) {
      // 注册事件
      // 记录小图的位置个大小
      x = e.target.offsetLeft;
      y = e.target.offsetTop;
      w = e.target.offsetWidth;
      h = e.target.offsetHeight;
      src = e.target.src;
      id = e.target.id;
      // 创建遮罩层
      div = document.createElement('div');
      div.style.cssText = `
              position:fixed;
              left:0;
              top:0;
              bottom:0;
              right:0;
              background-color: rgba(25,25,25,0.8);
              z-index:99999999;
              transition:all .3s cubic-bezier(0.165, 0.84, 0.44, 1);
          `;
      document.body.appendChild(div);
      setTimeout(function () {
        div.style.opacity = 1;
      }, 0);
      // （此处可以加 loading)

      // 创建副本
      img = new Image();
      btnright = document.createElement('button');
      btnleft = document.createElement('button');
      img.src = src;
      style();

      btnleft.onclick = function () {
        if (id === 0) {
          alert('已经是第一张了！');
          return;
        }
        var left = document.getElementById(id - 1);
        img.src = left.src;
        x = left.offsetLeft;
        y = left.offsetTop;
        w = left.offsetWidth;
        h = left.offsetHeight;
        style();
        id--;
      };
      btnright.onclick = function () {
        id++;
        if (id >= imgid) {
          alert('已经是最后一张了！');
          return;
        }
        var right = document.getElementById(id);
        img.src = right.src;
        x = right.offsetLeft;
        y = right.offsetTop;
        w = right.offsetWidth;
        h = right.offsetHeight;
        style();
      };
      img.onload = function () {
        document.body.appendChild(img);
        document.body.appendChild(btnright);
        document.body.appendChild(btnleft);

        // 浏览器宽高
        wh = window.innerHeight;
        ww = window.innerWidth;

        // 目标宽高和坐标
        if (w / h < ww / wh) {
          th = wh - 80;
          tw = ((w / h) * th) >> 0;
          tx = (ww - tw) / 2;
          ty = 40;
        } else {
          tw = ww * 0.8;
          th = ((h / w) * tw) >> 0;
          tx = ww * 0.1;
          ty = (wh - th) / 2;
        }

        // 延迟写入否则不会有动画
        setTimeout(function () {
          img.style.opacity = 1;
          img.style.height = th + 'px';
          img.style.width = tw + 'px';
          img.style.left = tx + 'px';
          img.style.top = ty + 'px';
          btnleft.style.left = tx - 90 + 'px';
          btnleft.style.top = ty + th / 2 + 'px';
          btnright.style.left = tx + tw + 40 + 'px';
          btnright.style.top = ty + th / 2 + 'px';
          // 点击隐藏
          div.onclick = img.onclick = closeMove;
        }, 10);
      };
    }); //end event
  }
}); //end forEach

fancybox

fancybox 是一個完善的 lightbox 插件
jQuery lightbox script for displaying images, videos and more. Touch enabled, responsive and fully customizable.

Quick start

Add latest jQuery and fancyBox files

1
2
3
4


<script src="https://code.jquery.com/jquery-3.3.1.min.js">script>

<link href="/path/to/jquery.fancybox.min.css" rel="stylesheet" />
<script src="/path/to/jquery.fancybox.min.js">script>

Create links

1
2
3
4
5
6
7


<a data-fancybox="gallery" href="big_1.jpg">
  <img src="small_1.jpg" />
a>

<a data-fancybox="gallery" href="big_2.jpg">
  <img src="small_2.jpg" />
a>

Enjoy!

Cell Watermark

Lruihao — Sun, 23 May 2021 17:15:41 +0000

Usage

Browser

Clone source

1

git clone git@github.com:Lruihao/watermark.git

Load Watermark

1
2
3
4
5


<script type="text/javascript" src="./src/watermark.js">script>
<script type="text/javascript" src="./src/watermark.min.js">script>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/cell-watermark@1.0.3/src/watermark.js">script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/cell-watermark@1.0.3/src/watermark.min.js">script>

Initialization

1
2
3
4
5


document.addEventListener('DOMContentLoaded', function () {
  new Watermark({
    content: "cell-watermark"
  })
});

NPM

Install
1

npm i cell-watermark

Import

1
2
3


import Watermark from 'cell-watermark'
/* Or */
var Watermark = require("cell-watermark")

Class: Watermark

Watermark(options)

new Watermark(options)

Parameters:

Name	Type	Description
options	Object	The options of watermark（Properties）

Properties:

Name	Type	Default	Description
content	String		watermark’s text
appendTo	String	‘body’	parent of watermark’s container
width	Number	150	watermark’s width. unit: px
height	Number	20	watermark’s height. unit: px
rowSpacing	Number	60	row spacing of watermarks. unit: px
colSpacing	Number	30	col spacing of watermarks. unit: px
rotate	Number	15	watermark’s tangent angle. unit: deg
opacity	Number	0.1	watermark’s transparency
fontSize	Number	0.85	watermark’s fontSize. unit: rem
fontFamily	String	‘inherit’	watermark’s fontFamily

Author: Lruihao

Methods

upload(content)

Upload watermark’s text content

Parameters:

Name	Type	Description
content	String	watermark’s text

render(options)

Rerender watermark

Parameters:

Name	Type	Description
options	Object	The options of watermark（Properties）

destroy()

Force destroy watermark

利用腾讯云为静态页面添加“动态”相册

Lruihao — Sun, 24 Nov 2019 10:52:34 +0000

信息

cos 桶相册，终于！！终于来了！！，idea 来自 [兰州小红鸡 - 给 hexo 静态博客添加动态相册功能]，
功能虽好，但是还是先友情提示！
开放 API 是一个很危险的操作，意味着你的 cos 桶里面的所有资源包括目录结构都暴露的整个世界中，所以建议不要放一些比较私密的照片，保护自己的隐私，提防不良用心之人。下面就开始吧！

创建腾讯云 cos 存储桶

就创建一个 COS 就好了！有几点注意事项：

权限设置为共有读私有写
policy 权限设置整个桶的读操作
跨域访问 CORS 设置，自己随意

上传照片

首先我这个 cos 相册，相册分类就是文件夹分类，所以 cos 桶里面先新建不同的文件夹，文件夹名称就是相册名称，每个相册里面需要放置一张名称为**“封面.jpg”**的图片作为该相册的封面。

上传工具

COSBrowser GUI 工具，桌面/移动版【官方、推荐】
COSCMD 命令行工具【官方】
PicGo 图床上传工具【第三方、推荐】

食用方式

cos album 相册源码下载地址，别忘点赞哈 http://github.com/Lruihao/cos-album

首先，下载源码，引入 cos-album.css 和 cos-album.js
然后，在你的 js 中 new 一个 Cosalbum 对象 ( xmlLink 后不需要添加/)

Step1

1
2


<link rel="stylesheet" type="text/css" href="cos-album.min.css?v=1.1.2">
<script type="text/javascript" src="cos-album.min.js?v=1.1.2"></script>

Step2

1
2
3
4
5
6
7
8


<script type="text/javascript">
  new Cosalbum({
    'xmlLink': 'https://img-xxxxxxxxxx.cos.ap-chengdu.myqcloud.com',
    'prependTo': '.cos-album',
    'viewNum': 8,
    'imgUrl': '//img.lruihao.cn'
  });
</script>

Params

param	type	default	description
xmlLink	String		需要解析的騰訊云 COS 桶 XML 鏈接
prependTo	String	‘body’	可選解析相冊到某個節點
viewNum	Number	4	每個相冊顯示的照片數目
copyUrl	String	href	CDN 链接，雙擊複製 URL Since: 1.1.6
imgType	String	[‘jpg’, ‘jpeg’, ‘png’, ‘gif’, ‘svg’]	图片類型 Since: 1.1.6
videoType	String	[‘mp4’, ‘mp3’, ‘avi’, ‘mov’, ‘qt’]	視頻類型 Since: 1.1.6

viewport 视个人情况添加。
hexo 中使用时 css 和 js 都需要做适当调整，配合加密功能使用等等，这里不再展开。
注：代码设定不加载根目录文件，所以可以利用静态服务把源码部署在根目录，配合 PicGo、COSBrowser 上传来搭建个人图床。

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



<html>
  <head>
    <meta charset="UTF-8" />
    <title>cos-albumtitle>
    
    <link rel="stylesheet" type="text/css" href="cos-album.css" />
    <script type="text/javascript" src="cos-album.js" defer>script>
  head>
  <body>
    <script type="text/javascript">
      new Cosalbum({
        xmlLink: 'https://img-xxxxxxxxxx.cos.ap-chengdu.myqcloud.com',
        prependTo: '.cos-album',
        viewNum: 8,
        copyUrl: '//img.lruihao.cn'
      });
    script>
    
  body>
html>

cos-album demo

changelog

2020-9-28 22:46
1. 升級：相冊封裝成類，可以更方便 new 出來
2. 優化：相冊圖片樣式優化
2019-11-24 10:52:34 修改整理了一下代码，分割功能为函数，并写了注释，更加方便伸手党!

设置网站运行时间

Lruihao — Thu, 19 Sep 2019 22:03:29 +0000

使用javascript计算博客等网站的运行时间。

话不多说，直接贴码！

function createTime() {
  var now = new Date();
  var run = new Date('05/28/2018 20:01:01');
  //總的秒數
  var runTime = (now - run) / 1000,
    days = Math.floor(runTime / 60 / 60 / 24),
    hours = Math.floor(runTime / 60 / 60 - 24 * days),
    minutes = Math.floor(runTime / 60 - 24 * 60 * days - 60 * hours),
    seconds = Math.floor((now - run) / 1000 - 24 * 60 * 60 * days - 60 * 60 * hours - 60 * minutes);
  //前置零
  if (String(hours).length === 1) {
    hours = '0' + hours;
  }
  if (String(minutes).length === 1) {
    minutes = '0' + minutes;
  }
  if (String(seconds).length === 1) {
    seconds = '0' + seconds;
  }
  /*document.querySelector(".run-times").innerHTML = days + "  天 " + hours
          + "  时 " + minutes + "  分 " + seconds + "  秒";
  */
  document.querySelector('.run-times').innerHTML = 'RunTime: ' + days + ',' + hours + ':' + minutes + ':' + seconds + '';
}

//setInterval("createTime()", 500);
if (!document.hidden) {
  var siteTime = setInterval('createTime()', 500);
} else {
  clearInterval(siteTime);
}

/**
 * HTML 写法
载入时分秒 ...
RunTime Loading...
*/

script 的三种加载方式 (async, defer)

Lruihao — Sun, 08 Sep 2019 11:47:50 +0000

注意

JS 的加载分为两个部分：下载和执行。
浏览器在执行 HTML 的时候如果遇到


  
       
    
请点击验证码处：↑ 


验证码 JS 来源互联网


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44


<script type="text/javascript">
	//设置一个全局的变量，便于保存验证码
    var code;
    function createCode(){
        //首先默认 code 为空字符串
        code = '';
        //设置长度，这里看需求，我这里设置了 4
        var codeLength = 4;
        var codeV = document.getElementById('code');
        //设置随机字符
        var random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R', 'S','T','U','V','W','X','Y','Z');
        //循环 codeLength 我设置的 4 就是循环 4 次
        for(var i = 0; i < codeLength; i++){
            //设置随机数范围，这设置为 0 ~ 36
             var index = Math.floor(Math.random()*36);
             //字符串拼接 将每次随机的字符 进行拼接
             code += random[index];
        }
        //将拼接好的字符串赋值给展示的 Value
        codeV.value = code;
    }

    //下面就是判断是否== 的代码，无需解释，也可以结合 ajax 在后台做判断
    function validate(){
        var Input = document.getElementById('input');
        var oValue = Input.value.toUpperCase();
        if(oValue ==0){
            alert('请输入验证码');
        }else if(oValue != code){
            Input.value = '';
            alert('验证码不正确，请重新输入');
            createCode();
        }else{
            Input.value = '';
            alert('验证码正确！');//window.open('http://lruihao.cn','_self');
        }
    }

    //设置此处的原因是每次进入界面展示一个随机的验证码，不设置则为空
    window.onload = function (){

        createCode();
    }
</script>



js 判断用户设备类型及平台
Lruihao — Sat, 03 Nov 2018 23:35:44 +0000
前端开发经常遇到需要判断用户的浏览设备，是 pc 端还是移动端，移动端使用的是什么手机系统？android、ios、ipad、windows phone 等等，有时候还需要知道用户浏览页面是在微信中打开还是在移动端浏览器中打开，等等一系列判断做一些相应的处理。
首先判断 pc 端还是移动端


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


function IsPC() {
        var userAgentInfo = navigator.userAgent;
        var Agents = ["Android", "iPhone",
                    "SymbianOS", "Windows Phone",
                    "iPad", "iPod"];
        var flag = true;
        for (var v = 0; v < Agents.length; v++) {
            if (userAgentInfo.indexOf(Agents[v]) > 0) {
                flag = false;
                break;
            }
        }
        return flag;
    }

判断用户移动端使用的系统平台


1
2
3
4
5
6
7
8


var u = navigator.userAgent;
    if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {
        //安卓手机
    } else if (u.indexOf('iPhone') > -1) {
        //苹果手机
    } else if (u.indexOf('Windows Phone') > -1) {
        //winphone 手机
    }

判断用户是否在微信中打开


1
2
3
4
5
6
7
8


function isWeiXin(){
        var ua = navigator.userAgent.toLowerCase();
        if(ua.indexOf('micromessenger') != -1) {
            return true;
        } else {
            return false;
        }
    }

实际运用
根据 pc 或者移动端控制飘花数目，降低 cpu 消耗，减少卡顿。demo


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


  




使用 js 准确获取当前页面 url 网址信息及 301 重定向实战
Lruihao — Sun, 28 Oct 2018 14:22:00 +0000
获取链接（转）
传送门

在 WEB 开发中，时常会用到 javascript 来获取当前页面的 url 网址信息，在这里是我的一些获取 url 信息的小总结。
下面我们举例一个 URL，然后获得它的各个组成部分：http://i.cnblogs.com/EditPosts.aspx?opt=1
window.location.href（设置或获取整个 URL 为字符串）


1
2


var test = window.location.href;
alert(test);

返回：http://i.cnblogs.com/EditPosts.aspx?opt=1
window.location.protocol（设置或获取 URL 的协议部分）


1
2


var test = window.location.protocol;
alert(test);

返回：http:
window.location.host（设置或获取 URL 的主机部分）


1
2


var test = window.location.host;
alert(test);

返回：i.cnblogs.com
window.location.port（设置或获取与 URL 关联的端口号码）


1
2


var test = window.location.port;
alert(test);

返回：空字符（如果采用默认的 80 端口 (update: 即使添加了：80)，那么返回值并不是默认的 80 而是空字符）
window.location.pathname（设置或获取与 URL 的路径部分（就是文件地址）)


1
2


var test = window.location.pathname;
alert(test);

返回：/EditPosts.aspx
window.location.search（设置或获取 href 属性中跟在问号后面的部分）


1
2


var test = window.location.search;
alert(test);

返回：?opt=1
PS：获得查询（参数）部分，除了给动态语言赋值以外，我们同样可以给静态页面，并使用 javascript 来获得相信应的参数值。
window.location.hash（设置或获取 href 属性中在井号“#”后面的分段）


1
2


var test = window.location.hash;
alert(test);

返回：空字符（因为 url 中没有）
js 获取 url 中的参数值
正则法


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


function getQueryString(name) {
  var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
  var r = window.location.search.substr(1).match(reg);
  if (r != null) {
    return unescape(r[2]);
  }
  return null;
}
// 这样调用：
alert(GetQueryString("参数名 1"));

alert(GetQueryString("参数名 2"));

alert(GetQueryString("参数名 3"));

split 拆分法


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


function GetRequest() {
  var url = location.search; //获取 url 中"?"符后的字串
  var theRequest = new Object();
  if (url.indexOf("?") != -1) {
    var str = url.substr(1);
    strs = str.split("&");
    for(var i = 0; i < strs.length; i ++) {
      theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
    }
  }
  return theRequest;
}
var Request = new Object();
Request = GetRequest();<br>// var id=Request["id"];
// var 参数 1, 参数 2, 参数 3, 参数 N;
// 参数 1 = Request['参数 1'];
// 参数 2 = Request['参数 2'];
// 参数 3 = Request['参数 3'];
// 参数 N = Request['参数 N'];


指定取
比如说一个 url：http://i.cnblogs.com/?j=js, 我们想得到参数 j 的值，可以通过以下函数调用。


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


function GetQueryString(name) {
  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
  var r = window.location.search.substr(1).match(reg); //获取 url 中"?"符后的字符串并正则匹配
  var context = "";
  if (r != null)
     context = r[2];
  reg = null;
  r = null;
  return context == null || context == "" || context == "undefined" ? "" : context;
}
alert(GetQueryString("j"));

301 重定向（实践）
由于之前把 blog 和网站主页分开在两个仓库所以要想在 blog 中 menu 里跳转到站外链接就要做一些处理。以前一直百度不到。
其实想法早就有了，只要在 blog 首页或者网站首页检测到https://lruihao.cn/home这个链接，或者检测到 home 字段就自动跳转。想法很简单。可是对 js 真的一点都不了解，以前百度也找不到实际的效果案例。所以还是自己写吧！附上蹩脚代码。


1
2
3
4
5


var path = window.location.href;
    //alert(path);
    if (path=='https://lruihao.cn/home/') {
      window.location.replace("https://www.lruihao.cn");
    }

或者


1
2
3
4
5


var path = window.location.pathname;
    //alert(path);
    if (path=='/home/') {
      window.location.replace("https://www.lruihao.cn");
    }

http 强制重定向 https


1
2
3
4
5
6
7
8


<script>
  var targetProtocol = "https:";
  var host = "lruihao.cn"; //域名判断，因为 localhost 仅支持 http
  if (window.location.host == host && window.location.protocol != targetProtocol){
    window.location.href = targetProtocol +
      window.location.href.substring(window.location.protocol.length);
    }
script>




网页夜间效果
Lruihao — Thu, 27 Sep 2018 13:13:31 +0000

这几天看到别人的博客有开关灯效果，就想给自己的博客也加一个，其实以前就在想了。经过谷歌百度后这样实现了。css+js

如何给 Web 页面增加夜间模式功能？其实所谓的夜间模式就是在页面上增加一个透明的遮罩层，但是遮罩层会挡住页面元素， 解决方法是 添加 DIV，给 DIV 的 outline 属性一个很大的 outline-width 值，用 outline 的边框作为遮罩，这样既能正常点击页面元素，又能达到夜间模式的效果。
css 部分


1
2
3
4
5
6
7
8
9


<style>
.cover{
    position:fixed;
    top: 0px;
    left: 0px;
    outline:5000px solid rgba(0, 0, 0, 0);//初始亮度
    z-index: 99999;
}
style>

js 部分


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


<script>
var brightness;
//显示遮罩
function cover(brightness) {
    if (typeof(div) == 'undefined') {
        div = document.createElement('div');
        div.setAttribute('style', 'position:fixed;top:0;left:0;outline:5000px solid;z-index:99999;');
        document.body.appendChild(div);
    } else {
        div.style.display = '';
    }
    div.style.outlineColor = 'rgba(0,0,0,' + brightness + ')';
}
//事件监听
window.addEventListener('keydown', function(e) {
    if (e.altKey && e.keyCode == 90) {
        cover(brightness = 0.3);
    }
    if (e.altKey && e.keyCode == 88) {
        cover(brightness = 0);
    }
    if (e.altKey && e.keyCode == 38) {
        if (brightness - 0.05 > 0.05) cover(brightness -= 0.05);
    }
    if (e.altKey && e.keyCode == 40) {
        if (brightness + 0.05 < 0.95) cover(brightness += 0.05);
    }
}, false);
</script>

html 部分


1




使用

Alt+Z: 打开夜间模式
Alt+X: 关闭
Alt+↑: 增加亮度
Alt+↓: 降低亮度



网页离开时改变标题“崩溃欺骗”
Lruihao — Wed, 26 Sep 2018 16:36:08 +0000

从暑假到现在有好几个小伙伴问我博客的标题怎么变来变去的，不想再和每个人都说一遍了，耽误时间，索性写一下。

创建一个 js 文件
我们先创建一个 js 文件，我们用记事本就好了，然后改个文件名，不妨就叫crash-cheat.js吧，你们可以随意！

然后把文件放到 source 文件夹的 js 文件夹的 src 里面。（我用的 next 主题，放这里统一存放，其他主题随意）
崩溃欺骗 (Jquery 版）


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


var OriginTitle = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
  if (document.hidden) {
    $('[rel="icon"]').attr('href', 'https://i.loli.net/2018/08/24/5b7fcb00ed9bf.png');
    document.title = '怎么回事╭(°A°`)╮';
    clearTimeout(titleTime);
  } else {
    $("[rel='icon']").attr('href', 'https://i.loli.net/2018/09/25/5baa4f21661e7.png');
    document.title = '小老弟 (ฅ>ω<*ฅ)';
    titleTime = setTimeout(function () {
      document.title = OriginTitle;
      $("[rel='icon']").attr('href', '/images/favicon-32x32-next.png');
    }, 2000);
  }
});

崩溃欺骗 (JS 版）


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


var oldTitle = document.title;
var titleTime; //標題恢復計時器
document.addEventListener('visibilitychange', function () {
  if (document.hidden) {
    document.querySelector("[rel='icon']").setAttribute('href', '/images/icons/favicon-32.png');
    document.title = '網站崩潰了！';
    clearTimeout(titleTime);
  } else {
    document.title = '其實並沒有！';
    document.querySelector("[rel='icon']").setAttribute('href', '/images/icons/crash.png');
    titleTime = setTimeout(function () {
      document.title = oldTitle;
    }, 1000);
  }
});

使用
在hexo\themes\hexo-theme-next\layout文件路径找到layout.swig文件，其他有些主题用的是.ejs后缀，一样的。

然后打开文件，在之间加入调用刚刚的 js。


1


<script type="text/javascript" src="/js/src/crash-cheat.js">script>

重新部署博客就可以了。


hexo 博客自定义 console log
Lruihao — Sat, 04 Aug 2018 16:19:06 +0000
看到知乎，百度的页面 F12 检查后都会有一些有趣的招聘信息。于是乎我也想给我的博客加一个。

我主要用到的工具：

console.log()
Notepad++
在线图片转文字工具

用法
用 js 在使用 console.log() 就行了，hexo 的主题文件在_layout.swig里，所以我们打开该文件，在该位置，添加 js 就行了；

  

图案
我用的我自己的一张照片（电脑上照片就那么几张。)，然后用 在线图片转文字工具 转字符，

选择文件，设置大小，然后生成，

  



  

生成后，复制 TXT 文件（下面那个框，上面的是 HTML 代码）


  


粘贴到 Notepad++ 里面，然后按图操作；


  


Ctrl+H 替换


  



  


最后就变成一个字符串了。
效果图

  


线上 demo, 按 F12 找到 console
我的 txt


1


\n`              @@#``@@@@@@@@@@@@@@@@@@##,`   \n`              @@#`;@@@@@@@@@@@@@@@@@@@':'   \n`              @@#`@@@@@@@@@@@@@@@@@@@#+#;`  \n`              @@#`@@@@@@@@@@@@@@@@@@###@'.  \n`              @@+.@@@@@@@@@@@@@@@@@@@@@##,  \n`              @@#,@@@@@@@@@@@@@@@@@@@@@@#,  \n`              #@#:@@@@@@@@@@@@@@@@@@@@@@@,  \n`              #@#'@@@@@@@@@@@@@@@@@@@@@@@.  \n`              +@#;@@@@@@@@@@@@@@@@@@@@@@#   \n`          `;: ;@#'@@@@@@@@@@@@@@@@@@+'+@'   \n`    `,,;';'+';'@@+:@@@@@@@@@@@@##@#',.:#;   \n,, ``    ``..,:;@@#'@@@@@@@@#####@@@@#:`:.   \n`       `````:++@@@@@@@@@@@@@###@@@@#+,..    \n        ``````.#@@@@@@@@@@@@@@#@@@#++#'``    \n`    ```.,,:,.`:@@@@@@@@@@@@@###@@@##'.`     \n``..`````..,::;+@@@@@@@@@@@@#+`::+##'`.      \n`      ````.```,@@@@@@@@@@@##;``.,';` `      \n``.;@@@@@@@@@@@@@@@@@@@@@@###;``..``````     \n#@@@@@@@@@@@@@@@@@@@@@@@@##@#;``,``,.``      \n@@@@@@@@@@@@@@@@@@@.`````..``.. +` `:`       \n@+''++#####@@#`.@@@``````` ` `,```  ``       \n';;;;'+##+'+.`;+@@@,..```` `` :,.            \n;::,,:;+#++``,,#@@@'..``````` ,`.``          \n;,,,,...'#.,,..#@@@#,,.`````` .````          \n:,,,,....`,::;''+#@#;,..`````````.``         \n:,,,.....'##++''';:+':,.`..,,...`            \n:,,,...#####+'+#@@@'.';+:.  ` ``             \n;,,.`'####'#,`.`+@@@+'``` `.`                \n;,.`#@@@#+:'+++##+@##@,,,,`                  \n',.#@@###'''';:,.```,+#.                     \n+,#@@@####;,,..```````````````         `.:,::\n+@@@@###+;,,..``````````````````          `.,\n#@@@##+',,,........``````````````            \n@@@@#+:,,,,`........``````````               \n@@@#+:,,,,.`````.....``````````           `` \n@@##':,......`````....```  `````          ```\n@@@#':,....,..``````..````    ```         ```\n@@@#',....,,,..```````````     ```         ..\n@@@#,.....,,,,.``  ````````   ``````         \n@@@+....,,,,,..`````````````   ``````````    \n@@@:....,,,,.LiRuihao````````  ```````````` \n#@@,....,,,,.Always Be Yourself !````````````\n,##,,...,::,.````````````..``````   `......``\n,'#,,..,,:::.`````````........``````   `.,,..\n\n 你好！\n 欢迎进入什么都不会的李瑞豪的个人网站！\nhttps://lruihao.cn\nhttps://www.lruihao.cn\nhttps://lruihao.github.io\nhttps://liruihao.coding.me\n\n\n\n

其他个人网站，个人博客也是可以的。

JavaScript - 分类 - 菠菜眾長

使用 Node.js 自动创建 Vue 的路由

源码

参考

Vue2 + tailwindcss 初始化

electron 踩坑总结

简介

知识点

进程

技术栈

安装

remote

问题点

打开外部浏览器

防抖与节流

devTools

启动白屏

启动前 loading

启动后 loading

阻止窗口关闭

手动关闭窗口

全局快捷键

electron-builder

windows 打包

macOS 打包

前端页面内容加密总结

加密基础知识

双向加密

单向加密

页面内容加密

Node.js + GitHub Actions 自动刷新 CDN

安装依赖

编写脚本

增加快捷指令

重新认识 JavaScript

数组方法 some, every, find, filter, map

使用 Object.hasOwn 替代 in 操作符

使用 “#” 声明私有属性

有用的数字分隔符

“?.”, “??”, “??=” 的使用

使用 BigInt 支持大数计算

Lightbox

簡介

實現思路

fancybox

Quick start

Cell Watermark

Usage

Browser

NPM

Class: Watermark

Watermark(options)

new Watermark(options)

Parameters:

Properties:

Methods

upload(content)

Parameters:

render(options)

Parameters:

destroy()

利用腾讯云为静态页面添加“动态”相册

创建腾讯云 cos 存储桶

上传照片

上传工具

食用方式

Step1

Step2

Params

changelog

设置网站运行时间

script 的三种加载方式 (async, defer)

js 判断用户设备类型及平台

首先判断 pc 端还是移动端

判断用户移动端使用的系统平台

判断用户是否在微信中打开

实际运用

使用 js 准确获取当前页面 url 网址信息及 301 重定向实战

获取链接（转）

window.location.href（设置或获取整个 URL 为字符串）

使用 `Object.hasOwn` 替代 `in` 操作符