saber酱的抱枕

生于忧患,死于安乐

04/6
08:00
学习

开发chrome扩展的一些参考资料

1.google官方文档
API目录页

2.谷歌开发文档的非官方中文版

3.360极速浏览器的官方开发文档
翻译成了中文,挺不错,但是很久没更新,显得落伍了。

4书籍《Chrome扩展及应用开发》,我们可以在图灵社区免费阅读。这本书很不错。
这本书还有第二版,修订和增加了一些内容,不过不提供全部免费阅读。图灵社区页面

开发chrome扩展的一些参考资料

04/2
08:00
学习

解决display: inline-block;的间隙问题

css的display: inline-block是替代浮动(float)的一个好办法。inline-block布局不会有float的一些缺点:脱离文档流、破坏inline box(具体来讲就是float的元素要等高,否则下面的float元素会被上面的卡住)。inline-block不会脱离文档流,元素高度不同也不会卡住。但是inline-block的元素之间会有空隙。

如下代码:

<div id="a"></div>
<div id="b"></div>
<style>
	#a,#b{width: 100px;height: 150px;display: inline-block;}
	#a{background: #0c0;}
	#b{background: #0ff;}
</style>

两个div都是inline-block布局,默认会有空隙:

解决display: inline-block;的间隙问题

(IE8的空隙还比其他浏览器少了1px)

那怎么办呢?有两个解决办法:

1.使两个元素的代码之间没有空隙。如上例,则时两个div的代码挨在一起,中间不要换行。这样就没有空隙了。

2.给应用了inline-block布局的元素的父元素添加css属性:font-size: 0; 这样就OK了。

以上两个方法都兼容所有浏览器。

解决display: inline-block;的间隙问题

ps:以前chrome不吃font-size: 0;这一套,不过较新版本的chrome也支持了。

解决display: inline-block;的间隙问题

04/1
08:00
学习

JavaScript使代码延迟一段时间执行

JavaScript里说到延迟执行,一般想到的就是定时器。而且原生的方法里除了定时器,也没什么别的办法了。

但是定时器其实是一种插入机制,只针对它内部的代码做延迟,不能延迟整体代码的执行。

如果在某个时候,我们想让后面的代码全部延迟一定时间执行,只能把后面的代码全都放进定时器(或者改一下代码,只放调用部分)。多嵌套了一层,在代码的阅读和理解上产生了负面效果,很不舒服。

想要实现类似于其他程序的sleep函数的效果,我们可以用笨办法来做一个,实现整体代码的延迟。

示例:

function sleep(milliSeconds){
    var startTime = new Date().getTime();
    while (new Date().getTime() < startTime + milliSeconds);
}
console.log("1");
sleep(1000);
console.log("2");

不过使用sleep需要小心,因为它是整体延迟,会阻塞JavaScript进程,导致页面也卡住(类似于ajax的同步模式)。

比如上例代码,延迟一秒。如果在页面加载时执行,由于这一秒里JavaScript没执行完,所以页面加载时间就会增加一秒(+1s?),同时在这1秒里无法对页面进行操作。

那如果在页面加载完成后执行呢?这也会导致页面卡住1秒,因为sleep的代码导致CPU占用非常高,页面除了循环什么都不做了,导致用户在这1秒里无法对页面进行操作。

所以这个sleep虽然在效果上是真正的sleep(参考其他编程语言),但还是需要确认使用场景才能用,不能乱用。毕竟后台sleep用户只是多等了1秒,前台sleep却会导致页面卡住,对用户操作会产生直接的影响。

JavaScript使代码延迟一段时间执行

03/31
11:20
学习

在JavaScript中创建Blob对象

JavaScript中的Blob对象可以存储二进制数据,并且还可以为数据指定MINE类型,因此适合在网页上储存文件用。

创建Blob对象需要使用new Blob()构造函数,它的语法如下:

Blob(blobParts[, options])

它有两个参数,第一个参数blobParts是要转化为Blob对象的数据,它必须在一个数组里。即使这份数据本来是独立的,也要创建一个数组把它包含到数组里。
第二个参数是可选的,使用Object类型的键值对来指定MINE类型。

示例:

var data='<b>aaa</b>';   
var blob=new Blob([data],{"type":"text/html"});   
console.log(blob);  

上例中是储存了一个html类型的Blob对象,实际使用中我们也可以储存其他文件类型,常见的有图片、json等。

相关资料:MDN上的相关内容
Read More →

在JavaScript中创建Blob对象

03/29
09:52
学习 软件

百度贴吧只看楼主的UserScript

最近把之前做的一个百度贴吧只看楼主的脚本改了下,发布到了greasyfork上。

在帖子的任何地方,按下Alt+L组合键即可自动点击“只看楼主”,不用再翻到帖子顶部去点击啦~

