前端 on 醉后的星星

javascript中文按拼音顺序排序

Wed, 15 Mar 2023 15:52:01 +0000

js的sort函数的默认排序方法是将排序对象转成字符串，然后根据字符串中每个字符的ascll码依次进行排序，对于不在ascll表中的中文无法进行排序。

localeCompare

localeCompare函数可以比较两个中文的顺序，用该方法配合sort方法可以实现中文排序：

names.sort((a, b) => {
 return a.username.localeCompare(b.username, 'zh');
});

进一步，如果想获得中文首字母，可以依次和每个字母的第一个中文进行比较，进而得出该中文字符的首字母：

const getFirstLetter = function(word) {
 let letters = "ABCDEFGHJKLMNOPQRSTWXYZ#";
 let zh = "阿八嚓哒妸发旮哈讥咔垃呣拏噢妑七呥扨它穵夕丫帀糳";
 for (let i = 0; i < letters.length - 1; i++) {
 if (word.localeCompare(zh[i], 'zh') >= 0 && word.localeCompare(zh[i + 1], 'zh') < 0) {
 return letters[i]
 }
 }
 return '#'
};

注意有些字母没有对应的姓氏，因此不在比较之列。本方法最大的问题是，微信小程序和很多浏览器内核都不支持该函数，用之前先做好测试。

第三方库

若不能使用上述方法，发现一个第三方库jian-pinyin，体积不大，可以直接给出汉字的拼音，很棒。地址：https://github.com/xinglie/pinyin 通过该库直接获取汉字的拼音，然后通过sort函数进行排序，注意js中字符串之间是可以直接比较大小的，比较的依据仍然是ascll。

let sp = function(word) {
 return getSpell(word, function(charactor, spell) {
 return spell[0];
 }, '')
}
names.sort((a, b) => {
 a = sp(a.username);
 b = sp(b.username);
 if (a < b) return -1;
 if (a > b) return 1;
 return 0
});

npm基本命令

Sat, 12 Feb 2022 14:26:00 +0000

npm -v

初始化

npm init
默认参数
npm init -y

查看已安装包

当前环境中的包
npm list
系统环境中的包
npm list -g

安装

npm install <Module Name>
or
npm i <Module Name>
安装到系统坏境中
npm i <Module Name> -g
安装到生产环境
npm i <Module Name> --save
or
npm i <Module Name> -S
安装到开发坏境
npm i <Module Name> --save-dev
or
npm i <Module Name> -D

淘宝cnpm

npm install -g cnpm

运行

npm run <Script Name>

帮助

npm help
npm -l

设置镜像

npm config set registry https://registry.npm.taobao.org
查看镜像
npm config get registry

TypeScript基础

Sat, 05 Jun 2021 14:09:00 +0000

https://www.tslang.cn/docs/home.html

变量

// 布尔
let isDone: boolean = false;
// 数字
let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
let binaryLiteral: number = 0b1010;
let octalLiteral: number = 0o744;
// 字符串
let fname: string = "bob";
let sentence: string = `Hello, my name is ${fname}.`;

// 数组
let list1: number[] = [1, 2, 3];
let list2: Array<number> = [1, 2, 3];
// 元组
let x: [string, number];
x = ["hello", 10]; // OK
// x = [10, "hello"]; // Error
// 枚举
enum Color {
 Red,
 Green,
 Blue,
}
let c: Color = Color.Green;
console.log(c); //1
let colorName: string = Color[2];
console.log(colorName); //Blue
// Any
let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // ok
let list: any[] = [1, true, "free"];
list[1] = 100;
let some; //声明时未指定类型时默认any
some = 1;
some = "a";
// void
function warnUser(): void {
 console.log("This is my warning message");
}
// undefined null 可以赋给其他类型变量
let u: undefined = undefined;
let n: null = null;
// never
function error(message: string): never {
 throw new Error(message);
}
function infiniteLoop(): never {
 while (true) {}
}
// Object
let o: object = {};
// 类型断言 规避类型检查
let someValue: any = "this is a string";
let strLength1: number = (<string>someValue).length;
let strLength: number = (someValue as string).length;
// 类型推断
let somea = 1; //类型自动推断为number
// somea = "1"; //报错
//联合类型
let star: string | number = "1";
star = 1;
// 别名
type mytype = string | number;
type Eventname = "Click" | "scroll";

