米空格


  • 首页

  • 标签

  • 归档

  • 关于

己动手打造一款路由器(一)

发表于 2016-06-27   |  

原由

之所以想自己动手打造一款路由器,很大一部分原因是因为市面上大部分的浏览器大多不靠谱,大品牌要么配置太弱要么价格太贵,国产要么不稳定要么各种广告劫持;同时自己动手还能解决一些你懂的需求

效果图

摆拍

摆拍2

管理界面

[JS笔记] javascript base64 Encode, Decode

发表于 2014-11-20   |  

以下方案仅限于浏览器环境!

浏览器内置的方法 atob, btoa 仅能处理 utf-8 编码的 ascii 字符,不能直接作用于 Unicode 字符串,所以需要搞定 utf-8 编码,解码:

1
2
3
4
5
6
7
8
// utf-8 encode, decode
function encode_utf8(s) {
return unescape(encodeURIComponent(s));
}

function decode_utf8(s) {
return decodeURIComponent(escape(s));
}

来源:http://ecmanaut.blogspot.jp/2006/07/encoding-decoding-utf8-in-javascript.html
另:关于URL编码

然后 base64 自然就有了:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// base64, encode, decode
function base64Encode(str) {
return btoa(unescape(encodeURIComponent(str)));
}

function base64Decode(str) {
return decodeURIComponent(escape(atob(str)));
}

// utf-8 encode, decode
function encode_utf8(s) {
return unescape(encodeURIComponent(s));
}

function decode_utf8(s) {
return decodeURIComponent(escape(s));
}

兼容情况如下:

Win32

  • Firefox 1.5.0.6
  • Firefox 1.5.0.4
  • Internet Explorer 6.0.2900.2180
  • Opera 9.0.8502

    MacOS

  • Camino 2006061318 (1.0.2)

  • Firefox 1.5.0.4
  • Safari 2.0.4 (419.3)
    当然,依然存在可能失败的情况。
    具体请参考 https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding

grunt-css-sprite

发表于 2014-06-22   |  


这是一个帮助前端开发工程师将css代码中的切片合并成雪碧图的工具;
其灵感来源 grunt-sprite,由于其配置参数限制目录结构等,不能满足通用项目需求,现重新造轮子发布;
它的主要功能是:

1. 对css文件进行处理,收集切片序列,生成雪碧图
2. 在原css代码中为切片添加background-position属性
3. 生成用于高清设备的高清雪碧图,并在css文件末尾追加媒体查询代码
4. 支持 image-set 配置高清雪碧图
5. 在引用雪碧图的位置打上时间戳
6. 在样式末尾追加时间戳
7. 按照时间戳命名文件

### 使用 & 帮助更新

NPM: https://www.npmjs.org/package/grunt-css-sprite
Github: https://github.com/laoshu133/grunt-css-sprite/
​

[CSS笔记]响应式页面视频等比缩放

发表于 2014-04-08   |  

在响应式布局中我们常用用一下代码来处理图片的自适应宽度

1
img{ height: auto; max-width: 100%;}

不过对于视频,这个貌似就有心无力了,不过这难不倒我们,
根据CSS规范,margin 和 padding 在接受百分比值时,其上下值为相对于元素的宽度,于是就有了以下代码:

1
2
3
4
5
6
7
8
.video{
height: 0; overflow: hidden; position: relative;
padding-bottom: 56.25%; /* 16:9 */
}
.video video, .video iframe{
height: 100%; width: 100%;
position: absolute; left: 0; top: 0;
}

效果可见:DEMO页面

[CSS笔记]绝对定位居中(Absolute Centering)

发表于 2014-04-08   |  

我们经常用 margin:0 auto 来实现水平居中,而一直认为 margin:auto 不能实现垂直居中……实际上,实现垂直居中仅需要声明元素高度和下面的CSS:

1
2
3
4
5
.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}

其兼容情况为:Modern & IE8+
原理&DEMO: 英文 中文

Chrome插件(扩展)“二维码小助手”

发表于 2014-03-03   |  

