Saber 酱的抱枕

Fly me to the moon

11/27
2016
学习

去除hitomi.la上的点击限制的脚本

今天我在看hitomi.la这个网站,发现它会时不时在页面上覆盖一层flash,导致我们无法点击链接。本脚本通过移除这个flash来使页面可以被点击。

左键点击不动,右键弹出了flash的菜单
去除hitomi.la上的点击限制

页面上的flash元素:
去除hitomi.la上的点击限制

代码如下:

!function () {
let clearT=window.setInterval(function(){
  if (!!document.querySelector("object")) {
    document.querySelector("object").remove();
  }
},500);
}()

安装此脚本

顺便发现了CL-orz系列本子,全彩好评

去除hitomi.la上的点击限制的脚本

11/19
2016
学习

IE8的兼容性问题

浏览器份额

IE8无疑是个坑爹货,但XP上的IE最高只到IE8。根据百度统计流量研究院的数据,目前IE8在国内仍然占有15%的份额(不过这个图上的数据看得我怀疑人生)。

IE8的兼容性也是一个大坑。最近做一个网站,想要兼容IE8,于是翻出了许多遇到过和没遇到过的坑,略微整理一下。
Read More →

IE8的兼容性问题

11/16
2016
学习

在低版本IE浏览器上实现getElementsByClassName()方法

javascript中的document.getElementsByClassName()方法是很实用也很常见的DOM选择器方法,然而IE8及以下版本的IE浏览器并不支持此方法(IE8都支持querySelector()方法了,却不支持getElementsByClassName()方法,实在匪夷所思)。

下面的代码可以在低版本IE浏览器中实现一个document.getElementsByClassName()方法。

if (!document.getElementsByClassName) {
	document.getElementsByClassName = function(className, element) {
		var children = (element || document).getElementsByTagName('*');
		var elements = new Array();
		for (var i = 0; i < children.length; i++) {
			var child = children[i];
			var classNames = child.className.split(' ');
			for (var j = 0; j < classNames.length; j++) {
				if (classNames[j] == className) {
					elements.push(child);
					break;
				}
			}
		}
		return elements;
	};
}

加入这份代码之后,就可以正常使用document.getElementsByClassName()方法了。

(也许遍历所有HTML标签开销比较大←_← 只要求兼容到IE8的话尽情的使用querySelector()方法和querySelectorAll()方法吧)

在低版本IE浏览器上实现getElementsByClassName()方法

11/14
2016
学习

在网页上添加百度分享功能

在网页上添加百度分享功能

如图,网站排版时做了分享按钮(图片、样式都是已经写好了的),之后需要加上功能,那我们使用百度分享的话应该怎么做呢?

首先可以参考百度的官方说明文档。这个文档也很好理解,只是在“自定义设置”部分容易让人迷糊。

其实像上图这样最简单、最常用的分享方式,不需要去管那么多设置项。以下是最小化的实现代码:

<div class="bdsharebuttonbox" data-tag="share_1">
	<a class="tsina" data-cmd="tsina"></a>
	<a class="tqq" data-cmd="tqq"></a>
	<a class="sqq" data-cmd="sqq"></a>
	<a class="renren" data-cmd="renren"></a>
</div>
<script>
	// 百度分享按钮设置
	window._bd_share_config = {
		"share": {} //如果样式已经自己写好了,那么只需要这一句即可
	}
	//加载百度分享js文件
	with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?cdnversion='+~(-new Date()/36e5)];
</script>

html部分,外层容器的class="bdsharebuttonbox"是必须的。如果你页面上只有这一个分享区域,那么可以去掉data-tag="share_1"。
分享按钮必须是a标签,不然功能不会生效。
a标签的class属性不是必须的,可以不加或者设置成不同的。如果设置成百度分享允许的class的话,这个按钮会被自动加上一些样式。
a标签的data-cmd属性是必须的,它表示点击这个按钮后是要分享到哪里去。另外有了data-cmd属性后,这个a标签还会被自动加上title属性,如 title="分享到新浪微博" 。

剩下的是JavaScript部分,分享按钮设置里面只用写一句就行了(当然也可以按需要增加更多的设置)。底下“加载百度分享js文件”无需改动。

做完之后,分享按钮的功能就已经加上了。

ps:如果想知道自己分享的目标的代号是什么(a标签的data-cmd属性部分),可以查看分享媒体和标识对应表

在网页上添加百度分享功能

11/9
2016
学习

JavaScript捕获按键

在网页上,当按键被按下时,我们可以使用JavaScript来捕获到这个事件。