接口

// 对象接口
interface person {
 name: string;
 age: number;
 readonly gender: string; //只读属性
 like?: string; //可选属性
 [propName: string]: any; //任意属性
}
// 索引
interface numberArr {
 [index: number]: number;
}
// 函数接口
interface SearchFunc {
 (source: string, subString: string): boolean;
}
let mySearch: SearchFunc;
mySearch = function (src, sub) {
 let result = src.search(sub);
 return result > -1;
};
// 类接口
interface ClockInterface {
 currentTime: Date;
 setTime(d: Date): void;
}
class Clock implements ClockInterface {
 currentTime: Date;
 setTime(d: Date) {
 this.currentTime = d;
 }
 constructor(h: number, m: number) {
 this.currentTime = new Date();
 }
}
// 接口继承
interface Shape {
 color: string;
}
interface PenStroke {
 penWidth: number;
}
interface Square extends Shape, PenStroke {
 sideLength: number;
}
let square = <Square>{};
square.color = "blue";
square.sideLength = 10;
square.penWidth = 5.0;

面向对象

class Animal {
 // 继承类可以访问
 protected name: string;
 // 构造函数里可以使用 public name 来简写
 constructor(name: string) {
 this.name = name;
 }
 move(distanceInMeters: number = 0) {
 console.log(`Animal moved ${distanceInMeters}m.`);
 }
 static isAnimal(animal: object): boolean {
 return animal instanceof Animal;
 }
}
//继承
class Dog extends Animal {
 // 私有属性，只读
 private readonly color: string = "blackack";
 constructor(name: string) {
 super(name);
 }
 move(distanceInMeters: number = 0) {
 console.log(`${this.name} moved ${distanceInMeters}m.`);
 }
 bark() {
 console.log(`${this.color} ${this.name}: Woof! Woof!`);
 }
}

const dog = new Dog("dog");
dog.move(10);
dog.bark();
console.log(Animal.isAnimal(dog));

//抽象类
abstract class absAnimal {
 abstract makeSound(): void; // 必须在派生类中实现
 move(): void {
 console.log("roaming the earch...");
 }
}

函数

//可选参数
function buildName1(firstName: string, lastName?: string) {
 if (lastName) return firstName + " " + lastName;
 else return firstName;
}
//默认参数
function buildName2(firstName: string, lastName = "Smith") {
 if (lastName) return firstName + " " + lastName;
 else return firstName;
}
//收集参数
function buildName3(firstName: string, ...restOfName: string[]) {
 return firstName + " " + restOfName.join(" ");
}
//函数重载
function getInfo(name: string): void;
function getInfo(age: number): void;
function getInfo(str: any): void {
 if (typeof str == "string") {
 console.log("名字:", str);
 }
 if (typeof str == "number") {
 console.log("年龄", str);
 }
}

泛型

function createArray<T>(value: T, length: number): Array<T> {
 let result: T[] = [];
 for (let i = 0; i < length; i++) {
 result[i] = value;
 }
 return result;
}
let a = createArray([1, 2, 3], 3);

class GenericNumber<T> {
 zeroValue: T;
 add: (x: T, y: T) => T;
}

let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function (x, y) {
 return x + y;
};

阿里云OSS自动上传部署静态网站

Sat, 29 May 2021 13:44:00 +0000

准备

现要利用阿里云OSS部署一个静态网页，通过本地编译生成静态网页后实现自动上传更新部署。

首先开通阿里OSS服务，然后新建一个存储桶，权限设为公共可读，地域选择香港，因为国内域名需备案。
去存储桶基础设置->静态页面设置首页为index.html；然后去传输管理->绑定域名，最后去DNS设置cname，也可以自行配置CDN加速。
然后去阿里云控制台新建一个RAM访问控制用户，记住accessKeyId和accessKeySecret，然后为该用户添加OSS权限。

