saber酱的抱枕

Fly me to the moon

09/19
09:40
学习

JavaScript 转换 CSS 里的长度单位

CSS 的常用长度单位有 px、em、rem、pt 等。今天我遇到一个情况,有两个网站都使用了 rem 作为单位,但是根元素(html)的字号并不相同,需要进行转换。

移植页面的根元素字号是 20px,CSS 规则如:
height: 4rem;

我的根元素字号是 100px,需要除以 5,改成:
height: 0.8rem;

因为需要修改的地方很多,所以我写了个正则来处理。本文的代码并不是一个通用的工具,只是提供了解决思路。

这次的情况是同一种单位之间的转换,有时候我们可能需要进行不同单位之间的转换,思路都是一样的,根据需要修改代码即可。
Read More →

JavaScript 转换 CSS 里的长度单位

08/27
02:49
学习

JavaScript 判断数字是否是质数

JavaScript 判断数字是否是质数

看到了一个 JavaScript 面试题,编写一个函数 isPrime,检查输入的参数是否是质数。

质数又称素数,定义为在大于1的自然数中,除了 1 和它本身以外不再有其他因数。也就是只能被 1 和它自身整除。

质数列表如: 2 3 5 7 11 13 17 19 23 ……

要点:
1.质数只能是正整数,所以负数、0、小数都不是质数。
2.质数是从 2 开始的,2 比较特殊,是质数里唯一一个偶数。对 2 要单独处理。
3.大于 2 的偶数都不是质数,因为可以被 2 整除。所以我们可以直接排除偶数,提高效率。
4.把奇数开平方,让奇数依次除以 3、5、7……一直到它的平方根,看有没有能整除的,如果有那就不是质数。
Read More →

JavaScript 判断数字是否是质数

08/4
10:20
学习 软件

把 zip 压缩包转换为 gif 动图

把 zip 压缩包转换为 gif 动图

最近我打算给 Pixiv 图片下载器添加下载 gif 图的功能,今天折腾出了这个 demo。

查看 demo 下载测试用的 zip 文件

Pixiv 的动态图并不是 gif 格式,而是一个 zip 压缩包,里面包含了很多张图片。把这些图片按顺序显示,看起来就像是动图一样。

很多人给我说过想要下载 gif 图,这个 demo 就可以把 zip 压缩包转换成 gif 动图。大家如果有以前在 Pixiv 下载的压缩包,也可以直接在这个 demo 里转换,转换之后右键保存即可。
Read More →

把 zip 压缩包转换为 gif 动图

07/4
09:47
学习 软件

Chrome 扩展修改 referer 实现跨域

通过 chrome.webRequest.onBeforeSendHeaders 事件来设置 referer,来达到跨域的目的。

1. 在 manifest.json 中声明权限

"permissions": [
    "tabs", "downloads", "webRequest", "webRequestBlocking", "*://www.pixiv.net/*", "*://www.pixivision.net/*", "*://i.pximg.net/*"
]

webRequest、webRequestBlocking 是必须的;后面的网址列表表示这个扩展的生效范围。

在做跨域的时候,需要把你的目标网址也添加进去。比如你的扩展运行在 a.com,去请求 b.com 的内容,那么这两个网址都要写进去。
Read More →

Chrome 扩展修改 referer 实现跨域

06/16
07:11
学习

用 Vue.js 给本站做了个皮肤(大概)

近来在学习 Vue.js,基础知识学的差不多了之后,想要做个项目融会贯通一下。这几天写了个博客前端,可以算是本站的一个皮肤(虽然丑)。这也是一个前后端分离的单页面应用。

在线访问:

saber 酱的抱枕 2 号

数据和图片资源都是直接用的本站的。数据由 WordPress REST API 提供,不用自己写 API 接口了。

通过这个项目,进一步熟悉了 Vue.js 和它的相关插件,也学了学 muse-ui 和 Less 的使用,收获不小。

github 地址:

https://github.com/xuejianxianzun/vue-myblog-xjxz

好歹算是个展示吧,不指望有人用(用也用不好,因为我图片开了防盗链)。如果有人要用这个改一改,给 WordPress 后台的网站做个前台倒可以,毕竟后台的 API 一致,用起来方便。

效果预览:
Read More →

用 Vue.js 给本站做了个皮肤(大概)

06/5
07:06
学习

《次北固山下》与《江南意》

刚才读唐诗,看到了《次北固山下》,读起来却感觉和印象中不一样。最后发现这首诗有两个版本。

《次北固山下》
《江南意》

客路青山外,行舟绿水前。
南国多新意,东行伺早天。

潮平两岸阔,风正一帆悬。

海日生残夜,江春入旧年。

乡书何处达?归雁洛阳边。
从来观气象,唯向此中偏。

这两个版本表达的感情不一样,如果不看中间两句,当做两首不同的诗也可以。

上面正常字体的是我们上学时学的版本,斜体的是《河岳英灵集》里收录的版本。《河岳英灵集》是唐代殷璠编选的专收盛唐诗的唐诗选本,成书于天宝十二年(唐玄宗时期)。我读的这本书可能是为了追求准确,使用了《河岳英灵集》中的版本。不过在注释里也说明了有其他版本。(《唐诗选》 马茂元 选注)

附图:
Read More →

《次北固山下》与《江南意》

05/21
06:04
学习 软件

Vue.js 制作的待办事项 todolist

Vue.js 制作的待办事项 todolist

前些时候学习 Vue.js,做了个 todolist(待办事项),可以把自己要做的事情写上去做个备忘。大致效果如上。

这是一个简单的单页应用,你可以直接在线使用

Github 地址

功能介绍:

您可以自由的添加、删除事项;切换完成状态;重命名;视需要设置定时提醒。
默认没有背景图片,因为用户可以自己设置背景图。(右下角设置区域)
默认有一个提醒铃声,用户也可以自行更改。
本页面会保存工作状态,关闭页面也不会丢失数据。 重新打开页面就可以继续使用了。
所有数据存储在用户本地,不收集用户信息。(话说我哪来的用户啊)
其他详见使用说明。(右下角设置区域)
Read More →

Vue.js 制作的待办事项 todolist

05/10
09:35
学习 软件

JavaScript 樱花飘落效果

JavaScript 樱花飘落效果

上图是截图,当然实际上樱花是会动的~

查看 SakuraDemo

看了之前的下雪demo不由得手痒了起来,sakura啊,我需要sakura!然后果然在这里找到了一个,打开一看,好好看我喜欢呀~快F12扒下来吧,F12打开的一瞬间,我被密密麻麻闪烁变化着的div吓傻了,这样真的大丈夫?亚达哟,我要再找一个,结果找了半天不是不满意就是一个超级超级厉害的用似乎webgl做的,那算了,学webgl吧,看到摄像机啊什么的不由得想到了万恶的ae,自然摸鱼之心越来越膨胀,学着学着就来了一局昭和男儿的WT,等想起来学习webgl的时候,我就欺骗自己说,有unity3D谁还会用这鬼东西?算了算了,不学了,看我老婆(军神大人)去咯。。。。。。。emmmm,我的废话好多,言归正传,重而言之,我决定了改装下雪的demo,来场樱花雨吧,于是我就开始动起手来,先看看大概什么样子吧

代码比较长,这里就不贴出来了,从源代码里复制就行了~

ps:
此文章是投稿作品,欢迎大家投稿~(注册后可以在后台提交)

JavaScript 樱花飘落效果