ps:在只看楼主模式下,再次按下Alt+L组合键,就会取消只看楼主了。

安装地址

代码:

document.addEventListener("keydown", function(event) {
	var ev = event || window.event;
	if (ev.altKey&&ev.keyCode==76) {
		document.querySelector("#lzonly").click();
	}
}, false);

百度贴吧只看楼主的UserScript

03/29
08:00
学习 软件

仙尊的百度贴吧小尾巴

仙尊的百度贴吧小尾巴 UserScript

今天想找个百度贴吧小尾巴的脚本,但是有些功能太多,我用不着那么复杂的,所以自己写了个简单的。(简陋到没有前台设置界面)

安装此用户脚本

可以插入一条文字内容和(或)一张图片,分别在两个变量里设置(在脚本里修改):

仙尊的百度贴吧小尾巴 UserScript

如果两条都设置了内容,那么就会一起发出去。你也可以清空文字或图片对应的内容,之后就不会追加那条内容了。

要使用时,使用快捷键Shift+Enter提交,就会加上小尾巴。如果使用贴吧的正常方式——Ctrl+Enter或者点击提交按钮,就不会加上小尾巴。

仙尊的百度贴吧小尾巴

03/27
08:00
学习

网页通过php实现文件下载

在网页上,如果要通过php实现下载功能,我们可以在超链接里访问这个php,然后由php返回下载的文件。

php端主要是通过设置header来实现,基础的示例如下:

$filename = "test.gif";
header("Content-Type:imge/gif"); //发送指定文件MIME类型的头信息
header("Content-Disposition:attachment; filename=".$filename); //发送描述文件的头信息,附件和文件名
header("Content-Length:".filesize($filename)); //发送指定文件大小的信息,单位字节
readfile($filename); //将文件内容读取出来并直接输出,以便下载

Read More →

网页通过php实现文件下载

03/24
08:00
学习

JavaScript处理加载失败的图片

最近我修改某个网站,删除了很多上传的图片,但是又懒得去文章里一篇篇去掉出错的图片(任务量太大),所以就想到了用JavaScript在网页上找出出错的图片,并将其隐藏。

一开始我自己尝试了写了一些代码试试,主要是使用img元素的onerror事件。虽然代码在demo中达到了预期效果,但是加在实际页面里却不生效。对此我有一些猜测,但尚不能确定准确原因,后来还是用谷歌搜了现成的代码。

document.addEventListener("error", function(e){
    var elem = e.target;
    if(elem.tagName.toLowerCase() === 'img'){
    	// 如果引发error事件的元素是img元素,就进行处理
        elem.style.display="none";		//隐藏该图片
    	// elem.src = "/img/hint.jpg";	//或者替换为其他图片
    }
}, true /*指定事件处理函数在捕获阶段执行*/);

将这份代码加在网页开头(所有img元素之前)即可。

参考:《以全局监听的方式处理img的error事件》

JavaScript处理加载失败的图片

03/20
10:27
学习

iphone上网页字体变大/显示得很大的解决办法

刚才同事告诉我有个网页的字体很大,果不其然,他是iphone手机。

正常的情况下文字大小一致(css里设置的字号是一样的)如下:

iphone上网页字体变大/显示得很大的解决办法 Safari字体变大

在pc端各大浏览器、chrome的手机模拟器、安卓所有主流浏览器上都是正常显示。

但如果iphone上出了问题,就是字号变大:

iphone上网页字体变大/显示得很大的解决办法 Safari字体变大
Read More →

iphone上网页字体变大/显示得很大的解决办法

03/17
13:52
学习

解决百度地图生成器的标注图片失效问题

今天我使用百度地图生成器制作在线地图之后,发现了标注图片失效的问题。

正常时:
解决百度地图生成器的标注图片失效问题

生成后:
解决百度地图生成器的标注图片失效问题

搜了下这个情况,好像是去年底出现的,官方论坛上有人反映但一直没有恢复。

后来我找到了原因。我们使用百度地图生成器添加标注的时候是正常的,因为当时显示的是确实存在的图片。后来生成的地图里,标注图标使用的图片是另一个图片,但是这个图片已经不存在了,所以就出现了这个问题。

我们可以将生成后的地图里的不存在的图片替换为地图生成器里的正常图片来解决问题。将下面的JavaScript代码加在百度地图代码的页面里即可:

var bzT=window.setInterval(function () {
    if (!!document.querySelector("#platform > div:nth-child(2) > div:nth-child(5) > span > div > img")) {
         document.querySelector("#platform > div:nth-child(2) > div:nth-child(5) > span > div > img").src="http://api.map.baidu.com/lbsapi/creatmap/images/us_mk_icon.png";
         clearInterval(bzT);
    }
},500)

解决百度地图生成器的标注图片失效问题