本地上传代码

本地安装npm i ali-oss -D，我们要实现将本地dist目录下所有的文件原封不动的上传至OSS上，为了保持OSS文件清洁，上传前最好先清空OSS，最终代码如下。

const OSS = require("ali-oss");
const path = require("path");
var fs = require("fs");

const client = new OSS({
 region: "oss-cn-hongkong",
 accessKeyId: "xxxxxxxxxxxx",
 accessKeySecret: "xxxxxxxxxxxx",
 bucket: "xxxxxx",
});

async function list() {
 try {
 let result = await client.list();
 result = result.objects || [];
 let file_list = result.map(i => i.name);
 return file_list;
 } catch (err) {
 console.log(err);
 }
}

async function deleteMulti(filelist) {
 try {
 let result = await client.deleteMulti(filelist, {
 verbose: true,
 });
 console.log("deleted:\n", result.deleted);
 } catch (e) {
 console.log(e);
 }
}

async function put(filename) {
 try {
 let result = await client.put(
 filename.slice(5).replace(/\\/g, "/"),
 path.normalize(filename)
 );
 console.log("upload: ", result.name);
 } catch (e) {
 console.log(e);
 }
}
function getAllfiles(dir, filelist) {
 let files = fs.readdirSync(dir);
 files.forEach(file => {
 let filepath = path.join(dir, file);
 let stat = fs.statSync(filepath);
 if (stat.isFile()) filelist.push(filepath);
 if (stat.isDirectory()) {
 filelist = filelist.concat(getAllfiles(filepath, []));
 }
 });
 return filelist;
}
async function main() {
 const file_list = await list();
 console.log("quire result:\n", file_list);
 if (file_list.length > 0) {
 await deleteMulti(file_list);
 }
 let files = getAllfiles("./dist", []);
 files.forEach(file => {
 put(file);
 });
}
main();

运行结果

参考

https://help.aliyun.com/document_detail/32068.html?spm=a2c4g.11186623.6.1058.42b92a220SHC2F https://help.aliyun.com/document_detail/39630.html?spm=a2c4g.11186623.6.666.1b263331Q5jiQY

gulp入门

Fri, 28 May 2021 12:30:00 +0000

// 全局安装以便可以命令行调用gulp命令
npm install -g gulp-cli

npm init -y
npm i gulp -D

gulpfile.js

旧task写法

const gulp = require("gulp");
const imagemin = require("gulp-imagemin");
const uglify = require("gulp-uglify");
const sass = require("gulp-sass");
const concat = require("gulp-concat");
const { series } = require("gulp");

// 复制文件
gulp.task("html", async function () {
 gulp.src("src/*.html").pipe(gulp.dest("dist"));
});
// 压缩图片 得用cnpm安装
gulp.task("img", async function () {
 gulp.src("src/*.{jpg,png,gif}")
 .pipe(imagemin())
 .pipe(gulp.dest("dist/imgs"));
});
// 压缩合并js
gulp.task("js", async function () {
 gulp.src("src/*.js")
 .pipe(concat("index.js"))
 .pipe(uglify())
 .pipe(gulp.dest("dist/js"));
});

// sass处理
gulp.task("css", async function () {
 gulp.src("src/*.scss")
 .pipe(sass().on("error", sass.logError))
 .pipe(gulp.dest("dist/css"));
});

// 监听文件变化
gulp.task("watch", function () {
 gulp.watch("src/*.js", series("js"));
 gulp.watch("src/*.html", series("html"));
});

// 组合任务
gulp.task("default", series("html", "css", "img", "js"));

推荐写法

const imagemin = require("gulp-imagemin");
const uglify = require("gulp-uglify");
const sass = require("gulp-sass");
const concat = require("gulp-concat");
const babel = require("gulp-babel");
const gulp = require("gulp");
const del = require("del");

