Dron 博客

深夜,闲得没事,把美女刮刮卡升级了下

深夜,闲得没事,把日久失修的 美女刮刮卡 升级了下,起名叫 美女透视镜

图片 RGBA 拾色器

前端同学在还原设计师的视觉稿时,很多简单效果可以直接通过 CSS3 实现掉,这样就不必使用图片了,无奈的是,各路的拾色器,包括 PS 的吸管都没有针对 Alpha 通道的实现,遂用 <canvas> 的 getImageData 方法简单实现了个在线版

有此需求的同学请 自行收藏

简述年会新春特别奖的前端实现

firework.png

回乡心切,去年年底我早早的就撤了,年会并没有参加,亲手为年会定制的一个烟花抽奖程序——新春特别奖,年会时的现场秀也因此没能感受到,遗憾之余听说 @文龙 中了头奖,心里平衡了许多:三天时间的开发总算没白忙活!

写本文前,我将程序简单做了下脱敏和静态分离:

进入页面后,片头动画开始播放,「你」划燃火柴,转身面向炮仗,进入等待状态(此时应该跟观众唠唠家常,提高下神秘感);待唠瞌尽兴,「你」将火柴移向并点燃引信,待引信燃尽,炮仗应声升空,爆炸,焰火奇迹般的组成一个花名(中奖者),拍照留念,背景持续燃放烟花,完毕。

本文将介绍该效果的前端实现。

未完,点此阅读全文

悄悄发布个押韵字查询工具

对联诗词没有特色?
不妨来点 Rap 绕舌?
你说创作艰辛路途坎坷?
肚里没点墨水全都白扯?

药!药!切可闹!
煎饼果子来一套?
现在我来给你支个大招。
从今往后写词不用美刀!

这个工具 你说屌或不屌?
如此好玩,胜过大嫂!
快速押韵帅到爆表!
还不快点收藏以后好找?

闲来无事找点乐子,
这个工具你来使使,
编个打油小诗哄哄妹纸,
三人同行必有我师,
你的杰作分享一下又不会死。

又!不!会!死!

码农自己当老家新厝的设计师

这篇文章迟发了大约一年半的时间,有朋友已经知道这一年半我在做什么了,是的,我农村老家新筑起了一个巢,目前施工(毛坯 + 装修)基本完成,剩下极少的收尾,而真正令我兴奋的:房子是我亲手设计的!

前年在考虑房子该买在杭州还是在老家自建时,犹豫了比较久,不过能自己体验一把设计,想想就激动,内心便十分笃定了。

未完,点此阅读全文

生成任意长度的圆周率

周末闲来无事折腾了一个任意长度的圆周率 生成器,代码十分好懂不解释了(百行未压缩,自己读),原理见 梅钦类公式

这是我写过的第三版与 PI 相关的代码,第一版博文在百度空间(下线看不到了),根据正方形与内接正圆的比值为 4:PI 抽随机点演算;第二版见《用 JavaScript 演算圆周率 PI(二)》。前两个版本受计算精度限制,只有第三版是可以生成任意长度的,不过长度越长,计算起来越慢,测试需谨慎。

(本文完)

小球是怎么落入指定球洞的?

Billiards.png

这篇文章首发在 淘宝前端团队博客,现在转发到作者自己(也就是我本人)的博客上。

游戏回顾

不知大家是否还有印象,淘宝玩法平台(一个内部系统)前不久发布了一款新的游戏 —— 小球入洞,该游戏伴随着淘宝技术部去年双 11 当天举办的一次抽奖活动,第一次在大家面前亮相。

Try Button.png

游戏支持预先设定必中奖项:离开发射器的小球在来回弹跳一阵之后,不偏不倚的落入到指定奖项对应的球洞中。体验该功能,可在游戏测试页右侧选项区进行如下的设置:

Options.png

本文试着介绍游戏的这个「掉落至指定球洞」的功能,讲的偏思路,并不涉及公式和代码,我尽可能直白,如果你觉得晦涩,可以在评论处我们接着探讨。在继续之前,为了表达上的方便,我将对游戏在视觉上进行如下图的划分:

未完,点此阅读全文

