未读
给你的博客加一个优雅的音乐界面
很久之前就想把整个音乐界面好好写一写，不过一直迫于咕咕咕的属性没有去做这件事，以至于悔之不及，没有早点做，对我这种重度音乐控来说真的是太爽了，很快啊，马上就听了一下午。 前两天看到 叶子 重做了音乐界面于是马上就搞过来了啊，很快啊哈哈哈哈哈，谢谢大叶子的投喂！ 博主思路和叶子有所不同，每个人都有每个人的实现方法，本文仅做分享博主自己的实现思路。 在线体验一个优雅的音乐界面 效果图整体效果我还是非常满意的 hhh 魔改步骤博主使用的 meting2 的版本，修改主题配置文件 _config.butterfly.yml 最下面 CDN.option.meting_js，有能力的建议自己下载下来并传到自己的 oss 或直接使用本地路径引用。 1meting_js: https://npm.elemecdn.com/hexo-anzhiyu-music@1.0.1/assets/js/Meting2.min.js 创建页面, 新建 source/music/index.md 文件 123456789---title: 音乐馆date: 2021-04-24 21:41:30type: ...
操作系统复习题
操作系统 选择题 操作系统的最主要设计目标是（ ）。A．方便性和有效性 B．方便性和可扩展性C．有效性和可扩展性 D．有效性和开放性答：A有甲、乙两道算题，每道需执行 1 小时（其中处理器的工作时间为 12 分钟）。若它们在多道系统中执行，甲、乙两道题总共需执行 80 分钟，则处理器的利用率为（ ）。A．50% B．40% C．30% D．20%答：C从下面对临界区的论述中，选出一条正确的论述。（ ）A.临界区是指进程中用于实现进程同步的那段代码B.临界区是指进程中用于实现进程通信的那段代码C.临界区是指进程中用于访问共享资源的那段代码D.临界区是指进程中访问临界资源的那段代码答：D操作系统提供一组特殊的程序，它们不能被系统中断，在操作系统中称为（ ）。A.初始化程序 B.原语 C.子程序 D.控制模块答：B一种既有利于短小作业又兼顾到长作业的作业调度算法是（ ）。A．先来先服务 B．轮转 C．最高响应比优先 D．均衡调度答：C操作系统中，资源分配的基本单位是（ ）。A．进程 B．线程 C．作业 D．程序答：A进程之间的制 ...
2022年度总结
眨眼之间一年就过去了，这一年发生了好多好多的事情呐。多图流量警告。 在这一年里有试过在杭州剪过一次新发型。 关于工作今年年初继续上年在一家很棒的公司做着前端实习工作，虽然工资不高，只有 5k，不过在这里认识的人都特别好，以至于到现在也常有联系。 工位也很喜欢，每天来到办公室的第一件事就是开中央空调。因为是直播公司的缘故，在这里从来没有缺过零食，除了一开始的单休不太美丽以外，后续也改为了双休（打工人高呼） 临近春节以后给住了半年的小区最后拍了一张清晨的拱墅区。 在杭州的日子里，这座城市给我感觉很棒，很魔幻，可惜第一次来到一个陌生的城市，租到了一个离工作地点通勤需要地铁 1 个半小时 ➕ 公交半小时才能抵达滨江实在是令人窒息。也曾试过 6 点半起来然后骑自行车只需要 1 个小时多到达公司楼下，这样 8 点多到，然后吃个早餐就差不多正好（9 点考勤），不过实在是太累了（也有过买小电驴的想法 💡），但是杭州的小电驴管的特别严，给我印象最深刻的就是过斑马线的时候一大堆人和电瓶车一起等红绿灯 🚥 的场景，然后几个人开始抢跑 hhh，这是湘潭这种小县城所不具备的。 再后来过完年本来打 ...
![[转载]还在用 JS 做节流吗？CSS 也可以防止按钮重复点击](https://img02.anheyu.com/adminuploads/1/2022/09/05/6315e1487d0f0.webp!cover)
[转载]还在用 JS 做节流吗？CSS 也可以防止按钮重复点击
引用站外地址 还在用 JS 做节流吗？CSS 也可以防止按钮重复点击 https://juejin.cn/post/7165828047520661534 众所周知，函数节流（throttle）是 JS 中一个非常常见的优化手段，可以有效的避免函数过于频繁的执行。 举个例子：一个保存按钮，为了避免重复提交或者服务器考虑，往往需要对点击行为做一定的限制，比如只允许每300ms提交一次，这时候我想大部分同学都会到网上直接拷贝一段throttle函数，或者直接引用lodash工具库 1btn.addEventListener("click", _.throttle(save, 300)); 其实除了 JS 方式， CSS 也可以非常轻易的实现这样一个功能，无需任何框架库，一起看看吧 一、CSS 实现思路分析CSS 实现和 JS 的思维不同，需要从另一个角度去看待这个问题。 比如这里的需要对点击事件进行限制，也 ...
transform 支持单独赋值改变
在掘金看到一篇文章 引用站外地址 解放生产力！transform 支持单独赋值改变 https://juejin.cn/post/7152331836578856967 看完以后有感而发transform在制作动画时经常被占用，因为一个元素只能使用一个 transform，所以当我有多属性值需要设置时，我通常的做法是通过添加一个父元素来给它设置 transform 属性。 比如在魔改博客的过程中希望改变transform中的某一部分, 我必须把前面的部分也照抄一遍才能达到覆盖修改的目的 1234567header.nav { transform: scale(1.5); /*这样不行，会丢失translate*/}/*必须写完整*/header.nav { transform: translate(-50%, -50%) scale(1.5);} 所以transform很需要能够像 ...
css模糊羽化
在逛 codepen 的时候发现一个有意思的 css 羽化项目 引用站外地址 css羽化 css 羽化 原理是使用了 svg 中的 foreignObject 将 dom 转化为图片来创建一个边缘模糊的遮罩 让原本有backdrop-filter: blur(10px);的元素产生了羽化的效果 核心代码 12345678910.name { position: absolute; bottom: 30px; font-size: 50px; padding: 5px 15px; margin: 0; color: #fff; backdrop-filter: blur(10px); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3CforeignObje ...
未读
butterfly文章顶部添加波浪效果
预览效果 魔改修改 themes/butterfly/layout/includes/header/index.pug 大概第 33 行左右 123456789101112131415161718if top_img !== false if is_post() include ./post-info.pug+ section.main-hero-waves-area.waves-area+ svg.waves-svg(xmlns='http://www.w3.org/2000/svg', xlink='http://www.w3.org/1999/xlink', viewBox='0 24 150 28', preserveAspectRatio='none', shape-rendering='auto')+ defs+ path#gentle-wave(d='M -160 44 c 30 0 58 -18 88 ...
Chrome 发布新的 CSS 视口单位：svh、lvh、dvh！！！
引用站外地址 原文链接 The large， small， and dynamic viewport units 引用站外地址 原文翻译 Chrome 发布新的 CSS 视口单位：svh、lvh、dvh！！！ CSS 的 Viewport单位听起来很棒。 如果你想将一个元素设置成全屏高度，你可以设置高度:100vh，这样你就有了一个完美的全屏元素，它会随着视口的改变而改变大小！！！! 遗憾的是，事实并非如此！！！ vw、vh 的问题要调整视口大小，可以使用 vw 和 vh 单位。vw=视口大小宽度的 1%。vh=视口大小高度的 1%。给一个元素 100vw的宽度和 100vh 的高度，它将完全覆盖视口。 虽然现有的设备在桌面上运行良好，但在移动设备上则不同。在 ...
未读
bilibili动态背景
bilibili 动态背景 winter || autumn || spring，刷新随机顶部 cover，本篇不做教程，仅作为记录艰辛的过程 📝 本来集成成了好几个 pug 结果发现并不能结构化引入，最后还是变成了 js 操作，难受难受，果然写习惯了 vue， react 再回来就不熟练了 坎坷的失败品 本来拆分出来了了以下几个 pug，结果发现完全用不了autumn.pug12345678910111213141516.blqbanner.mobile-hidden div img(src='https://npm.elemecdn.com/anzhiyu-blog@2.1.7/img/banner/autumn/bilibili-autumn-1.webp') div img(src='https://npm.elemecdn.com/anzhiyu-blog@2.1.7/img/banner/autumn/bilibili-autumn-2.png') di ...
React组件之间的通信
React 的组件相对于 Vue 更加的灵活和多样，按照不同的方式可以分成很多类组件： 根据组件的定义方式，可以分为：函数组件(Functional Component )和类组件(Class Component)； 根据组件内部是否有状态需要维护，可以分成：无状态组件(Stateless Component )和有状态组件(Stateful Component)； 根据组件的不同职责，可以分成：展示型组件(Presentational Component)和容器型组件(Container Component)； React 中的组件之间的通信方法。 父子组件通信 下面这个案例演示了子传父与父传子通过 props 传递。 父组件 12345678910111213141516171819202122232425262728293031import React, { Component } from "react";import Header from "./Header";import Footer from &quo ...
为什么 react 的 setState 要设计成异步的
在使用 React 的类组件时候我们常常会使用 setState 来更新状态，那么 setState 到底是同步的还是异步的呢？ 1234changeMessage() { this.setState({message: "你好哇, 安知鱼"}) console.log(this.state.message); // hello world} 这段代码最终打印结果是 hello world，可见 setState 是异步的操作，我们并不能在执行完 setState 之后立马拿到最新的 state 的结果，那么 setState 一定是异步的吗？ 实践那么 setState 一定是异步的吗？实际上在 React18 之前分为两种情况 在组件生命周期或者 React合成事件中，setState 是异步的。 在 setTimeout 或者原生 dom 事件中（promise 之类的），setState 是同步的。 React18 之前的同步情况 123456changeMessage() { setTime ...
未读
butterfly控制特定图片懒加载
经常看我博客的同学应该不难发现我的文章顶图偶尔进来以后还要等一会才能出现，还有加载动画的图片偶尔加载不出来，后来经过我一系列的排查发现居然是懒加载的缘故。 观察 network 选项卡可以发现我们需要让启动器改变，不让lazyload.iife.min.js来加载我们的顶图与加载动画的头像。 方案一可以使用 css 的background属性而不使用 img 标签，就可以做到启动器变成对应的 css，从此排除懒加载的影响。 1234.loading-img { background: url("") no-repeat center center; background-size: cover;} 方案二（推荐）虽然 css 的方式可以做到排除但是这并不是我们所预期的，部分情况为了 seo 我们需要 img 标签且如果有多个特定图片需要指定不太好写 css，于是就产生了方案二。 我们观察butterfly对懒加载的实现可以发现，在themes/butterfly/scripts/filters/post_lazyload.js中第11行左 ...