// 复制文件
function html() {
 return gulp.src("src/*.html").pipe(gulp.dest("dist"));
}
// 压缩图片 得用cnpm安装
function img() {
 return gulp
 .src("src/*.{jpg,png,gif}")
 .pipe(imagemin())
 .pipe(gulp.dest("dist/imgs"));
}
// 压缩合并js
function js() {
 return gulp
 .src("src/*.js")
 .pipe(concat("index.js"))
 .pipe(babel())
 .pipe(uglify())
 .pipe(gulp.dest("dist/js"));
}
// sass处理
function css() {
 return gulp
 .src("src/*.scss")
 .pipe(sass().on("error", sass.logError))
 .pipe(gulp.dest("dist/css"));
}
// 清空输出
function clean() {
 return del("dist/**/*");
}

// 监听文件变化
function watch() {
 gulp.watch("src/*.js", gulp.series(js));
 gulp.watch("src/*.html", gulp.series(html));
}

// 组合任务
exports.default = gulp.series(clean, html, css, js);
exports.watch = watch;
exports.clean = clean;
exports.img = img; //测试时这个插件有问题

启动

//编译
gulp
//监听
gulp watch

其他

新版sass需要安装npm i -D sass gulp-sass并如下引用

const sass = require('gulp-sass')(require('sass'));

参考

https://www.gulpjs.com.cn/docs/getting-started/quick-start/

网页中添加live2d看板娘

Wed, 19 May 2021 10:48:00 +0000

复现了大佬的操作，这里总结一下。大佬源文章：https://nocilol.me/archives/lab/add-dynamic-poster-girl-with-live2d-to-your-blog-02/

步骤

下载live2d.js：https://github.com/journey-ad/live2d_src/releases

新建`waifu-tips.js`

function render(template, context) {
 var tokenReg = /(\\)?\{([^\{\}\\]+)(\\)?\}/g;

 return template.replace(tokenReg, function (word, slash1, token, slash2) {
 if (slash1 || slash2) {
 return word.replace("\\", "");
 }

 var variables = token.replace(/\s/g, "").split(".");
 var currentObject = context;
 var i, length, variable;

 for (i = 0, length = variables.length; i < length; ++i) {
 variable = variables[i];
 currentObject = currentObject[variable];
 if (currentObject === undefined || currentObject === null)
 return "";
 }
 return currentObject;
 });
}
String.prototype.render = function (context) {
 return render(this, context);
};

var re = /x/;
console.log(re);
re.toString = function () {
 showMessage("哈哈，你打开了控制台，是想要看看我的秘密吗？", 5000);
 return "";
};

$(document).on("copy", function () {
 showMessage("你都复制了些什么呀，转载要记得加上出处哦", 5000);
});

$.ajax({
 cache: true,
 url: "path/to/waifu-tips.json",
 dataType: "json",
 success: function (result) {
 $.each(result.mouseover, function (index, tips) {
 $(document).on("mouseover", tips.selector, function () {
 var text = tips.text;
 if (Array.isArray(tips.text))
 text =
 tips.text[
 Math.floor(Math.random() * tips.text.length + 1) - 1
 ];
 text = text.render({ text: $(this).text() });
 showMessage(text, 3000);
 });
 });
 $.each(result.click, function (index, tips) {
 $(document).on("click", tips.selector, function () {
 var text = tips.text;
 if (Array.isArray(tips.text))
 text =
 tips.text[
 Math.floor(Math.random() * tips.text.length + 1) - 1
 ];
 text = text.render({ text: $(this).text() });
 showMessage(text, 3000);
 });
 });
 },
});

