异步代码经常和回调函数(callback function)挂钩。在以前,回调函数的写法是嵌套形式的,层数多了就形成了“回调地狱”,层层缩进看的人欲仙欲死,理解起来也不直观。
Read More →
CSS 的常用长度单位有 px、em、rem、pt 等。今天我遇到一个情况,有两个网站都使用了 rem 作为单位,但是根元素(html)的字号并不相同,需要进行转换。
移植页面的根元素字号是 20px,CSS 规则如: height: 4rem; 我的根元素字号是 100px,需要除以 5,改成: height: 0.8rem;
因为需要修改的地方很多,所以我写了个正则来处理。本文的代码并不是一个通用的工具,只是提供了解决思路。
这次的情况是同一种单位之间的转换,有时候我们可能需要进行不同单位之间的转换,思路都是一样的,根据需要修改代码即可。
Read More →
JavaScript 转换 CSS 里的长度单位
看到了一个 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 判断数字是否是质数
最近我打算给 Pixiv 图片下载器添加下载 gif 图的功能,今天折腾出了这个 demo。
Pixiv 的动态图并不是 gif 格式,而是一个 zip 压缩包,里面包含了很多张图片。把这些图片按顺序显示,看起来就像是动图一样。
很多人给我说过想要下载 gif 图,这个 demo 就可以把 zip 压缩包转换成 gif 动图。大家如果有以前在 Pixiv 下载的压缩包,也可以直接在这个 demo 里转换,转换之后右键保存即可。
Read More →
把 zip 压缩包转换为 gif 动图
通过 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 实现跨域
近来在学习 Vue.js,基础知识学的差不多了之后,想要做个项目融会贯通一下。这几天写了个博客前端,可以算是本站的一个皮肤(虽然丑)。这也是一个前后端分离的单页面应用。
在线访问:
数据和图片资源都是直接用的本站的。数据由 WordPress REST API 提供,不用自己写 API 接口了。
通过这个项目,进一步熟悉了 Vue.js 和它的相关插件,也学了学 muse-ui 和 Less 的使用,收获不小。
github 地址:
https://github.com/xuejianxianzun/vue-myblog-xjxz
好歹算是个展示吧,不指望有人用(用也用不好,因为我图片开了防盗链)。如果有人要用这个改一改,给 WordPress 后台的网站做个前台倒可以,毕竟后台的 API 一致,用起来方便。
效果预览:
Read More →
用 Vue.js 给本站做了个皮肤(大概)
刚才读唐诗,看到了《次北固山下》,读起来却感觉和印象中不一样。最后发现这首诗有两个版本。
《次北固山下》
《江南意》
客路青山外,行舟绿水前。
南国多新意,东行伺早天。
潮平两岸阔,风正一帆悬。
海日生残夜,江春入旧年。
乡书何处达?归雁洛阳边。
从来观气象,唯向此中偏。
这两个版本表达的感情不一样,如果不看中间两句,当做两首不同的诗也可以。
上面正常字体的是我们上学时学的版本,斜体的是《河岳英灵集》里收录的版本。《河岳英灵集》是唐代殷璠编选的专收盛唐诗的唐诗选本,成书于天宝十二年(唐玄宗时期)。我读的这本书可能是为了追求准确,使用了《河岳英灵集》中的版本。不过在注释里也说明了有其他版本。(《唐诗选》 马茂元 选注)
附图:
Read More →
《次北固山下》与《江南意》
前些时候学习 Vue.js,做了个 todolist(待办事项),可以把自己要做的事情写上去做个备忘。大致效果如上。
这是一个简单的单页应用,你可以直接在线使用。
功能介绍:
您可以自由的添加、删除事项;切换完成状态;重命名;视需要设置定时提醒。
默认没有背景图片,因为用户可以自己设置背景图。(右下角设置区域)
默认有一个提醒铃声,用户也可以自行更改。
本页面会保存工作状态,关闭页面也不会丢失数据。 重新打开页面就可以继续使用了。
所有数据存储在用户本地,不收集用户信息。(话说我哪来的用户啊)
其他详见使用说明。(右下角设置区域)
Read More →
Vue.js 制作的待办事项 todolist
上图是截图,当然实际上樱花是会动的~
看了之前的下雪demo不由得手痒了起来,sakura啊,我需要sakura!然后果然在这里找到了一个,打开一看,好好看我喜欢呀~快F12扒下来吧,F12打开的一瞬间,我被密密麻麻闪烁变化着的div吓傻了,这样真的大丈夫?亚达哟,我要再找一个,结果找了半天不是不满意就是一个超级超级厉害的用似乎webgl做的,那算了,学webgl吧,看到摄像机啊什么的不由得想到了万恶的ae,自然摸鱼之心越来越膨胀,学着学着就来了一局昭和男儿的WT,等想起来学习webgl的时候,我就欺骗自己说,有unity3D谁还会用这鬼东西?算了算了,不学了,看我老婆(军神大人)去咯。。。。。。。emmmm,我的废话好多,言归正传,重而言之,我决定了改装下雪的demo,来场樱花雨吧,于是我就开始动起手来,先看看大概什么样子吧
代码比较长,这里就不贴出来了,从源代码里复制就行了~
ps:
此文章是投稿作品,欢迎大家投稿~(注册后可以在后台提交)
JavaScript 樱花飘落效果
使用了基础的vue.js知识制作了这个邮箱提示效果~