一时兴起,发布一款Chrome插件(扩展),“二维码小助手”
Chrome Store地址:https://chrome.google.com/webstore/detail/%E4%BA%8C%E7%BB%B4%E7%A0%81%E5%B0%8F%E5%8A%A9%E6%89%8B/acdfkjjfbghehjbojgnmjijpbgahmhee

放两张截图:

欢迎拍砖,请轻拍;如有BUG或者意见请在评论区留言,我会及时修正。

IE11 typeof window.ActiveXObject === "undefined"

发表于 2013-11-28   |  

今天在调一个Applet上传组件,调试IE11时又差点踩坑里了,typeof window.ActiveXObject返回undefined了。。。

但是window.ActiveXObject === undefined又是不成立的。。。

以后靠谱的检测需要换成window.ActiveXObject === undefined,客官可以见DEMO页和本人WIN7 IE11下测试结果:

DEMO页面

1
2
3
4
5
6
7
8
9
navigator.appName; //Netscape
navigator.userAgent; //Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; rv:11.0) like Gecko
typeof window.ActiveXObject; //undefined
typeof window.ActiveXObject === "undefined"; //true
!!window.ActiveXObject; //false
window.ActiveXObject === undefined; //false
window.ActiveXObject === void 0; //false
window.ActiveXObject == undefined; //true
window.ActiveXObject == void 0; //true

另外在http://www.guokr.com/post/449426/看到IE11将navigator.appName改成Netscape了,引用页面中一句:“IE 10是最后一个appName叫做Microsoft Internet Explorer的网页浏览器了,突然好悲伤。。。”

CSS兼容背景透明处理

发表于 2013-09-03   |  

说到CSS背景半透明,各位CSSer肯定都不陌生,写过页面的大部分都干过这个事情,尤其是CSS2时代走过来的。

老题新解,现在已经步入CSS3时代了,对于处理CSS背景半透明应该已经不是很难的事了,不过请不要忘了咱在天朝,IE6的份额依旧不少, 查看份额。

不扯,入正题,先看完整DEMO:

opacity + filter:alpha

大部分情况下我们做背景透明都是这么写的,代码简单,写起来也方便;不过大部分情况是需要多增加一个标签,因为这么写会连文字一起透明