(function () {
 var text;
 if (document.referrer !== "") {
 var referrer = document.createElement("a");
 referrer.href = document.referrer;
 text =
 'Hello! 来自 <span style="color:#0099cc;">' +
 referrer.hostname +
 "</span> 的朋友";
 var domain = referrer.hostname.split(".")[1];
 if (domain == "baidu") {
 text =
 'Hello! 来自 百度搜索 的朋友<br>你是搜索 <span style="color:#0099cc;">' +
 referrer.search.split("&wd=")[1].split("&")[0] +
 "</span> 找到的我吗？";
 } else if (domain == "so") {
 text =
 'Hello! 来自 360搜索 的朋友<br>你是搜索 <span style="color:#0099cc;">' +
 referrer.search.split("&q=")[1].split("&")[0] +
 "</span> 找到的我吗？";
 } else if (domain == "google") {
 text =
 'Hello! 来自 谷歌搜索 的朋友<br>欢迎阅读<span style="color:#0099cc;">『' +
 document.title.split(" - ")[0] +
 "』</span>";
 }
 } else {
 if (window.location.href == "https://imjad.cn/") {
 //如果是主页
 var now = new Date().getHours();
 if (now > 23 || now <= 5) {
 text = "你是夜猫子呀？这么晚还不睡觉，明天起的来嘛";
 } else if (now > 5 && now <= 7) {
 text = "早上好！一日之计在于晨，美好的一天就要开始了";
 } else if (now > 7 && now <= 11) {
 text = "上午好！工作顺利嘛，不要久坐，多起来走动走动哦！";
 } else if (now > 11 && now <= 14) {
 text = "中午了，工作了一个上午，现在是午餐时间！";
 } else if (now > 14 && now <= 17) {
 text = "午后很容易犯困呢，今天的运动目标完成了吗？";
 } else if (now > 17 && now <= 19) {
 text = "傍晚了！窗外夕阳的景色很美丽呢，最美不过夕阳红~";
 } else if (now > 19 && now <= 21) {
 text = "晚上好，今天过得怎么样？";
 } else if (now > 21 && now <= 23) {
 text = "已经这么晚了呀，早点休息吧，晚安~";
 } else {
 text = "嗨~ 快来逗我玩吧！";
 }
 } else {
 text =
 '欢迎阅读<span style="color:#0099cc;">『' +
 document.title.split(" - ")[0] +
 "』</span>";
 }
 }
 showMessage(text, 6000);
})();

window.setInterval(showHitokoto, 30000);

function showHitokoto() {
 $.getJSON(
 "https://api.imjad.cn/hitokoto/?cat=&charset=utf-8&length=28&encode=json",
 function (result) {
 showMessage(result.hitokoto, 5000);
 }
 );
}

function showMessage(text, timeout) {
 if (Array.isArray(text))
 text = text[Math.floor(Math.random() * text.length + 1) - 1];
 console.log(text);
 $(".waifu-tips").stop();
 $(".waifu-tips").html(text).fadeTo(200, 1);
 if (timeout === null) timeout = 5000;
 hideMessage(timeout);
}
function hideMessage(timeout) {
 $(".waifu-tips").stop().css("opacity", 1);
 if (timeout === null) timeout = 5000;
 $(".waifu-tips").delay(timeout).fadeTo(200, 0);
}

新建`waifu-tips.json`，可以设置看板娘交互文字