Math.random() 二三事

这篇文章首发在 淘宝前端团队博客,现在转发到作者自己(也就是我本人)的博客上。

随机数

随机数是统计学领域的一个重要概念,对于游戏来说同样意义非凡,用好随机数,可以使你的游戏更真实、更人性、富有魅力。

未完,点此阅读全文

千行代码实现 IE8 兼容的仿 angular 指令式模板控制器

angular 出来的时候火了一阵,现在受到 react 的冲击显得有些冷却,之前我只是听说,也听过 @隐若 老师的一些分享,但一直没有机会用上或深入了解他的特性。

直到上个月初,内部要做个 xx 平台,平台上的表单功能有些繁琐,所有表单域都是根据配置项动态渲染出来的,验证、联动什么的也都是配置。初步判断用 angular 的指令模板和双向数据绑定可以很好满足,不过后来并没有直接用上 angular,具体原因就不在这儿展开了。

未完,点此阅读全文

“短”化你的代码

我们来玩个找茬儿,看看下面这段代码,找找 md5 函数的定义在哪里:

未完,点此阅读全文

水果忍者桌面版

使用 node-webkit 将以前写的水果忍者打包成本地应用程序,纯闹着玩,为了练手 node-webkit,大家随意感受下。

这里下载(含 windows/mac/linux 三个平台的版本)

2013-06-64: PS 修改了链接,多谢光宇同学反馈

web 另类方法实现“另存为”功能

HTML5 的 FileReader 带给我们很强大的文件只读访问能力,可是在 HTML5 新增的 JS 中却没有发现有方便的另存到本地文件的相关 API,以往的办法要么调用浏览器的 save as 命令(兼容程度不详),要么将内容提交到服务器,由服务器附加 content-type: application/octet-stream 头并原文打回来实现。

偶然间,发现 HTML5 的 <a> 标签有了一个新属性,叫 download,取值是一个文件名,当一个带有 download 属性的 <a> 链接被点击时,其形为不再是一个网页跳转,而变成将目标以指定的文件名另存到本地,兼容性还不错的样子。

可是你想啊,<a> 的 href 值是可以随便改的,也就是说要另存的文件内容可以通过 JS 的方式轻松生成,对其指定一个 datauri 就可以决定要保存的文件内容了,配合 base64,甚至可以产生一个二进制文件!

原理简单,实现无比容易,就不在这儿贴代码了,戳我可以看看 live demo

Tracker 新增“活动监视器”插件

活动监视器,在 OSX 里是任务管理器,而在 Tracker 里却成了监控 JavaScript 活动的工具,引用这个名字,除了含义比较匹配外,更显得霸气。

Tracker 今晚上线了一个小型功能插件,也就是上述的活动监视器,如果你有快速找出线上网页某功能对应 JavaScript 代码的需求时,不妨试试这个功能,方法:进入“活动监视器”面板,点击“开始监控”按钮,使 Tracker 进入监控状态,这时再切到“当前网页”面板,进行一系列你需要的操作(除了表单提交和网页跳转)后,再切回“活动监视器”,你会看到你进行的这一堆操作,已经在监视器中产生了一些日志,点日志里的“查看可直接切换到代码面板,橙色标注的代码即是刚刚活动的 JS 代码。

另,“活动监视器”对于 setInterval 和 setTimeout 也是有效的,希望可以帮到你。

Tracker 主页君:http://ucren.com/tracker/docs/index.html

watch

将 webworker 改造成无外链文件模式

HTML5 为我们带来了强大的 Worker 对象,她允许我们在浏览器中使用多线程来进行高耗时计算,可是,Worker 需外链同域文件的限制使我觉得颇有不爽,本能就有种想改造她的欲望。

择日不如撞日,现在就开始动刀,首先想到的是 dataURI,写了一个最简单的例子在几个浏览器中测试,结果只有 Firefox 通过,略为绝望便在微博上发表感叹,经 @_Franky 的提醒,Worker 支持 ObjectURL,立刻重建我的信心,继续改代码,再测试果然几个现代浏览器都支持,索性封装成如下工具函数:

var myWorker = function(){
    var functionBodyRegx, URL, contentType, code, url;
    
    functionBodyRegx = /^[^{]+\{([\s\S]*)\}$/;
    URL = window.URL || window.webkitURL;
    contentType = { type: "text/javascript; charset=utf-8" };
    
    return function( fn ){
        code = fn.toString().match( functionBodyRegx )[ 1 ];
        url = window.opera ? 
            "data:application/javascript," + encodeURIComponent( code ) :
            URL.createObjectURL( new Blob( [ code ], contentType ) );
        return new Worker( url );
    }
}();

改造后最大的亮点是无需外链一个 js 文件了,当然也没有不能跨域的问题了,以上代码用法举例如下:

var worker = new myWorker( function(){
    onmessage = function( event ){
        postMessage( event.data );    
    }
} );

worker.onmessage = function( event ){
    alert( event.data.message );
};

worker.postMessage( { message: "hello myWorker!" } );

想试戳这里

在 chrome/safari/firefox 下测试通过,IE/opara 没有测试,手上有这俩浏览器高富帅版的童鞋请帮忙测试下。

获取 html 注释节点

因 Tracker 需要移除页面的 html 注释节点,鉴于注释的复杂性,为了靠谱点,不走正则的路子了,顺手写了个获取 html 注释节点的工具函数:

var getHtmlCommentNodes = function(){
    var cn, push;
    
    cn = document.COMMENT_NODE;
    push = [].push;

    return function f( node ){
        var result, c, l, i;

        result = [];

        if( node.nodeType == cn )
            result.push( node );
        else if( c = node.childNodes, l = c.length )
            for( i = 0; i < l; i ++ )
                push.apply( result, f( c[ i ] ) );
        
        return result;
    }
}();

用法举例:

getHtmlCommentNodes( document.documentElement );

强制留在本页

有一些特定应用,在用户离开当前页面时会给一个弹窗,再次确认是否真的离开,给用户多一个选择机会,以确保未完成的草稿得已保存。这种弹窗都是通过 onbeforeunload 事件实现的,用这个事件干坏事的也很多,常见的如发统计请求,我今天在思考这个问题时突然来了灵感,如果在这个事件里强制地址跳回本页会如何呢?于是我写了这么一段测试代码:

window.onbeforeunload = function(){
    setTimeout( function(){ location.href = "#"; }, 0 );
};

将上面的代码粘到任意网页(console),神奇的事情发生了,点击该网页的其它链接,根本跳不走,其实是跳走了立刻又被跳了回来(查看控制台的网络面板可以验证)。如果是在地址栏上输入其它地址,回车后也会强制被替回来,有点意思。

在 chrome/safari 中测试通过,firefox 不通过,ie/opara 未测试,有点暴力,不推荐使用。

使用 chrome 的 disable-web-security 参数联调线上数据

联调线上数据是 web 开发中经常讨论的话题,受浏览器的同源策略限制,测试页无法直接使用线上数据,实现的方法各种各样,典型的做法是中间夹了一层代理。

找了一下 chrome 的选项,没有关于降低跨域限制的,于是想起了启动参数,果然在这里:

open -a /Applications/Google\ Chrome.app --args --disable-web-security

用这样启动的 chrome 访问任意页面,不再受同源策略限制,可以任意跨域!!瞬间解决了联调问题,直接代理都不需要了。

Tracker 开源了

Tracker 重构完成了,并且通过 github 开放了源代码,写了一个简单的说明文档:http://ucren.com/tracker/docs 随便看看吧。

screenshot-code

原来可以 break/continue 一个 label 块

重构 Tracker 时发现原来可以 break/continue 一个 label 块,就像这样:

a: {
    alert(1);
    break a;
    alert(2);
}
alert(3);

参考:EcmaScript 规范

关于英文名 dron 的来历

今天跟人聊英文名,扯到了 dron 的来历,我也不好意思说当时是因为拼错了 dom 这个词,就把预想好的解释给说了:Dynamic(有活力的),Rational(理智的) ,Optimistic(乐观的),Nice(友好的)。

« 更老的文章

Copyright © 2016 Dron 博客

Theme by Anders NorenUp ↑