在JavaScript里,每个键都会有一个数字代码,我们可以使用JavaScript来查看按键对应的代码是什么。

document.onkeydown=function(event){
	var e = event || window.event;
	console.log(e.keyCode);
}

JavaScript捕获按键

10/29
2016
学习 软件

自动删除百度贴吧里的低粉丝数的粉丝

在百度贴吧里,有时候关注你的人里会有些无意义的小号或机器人账号(我就经常被机器人账号关注),通常他们的粉丝数很低(0或1),本工具可以通过这个条件来删除这些粉丝。

在greasyfork安装这个UserScript

你可修改setNum变量的值来修改设定数字。

本脚本自动执行,自动翻页,一直删除到最后一页为止。

删除完毕后请记得停用此脚本哦~

真正的粉丝……

自动删除百度贴吧里的低粉丝数的粉丝

10/24
2016
软件

仙尊pixiv图片下载器 Xianzun Pixiv Downloader

downloader javascript js pixiv p站 UserScript Xianzun Pixiv Downloader 下载器 仙尊 批量下载 油猴脚本
新版界面,pid=68972163

本工具可以在pixiv上筛选你需要的图片,并且下载下来。下载到的图片都是原图尺寸。

你可以在greasyfork.org安装此UserScript

本工具是一个用户脚本(UserScript),你需要先在浏览器里安装用户脚本管理器扩展,再通过上面的链接把本脚本安装到用户脚本管理器里。

推荐使用chrome浏览器+Tampermonkey来安装。不要把本脚本直接作为浏览器的扩展安装。

github页面:https://github.com/xuejianxianzun/XZPixivDownloader

---------------

本工具现已推出 Chrome 扩展:

在 Chrome webstore 上安装 (扩展版的更新比较慢,我是先更新脚本版的)

-------------

QQ交流群:675174717
Read More →

仙尊pixiv图片下载器 Xianzun Pixiv Downloader

10/19
2016
学习

JavaScript停止事件冒泡以及阻止浏览器默认行为

原生JavaScript写法附带兼容性处理:

if (!!window.attachEvent) {	//区分浏览器指派事件
	document.getElementById("a").attachEvent("onclick",fun,false);
}else{
	document.querySelector("#a").addEventListener("click",fun,false);
}
function fun (event) {
	//处理event对象的兼容性
	var e=event||window.event;	//firefox里的event是临时的,不是window下的全局变量
	//停止事件冒泡
	e.stopPropagation?e.stopPropagation():e.cancelBubble=true;	//低版本ie使用cancelBubble属性,其他浏览器使用stopPropagation方法
	//阻止浏览器默认行为
	e.preventDefault?e.preventDefault():e.returnValue = false;	//低版本ie设置returnValue属性,其他浏览器使用preventDefault方法
}

IE8及更低版本的IE,添加事件要使用私有的attachEvent(),也不支持stopPropagation()和preventDefault(),真是毒瘤啊。

如果使用jQuery的话,写起来更加方便,因为jQuery已经做了兼容性处理,我们用w3c标准方法就行了:

$("a").click(function (e) {
    e.stopPropagation(); //停止事件冒泡
    e.preventDefault(); //阻止浏览器默认行为
    return false; //同时停止冒泡和阻止默认行为。
});

注意,jQuery中的return false和原生JavaScript里的return false是有区别的:
原生JavaScript中的return false不会停止冒泡,只会阻止默认行为。但jQuery中的return false会同时停止冒泡和阻止默认行为。

JavaScript停止事件冒泡以及阻止浏览器默认行为

10/14
2016
学习

使用css3动画给评论头像增加旋转效果

刚才我给评论区头像添加了鼠标经过旋转的效果,是使用css3动画做的。

在css样式表里先定义一个旋转的动画,然后在鼠标经过头像时触发动画:

@keyframes rotate_once{
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
.comment-meta .avatar:hover{
	animation: rotate_once .5s;
}

有时候必须结合JavaScript事件播放动画的时候,可以先把animation那句放到一个单独的class名里,然后通过JavaScript来动态添加、删除改动画的className,来达到播放动画或去除动画的效果。

示例:

element.addEventListener("mouseover",function(){
	element.className=nowClassName+" rotate_once";
	element.addEventListener("animationend",function(){
		element.className=nowClassName;
	})
});

鼠标经过元素时添加rotate_once这个className,播放动画。动画播放完毕之后再去掉这个className。

这里有个知识点,就是JavaScript里有三个能监听动画播放的事件:

animationStart 动画开始执行
animationEnd 动画执行结束
animationIteration  重复动画开始执行(只有重复动画才会触发)

使用css3动画给评论头像增加旋转效果