{
 "mouseover": [
 {
 "selector": ".container a[href^='http']",
 "text": ["要看看 <span style=\"color:#0099cc;\">{text}</span> 么？"]
 },
 {
 "selector": ".fui-home",
 "text": ["点击前往首页，想回到上一页可以使用浏览器的后退功能哦"]
 },
 {
 "selector": "#tor_show",
 "text": ["翻页比较麻烦吗，点击可以显示这篇文章的目录呢"]
 },
 {
 "selector": "#comment_go,.fui-chat",
 "text": ["想要去评论些什么吗？"]
 },
 {
 "selector": "#night_mode",
 "text": ["深夜时要爱护眼睛呀"]
 },
 {
 "selector": "#qrcode",
 "text": ["手机扫一下就能继续看，很方便呢"]
 },
 {
 "selector": ".comment_reply",
 "text": ["要吐槽些什么呢"]
 },
 {
 "selector": "#back-to-top",
 "text": ["回到开始的地方吧"]
 },
 {
 "selector": "#author",
 "text": ["该怎么称呼你呢"]
 },
 {
 "selector": "#mail",
 "text": ["留下你的邮箱，不然就是无头像人士了"]
 },
 {
 "selector": "#url",
 "text": ["你的家在哪里呢，好让我去参观参观"]
 },
 {
 "selector": "#textarea",
 "text": ["认真填写哦，垃圾评论是禁止事项"]
 },
 {
 "selector": ".OwO-logo",
 "text": ["要插入一个表情吗"]
 },
 {
 "selector": "#csubmit",
 "text": ["要提交了吗，首次评论需要审核，请耐心等待~"]
 },
 {
 "selector": ".ImageBox",
 "text": ["点击图片可以放大呢"]
 },
 {
 "selector": "input[name=s]",
 "text": ["找不到想看的内容？搜索看看吧"]
 },
 {
 "selector": ".previous",
 "text": ["去上一页看看吧"]
 },
 {
 "selector": ".next",
 "text": ["去下一页看看吧"]
 },
 {
 "selector": ".dropdown-toggle",
 "text": ["这里是菜单"]
 },
 {
 "selector": "c-player a.play-icon",
 "text": ["想要听点音乐吗"]
 },
 {
 "selector": "c-player div.time",
 "text": ["在这里可以调整<span style=\"color:#0099cc;\">播放进度</span>呢"]
 },
 {
 "selector": "c-player div.volume",
 "text": ["在这里可以调整<span style=\"color:#0099cc;\">音量</span>呢"]
 },
 {
 "selector": "c-player div.list-button",
 "text": ["<span style=\"color:#0099cc;\">播放列表</span>里都有什么呢"]
 },
 {
 "selector": "c-player div.lyric-button",
 "text": ["有<span style=\"color:#0099cc;\">歌词</span>的话就能跟着一起唱呢"]
 },
 {
 "selector": ".waifu #live2d",
 "text": ["干嘛呢你，快把手拿开", "鼠…鼠标放错地方了！"]
 }
 ],
 "click": [
 {
 "selector": ".waifu #live2d",
 "text": ["是…是不小心碰到了吧", "萝莉控是什么呀", "你看到我的小熊了吗", "再摸的话我可要报警了！?●﹏●?", "110吗，这里有个变态一直在摸我(ó﹏ò?)"]
 }
 ]
}

新建`style.css`

.waifu {
 position: fixed;
 bottom: 0;
 left: 0;
 z-index: 1;
 font-size: 0;
 transition: all 0.3s ease-in-out;
 -webkit-transform: translateY(3px);
 transform: translateY(3px);
}
.waifu:hover {
 -webkit-transform: translateY(0);
 transform: translateY(0);
}
@media (max-width: 768px) {
 .waifu {
 display: none;
 }
}
.waifu-tips {
 opacity: 0;
 width: 250px;
 height: 70px;
 margin: -20px 20px;
 padding: 5px 10px;
 border: 1px solid rgba(224, 186, 140, 0.62);
 border-radius: 12px;
 background-color: rgba(236, 217, 188, 0.5);
 box-shadow: 0 3px 15px 2px rgba(191, 158, 118, 0.2);
 font-size: 12px;
 text-overflow: ellipsis;
 overflow: hidden;
 position: absolute;
 animation-delay: 5s;
 animation-duration: 50s;
 animation-iteration-count: infinite;
 animation-name: shake;
 animation-timing-function: ease-in-out;
}
.waifu #live2d {
 position: relative;
}