1
.opacity .test{ background:#fff; opacity:.4; filter:Alpha(opacity=40);}

Rgba + filter:progid:DXImageTransform.Microsoft.Gradient

首先说说background:rgab/hsla,这两个新的颜色函数都能定义alpha通道值,然后可以使得背景半透明,甚至还可以使用CSS3gradient的渐变函数,生成更为复杂的背景,具体请自行谷歌;

在CSS2后面某个时候,有童鞋发现了filter:progid:DXImageTransform.Microsoft.GradientIE下能通过渐变滤镜去模拟背景透明,而不用文字透明

当然,有利必然有弊,这么写,代码略长,写起来麻烦:

IE滤镜采用AARRGGBB(16进制)进行排列,AA位值也为 00-FF,也就是说10进制需要转成16进制

计算规则 10进制值*256/100然后再转16进制,就是说如果设置0.4的透明度0.4*256/100 = 102.4转16进制为66

1
.rgba .test{ background:rgba(255,255,255,.4); background:none\9; filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#66FFFFFF,endColorStr=#66FFFFFF);}

Rgba with last-child

上面背景透明的实现已经是本文的核心部分,但是如果你够细心,会发现此效果在IE9下透明度明显不对,

IE9当background:rgba和filter同时使用时,会出现两个效果叠加,

不过我们可以用:last-child巧妙修复;因IE6不支持 :first/last-child伪类,IE7,8-仅支持:first-child伪类,IE9+全部支持

1
2
.rgba_with_lastchild .test{ background:none; filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#66FFFFFF,endColorStr=#66FFFFFF);}
.rgba_with_lastchild .test:last-child{ background:rgba(255,255,255,.4); filter:none;}

当看到此处的时候,应该本文应该是能结尾了,因为上面的效果在各个浏览器下已经接近完美了,不过还有个不得不说的密码

Filter with overflow

IE7- 当使用滤镜时,大部分情况会使得元素具有 overflow:hidden 特性,具体请见DEMO最后

全文完,欢迎拍砖。

最后在放一次DEMO地址

javascript位运算转整型存在风险

发表于 2013-07-11   |  

上午看到司徒正美发的博文,《javascript 的位操作符转换推断》,看的时候自己也觉得推断的挺好的;不过刚好下午写了一个团购倒计时页面,同事拿过去用之后,发现时间过长会出现倒计时不走的情况,伪代码如下

1
2
3
4
5
6
var timer, timeout = ~~elem.getAttribute('data-timeout');
if(timeout > 0){
timer = startTimeout(timeout, function(queue){
//...
});
}

其中的~~elem.getAttribute('data-timeout')(elem.getAttribute('data-timeout')|0,效果相同)就是偷懒的方式去强制转整型,其类似的等价于parseInt(elem.getAttribute('data-timeout'),10)||0,以前一直认为是等价的,但是现在只能说是类似等价。

但是同事输出的数值为:2703986000,在断点调试时,发现没有进if也就是说转换或的数值小于0了,为了验证做了如下测试:

1
2
3
4
5
6
7
8
9
10
11
~~'2703986000'; //-1590981296

'2703986000' | 0; //-1590981296

parseInt('2703986000'); //2703986000

~~'-15909812967'; //1270056217

'-15909812967' | 0; //1270056217

parseInt('-15909812967', 10); //-15909812967

测试发现位运算强制转整型有边界值,而且边界值小于Number.MAX_VALUE,并且大于Number.MIN_VALUE,所以当在处理大数值的时候,使用位运算是有风险的;

然后又做部分测试,求了一下位运算的边界值(对位运算不了解,可能与平台也有关系)

1
2
3
4
5
6
7
~~'2147483647'; //2147483647

~~'2147483648'; //-2147483648

~~'-2147483648'; //-2147483648

~~'-2147483649'; //2147483647

其实仔细看的话,上面还是有规律的;涉及到位运算,不对之处请拍砖!

让网页变灰浅析(CSS+Javascript)

发表于 2013-04-26   |  

事出自然有因,本文也是如此,雅安,加油!

相信最近不少站长和技术在度娘谷歌“CSS 网页 灰色”

本来觉得这类的介绍网上已经很多了,不想再插一脚了,不过今天忽然有朋友又向我问起,自以为自己很了解的情况下给了几个方案:

  1. 堪称完美级

    整站换图片,不过就是工作量稍大,还得换回来,要是有会员上传的图就更麻烦了(明显调侃)

  2. 纯CSS实现

    IE:filter

    Chrome:filter

    效果很不错,实现也简单,不过 FF, OPERA,SAFARI 不支持, 手机端就更不行了

  3. HTML5 filereader实现去色功能

    效果良好,而且有不错类库实现了

    代码量稍大,不过低版本浏览器全挂掉

  4. 结合前面两点

    filter - 略

    grayscale.js - http://james.padolsey.com/javascript/grayscaling-in-non-ie-browsers

    缺点:

    如果页面图片量很大,图片加载时间很很长,页面可能会出现闪屏

    然后,JS本来效率就偏低,所以处理大量图片,自然页面会卡

然后在自己小得意的时候,朋友发过来一段(说是同事给的):

1
2
3
4
5
html{
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
filter:gray;
-webkit-filter: grayscale(100%);
}

乍一看,虽然让我想起了还有SVG这么个东西可以使,不过估计也就IE和Chrome行吧,印象中真没记得FF有支持filter,然后打开FF测试了下,还真可以。

然后自己也动手去谷歌了下,才想上面的代码出处应该是在这里:http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html

后面又发现在stackoverflow上也有讨论:http://stackoverflow.com/questions/609273/convert-an-image-to-grayscale-in-html-css

然后又找了些资料,总结方案如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
html{
/*
* SVG,不建议单独SVG文件
* 会增加一次请求,如果支持SVG基本data:基本也就没压力了,如下
* SVG文件:http://www.laoshu133.cn/test/grayscale.svg
*/

/* filter: url(grayscale.svg#grayscale); */
/*
* 有哥们研究说SVG的支持情况如下:
* http://www.fettblog.eu/blog/2012/06/11/forcing-chrome-to-print-all-pages-in-grayscale/
* SVG version for IE10, Chrome 17, FF3.5, Safari 5.2 and Opera 11.6 -- does not, need to be prefixed. See below
* 不过我测试了下IE10(WIN7&WIN8)都不支持,所以基本兼容情况如下:
* Chorme 25/26不支持,手上没有更低版本的Chorme测试
* FF3.5+
*/

filter:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxmaWx0ZXIgaWQ9ImdyYXlzY2FsZSI+PGZlQ29sb3JNYXRyaXggdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAuMzMzMyAwLjMzMzMgMC4zMzMzIDAgMCAwLjMzMzMgMC4zMzMzIDAuMzMzMyAwIDAgMC4zMzMzIDAuMzMzMyAwLjMzMzMgMCAwIDAgMCAwIDEgMCIvPjwvZmlsdGVyPjwvc3ZnPg==#grayscale);
/* Webkit only, Chrome & Safari 6+ */
-webkit-filter:grayscale(100%);
/* future-proof */
filter:grayscale(100%);
/* IE4-8 and 9 (deprecated). */
filter:gray;
}

从上面注释基本可以看出对于IE10和低版本Opera CSS处理基本就是没折了;

以上代码使用时属性顺序不能调换;

以上选择器建议html或作用于html上,否则在IE下可能会看到部分元素依旧彩色,当然IE9无论怎样都处理的不是很好

说了这么多,我们来实践下:





来张美女看效果:

3D Girl

到了这里,在找资料的过程还发现一个Future-filter的测试页,可以看看未来的filter,下面还有”Filtered Video“ ^O^

http://davidwalsh.name/demo/css-filters.php

 

OK,上面说的都是CSS解决方案,我前面还说了有JS的解决方案;主要说下grayscale.js的,如果自己去写原生JS解决,看后可以自己动手试试

项目地址:http://james.padolsey.com/javascript/grayscaling-in-non-ie-browsers/

首先,grayscale.js不是兼容所有浏览器,看其主页的标题:《“Grayscaling” in non-IE browsers》 ,解决方案并不适应于IE,至少是低版本的IE

然后DEMO效果在此:http://james.padolsey.com/demos/grayscale

最后来grayscale.js的用法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var el = document.getElementById( 'myEl' );
grayscale( el );

// Alternatively, pass a DOM collection
// (all elements will get "grayscaled")
grayscale( document.getElementsByTagName('div') );

//可作用于jQuery
// Even works with jQuery collections:
grayscale( $('div') );
//To reset an element (back to its original colourful state) you must call grayscale.reset() and pass whatever elements you want reset:
grayscale.reset( el );
// reset() also accepts DOM/jQuery collections
grayscale.reset( $('div') );

//预处理,主要用于大图片
//The ‘prepare’ function, as discussed earlier, should be called when there’s a large image to process or even if there are several smaller images. Be aware that larger images will take quite a while to process (just a 300×300 PNG takes about 3 seconds in ‘prepare’ mode).
grayscale.prepare( document.getElementById('myEl') );
// Also accepts DOM/jQuery collections
grayscale.prepare( $('.gall_img') );

来演示一下:

1
grayscale(document.body);




来张美女看效果:

3D Girl

 

参考:

  • http://davidwalsh.name/css-filters
  • http://www.fettblog.eu/blog/2012/06/11/forcing-chrome-to-print-all-pages-in-grayscale/
  • http://stackoverflow.com/questions/609273/convert-an-image-to-grayscale-in-html-css
  • http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html
  • http://james.padolsey.com/javascript/grayscaling-in-non-ie-browsers/
123
23 日志
6 标签
RSS
GitHub
© 2016 米空格
由 Hexo 强力驱动
主题 - NexT.Pisces