@keyframes shake {
 2% {
 transform: translate(0.5px, -1.5px) rotate(-0.5deg);
 }

 4% {
 transform: translate(0.5px, 1.5px) rotate(1.5deg);
 }

 6% {
 transform: translate(1.5px, 1.5px) rotate(1.5deg);
 }

 8% {
 transform: translate(2.5px, 1.5px) rotate(0.5deg);
 }

 10% {
 transform: translate(0.5px, 2.5px) rotate(0.5deg);
 }

 12% {
 transform: translate(1.5px, 1.5px) rotate(0.5deg);
 }

 14% {
 transform: translate(0.5px, 0.5px) rotate(0.5deg);
 }

 16% {
 transform: translate(-1.5px, -0.5px) rotate(1.5deg);
 }

 18% {
 transform: translate(0.5px, 0.5px) rotate(1.5deg);
 }

 20% {
 transform: translate(2.5px, 2.5px) rotate(1.5deg);
 }

 22% {
 transform: translate(0.5px, -1.5px) rotate(1.5deg);
 }

 24% {
 transform: translate(-1.5px, 1.5px) rotate(-0.5deg);
 }

 26% {
 transform: translate(1.5px, 0.5px) rotate(1.5deg);
 }

 28% {
 transform: translate(-0.5px, -0.5px) rotate(-0.5deg);
 }

 30% {
 transform: translate(1.5px, -0.5px) rotate(-0.5deg);
 }

 32% {
 transform: translate(2.5px, -1.5px) rotate(1.5deg);
 }

 34% {
 transform: translate(2.5px, 2.5px) rotate(-0.5deg);
 }

 36% {
 transform: translate(0.5px, -1.5px) rotate(0.5deg);
 }

 38% {
 transform: translate(2.5px, -0.5px) rotate(-0.5deg);
 }

 40% {
 transform: translate(-0.5px, 2.5px) rotate(0.5deg);
 }

 42% {
 transform: translate(-1.5px, 2.5px) rotate(0.5deg);
 }

 44% {
 transform: translate(-1.5px, 1.5px) rotate(0.5deg);
 }

 46% {
 transform: translate(1.5px, -0.5px) rotate(-0.5deg);
 }

 48% {
 transform: translate(2.5px, -0.5px) rotate(0.5deg);
 }

 50% {
 transform: translate(-1.5px, 1.5px) rotate(0.5deg);
 }

 52% {
 transform: translate(-0.5px, 1.5px) rotate(0.5deg);
 }

 54% {
 transform: translate(-1.5px, 1.5px) rotate(0.5deg);
 }

 56% {
 transform: translate(0.5px, 2.5px) rotate(1.5deg);
 }

 58% {
 transform: translate(2.5px, 2.5px) rotate(0.5deg);
 }

 60% {
 transform: translate(2.5px, -1.5px) rotate(1.5deg);
 }

 62% {
 transform: translate(-1.5px, 0.5px) rotate(1.5deg);
 }

 64% {
 transform: translate(-1.5px, 1.5px) rotate(1.5deg);
 }

 66% {
 transform: translate(0.5px, 2.5px) rotate(1.5deg);
 }

 68% {
 transform: translate(2.5px, -1.5px) rotate(1.5deg);
 }

 70% {
 transform: translate(2.5px, 2.5px) rotate(0.5deg);
 }

 72% {
 transform: translate(-0.5px, -1.5px) rotate(1.5deg);
 }

 74% {
 transform: translate(-1.5px, 2.5px) rotate(1.5deg);
 }

 76% {
 transform: translate(-1.5px, 2.5px) rotate(1.5deg);
 }

 78% {
 transform: translate(-1.5px, 2.5px) rotate(0.5deg);
 }

 80% {
 transform: translate(-1.5px, 0.5px) rotate(-0.5deg);
 }

 82% {
 transform: translate(-1.5px, 0.5px) rotate(-0.5deg);
 }

 84% {
 transform: translate(-0.5px, 0.5px) rotate(1.5deg);
 }

 86% {
 transform: translate(2.5px, 1.5px) rotate(0.5deg);
 }

 88% {
 transform: translate(-1.5px, 0.5px) rotate(1.5deg);
 }

 90% {
 transform: translate(-1.5px, -0.5px) rotate(-0.5deg);
 }

 92% {
 transform: translate(-1.5px, -1.5px) rotate(1.5deg);
 }

 94% {
 transform: translate(0.5px, 0.5px) rotate(-0.5deg);
 }

 96% {
 transform: translate(2.5px, -0.5px) rotate(-0.5deg);
 }

 98% {
 transform: translate(-1.5px, -1.5px) rotate(-0.5deg);
 }

 0%,
 100% {
 transform: translate(0, 0) rotate(0);
 }
}

网页中插入以下内容

<link rel="stylesheet" href="style.css" />
<div class="waifu">
 <div class="waifu-tips"></div>
 <canvas id="live2d" width="280" height="250" class="live2d"></canvas>
</div>
<script src="//cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script async src="waifu-tips.js"></script>
<script src="live2d.js"></script>
<script type="text/javascript">
 // 这里填写模型的model.json的地址
 loadlive2d("live2d", "models/snow_miku/model.json");
</script>

其中model需要自己制造或者下载大佬分享的

这个网站有一些分享的模型：https://mx.paul.ren/

案例

https://pan.2bboy.com/home/test/live2d/

CSS居中时内容溢出滚动显示不全的问题

Fri, 14 May 2021 02:42:27 +0000

当我们有如下的布局时，其中 img 是我们内容，用一个 overflow:auto 来设置一个滚动区域，当图片较长时，会发现即使滚动到顶部，图片顶部仍有部分看不到。

<!DOCTYPE html>
<html lang="zh">
 <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>Document</title>
 </head>
 <style>
 .container {
 width: 500px;
 height: 500px;
 overflow: auto;
 display: flex;
 justify-content: center;
 align-items: center;
 }
 img {
 width: 100%;
 }
 </style>
 <body>
 <div class="container">
 <img src="./static/1.jpg" alt="" />
 </div>
 </body>
</html>

解决方法

设置内容的 margin:auto 就可以滚动显示完全了。

img {
 width: 100%;
 margin: auto;
}

我们换一张宽度较宽的图，并设置 height:100%，这时新的问题出现了，图片滚动到最左边，图片左边仍有部分被遮挡显示不全。

img {
 height: 100%;
 margin: auto;
}

继续解决

我们换一种居中布局的方式，就可是使图片左右滚动能显示全。

.container {
 width: 500px;
 height: 500px;
 overflow: auto;
 position: relative;
}
img {
 height: 100%;
 margin: auto;
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
}

但是当我们换回高度较高的图片，并设置 width:100%时，发现问题又回来了，图片顶部显示不全。难道说说没有一种同时能满足上下滚动和左右滚动显示全的布局方式吗？

解决方案

一般来说图片要么 width:100%，要么 height:100%，所以上面选一种布局方式即可，但是我写的一个页面刚好要在两种状态中进行切换，因为切换是通过 js 操作的，可以在 css 里写两个布局，然后通过 js 控制元素 class 来进行切换。我在 flex 布局的基础上，当图片左右滚动不能显示完全时，只需要改变 flex-direction 的方向即可。

.container {
 width: 500px;
 height: 500px;
 overflow: auto;
 display: flex;
 justify-content: center;
 align-items: center;
 flex-direction: column;
}
img {
 height: 100%;
 margin: auto;
}

CSS盒子居中的几种方法

Thu, 13 May 2021 02:32:35 +0000

<!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>Document</title>
 <style>
 .container {
 background-color: darkorange;
 width: 500px;
 height: 500px;
 }
 .content {
 background-color: cyan;
 width: 200px;
 height: 200px;
 }
 </style>
 </head>
 <body>
 <div class="container">
 <div class="content"></div>
 </div>
 </body>
</html>

定位布局

.container {
 position: relative;
}
.content {
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 margin: auto;
}

定位+移动布局

.container {
 position: relative;
}
.content {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}

flex 布局

.container {
 display: flex;
 justify-content: center;
 align-items: center;
}

grid 布局

.container {
 display: grid;
 align-items: center;
 justify-items: center;
}

inline-block 布局

.container {
 text-align: center;
 line-height: 500px;
}
.content {
 display: inline-block;
 vertical-align: middle;
}

table-cell 布局

.container {
 display: table-cell;
 vertical-align: middle;
}
.content {
 margin: auto;
}