saber 酱的抱枕

Fly me to the moon

05/23
2016
学习

JavaScript定时器里调用非全局函数的办法

对于JavaScript的定时器(setInterval、setTimeout)来说,使用它们来调用其他函数时,两种调用方法是有区别的。

第一种方法如下,以字符串形式调用函数。

!function () {
	function f() {
		console.log("saber");
	}
	setTimeout("f()",1);
}()

使用这种方式要注意一点,它不能调用局部函数,只能调用全局函数。如函数f是个局部函数,用这种方式调用会报错:

Uncaught ReferenceError: f is not defined

碰到需要调用的函数是局部函数的话,则可以使用第二种调用方式:

!function () {
	function f() {
		console.log("saber");
	}
	setTimeout(f,1);
}()

直接写函数名就行了。困扰我多年的问题现在终于明白了。

JavaScript定时器里调用非全局函数的办法

05/19
2016
学习 软件

chrome查找重复书签之Bookmark Checker改进办法

如果chrome浏览器中有了重复书签,我们可以使用Bookmark Checker这个扩展来检查。但是Bookmark Checker的检查结果没有把重复书签放到一起,如果重复书签较多的话,找起来就非常费事。所以我写了一段JavaScript代码来重新组织Bookmark Checker的结果页面,以提高去重的效率。

首先安装Bookmark Checker,之后在浏览器的工具栏上点击它以打开操作界面。

Bookmark Checker chrome检查重复书签 扩展 改进 JavaScript

在下拉框选择“duplicate”,然后点击下方的“check”按钮,即可开始检查重复的书签。

等它检查完毕并且显示了结果页面后,请打开控制台,粘贴执行位于本文末尾的代码。
Read More →

chrome查找重复书签之Bookmark Checker改进办法

05/19
2016
学习

js做的元素不间断来回移动的效果

今天用js做了个元素移动的效果,支持水平、垂直方向上的单次移动和来回移动,支持斜向运动(斜向运动时自带反弹效果 哈哈)。

假设这个元素是我们想要移动的:

<img id="moveE" src="http://www.saber.我爱你/wp-content/uploads/2014/07/1_b.gif">

它可以是图片,也可以是其他元素。可以定义css样式,这个没关系。

js代码如下:

function move_on(element,far,to,cishu,time) {
	var add=(to%2==1)?true:false;
	var num=(to<3)?((element.style.marginLeft==="")?0:parseInt(element.style.marginLeft)):((element.style.marginTop==="")?0:parseInt(element.style.marginTop));
	var max=(to%2==1)?(num+far):num;
	var min=(to%2==1)?num:(num+far);
	var time=setInterval(function  () {
	    if(add){
	        num++;
	        (to<3)?(element.style.marginLeft=num+"px"):(element.style.marginTop=num+"px");
	        if(num>=max){
	            add=false;
	            cishu--;
	            if(cishu==0){clearInterval(time)}
	        }
	    }else{
	        num--;
	        (to<3)?(element.style.marginLeft=num+"px"):(element.style.marginTop=num+"px");
	        if(num<=min){
	            add=true;
	            cishu--;
	            if(cishu==0){clearInterval(time)}
	        }
	    }
	},time);
}

(代码挺短的吧~三元操作符真是个好东西啊

参数解释:

要移动的元素、移动多少像素、移动类型、移动次数、定时器执行间隔时间(毫秒)
移动类型规定如下:
1 左右来回移动,起始点是从左向右
2 左右来回移动,起始点是从右向左
3 上下来回移动,起始点是从上向下
4 上下来回移动,起始点是从下向上
移动次数定义如下:
为0时为无限制来回移动,否则定义为多少则移动多少次。注意,一次单向运动算1次,一次来回运动算2次。

可能看的有点迷,没关系,接下来我一个个上例子。
Read More →

js做的元素不间断来回移动的效果

05/15
2016
学习

原生js中的利器——querySelectorAll

昨天发表的那个网站地图助手里,有几个输入框都需要在鼠标经过时自动选中其中的内容。

实现起来没有难度,但类似于getElementBy...这样的选择器难以在不写重复代码的情况下选中几个不同id的元素。所以我的代码写成了这样:

document.getElementById("a").onmouseover=function (argument) {
    this.select();
}
document.getElementById("b").onmouseover=function (argument) {
    this.select();
}
document.getElementById("y").onmouseover=function (argument) {
    this.select();
}
document.getElementById("c").onmouseover=function (argument) {
    this.select();
}

感觉这样实在无法见人,于是去贴吧求助。终于知道了一个好办法:js现在有了一个原生的querySelectorAll方法,可以接受一组css选择器风格的字符串来作为选择器(这点和jQuery很像),如下:

document.querySelectorAll('#a,#b,#c,#y');

这样就解决了重复获取元素的问题了。querySelectorAll简直是一个福音啊。

querySelectorAll和querySelector是HTML5中新增的属性,但是IE8也支持。所以放心的用吧~

由于我们是无法对一个元素集合直接添加事件的,只能用循环来加了(所以jQuery用起来还是更方便啊)。使用for循环就可以,forEach也可以(使用forEach更有逼格?)。不过元素集合并不是数组,要使用forEach的话需要借用数组的属性。于是最后的代码如下:

function selectS(s){
    return document.querySelectorAll(s);
}
[].forEach.call(selectS('#a,#b,#c,#y'),function(e){
    e.onmouseover=function (argument) {
        this.select();
    }
});

原生js中的利器——querySelectorAll

05/3
2016
学习

使用JavaScript检查chrome中的重复书签

16.5.19更新:

推荐配合Bookmark Checker扩展来去除重复书签。方法见此


因为种种原因,chrome中可能会存在一些重复的书签。我前天同步浏览器数据时就被坑了,有两百个书签重复了。

我先是找到了“Bookmark Checker”这个扩展,它可以检查重复书签,但显示结果时没有把重复项放一起,只能靠眼睛去找。而且它页面上的文字还无法复制,这导致我们无法使用ctrl+F来查找匹配项。最后我只好自己写一个。

使用步骤如下:

首先在书签管理器中导出书签为html文件,这个步骤不截图了,不会的可以百度。

导出之后,打开该html文件,如图:

chrome bookmarks 删除重复书签
Read More →

使用JavaScript检查chrome中的重复书签

04/29
2016
学习

批量获取保利威视视频vid的一段js代码

保利威视是一家视频托管服务商,里面的每一个视频都有一个特有的编号,即vid。

保利视频 批量获得vid

我需要获取多个列表中多个视频的vid,由于用鼠标选取效率低下,所以写了两句js,用js自动获取div并输出到控制台。没有技术含量,放在这里当做备忘吧。

进入新版管理后台,之后打开一个视频列表,如上图所示。在此页面中执行下面的js代码,即可获得当前列表中所有的vid:

var a=$("p.text-muted");
for(var i=0;i<a.length;i++){
    console.log(a.eq(i).text().split("| ")[1]);
}

保利视频 批量获得vid

选中全部输出结果,复制进编辑器,再批量删除不需要的文字,就大功告成了。

批量获取保利威视视频vid的一段js代码

04/20
2016
学习

使用Access-Control-Allow-Origin解决Ajax跨域问题

跨域问题是web开发中一个常见的问题。例如说从网站a.com上用ajax把一些信息发送到b.com上,就会产生跨域问题。浏览器为了安全会阻止这个跨域请求,并产生一个跨域错误。

如果接收方b.com对应的文件是php文件,则可以在header函数中指定Access-Control-Allow-Origin的值,来设置哪些域名可以向这里发送跨域请求。

示例:

ajax请求如下(本彩笔使用了jq的ajax):

$.ajax({
    url:"http://127.0.0.1/t/t.php",
    type:"get",
    async:true,
    cache:false,
    dataType:"text",
    success:function  (data) {
        alert(data);
    }
});

php文件添加Access-Control-Allow-Origin头:

header("Access-Control-Allow-Origin:*"); // 允许指定域名发起的跨域请求
//header("Access-Control-Allow-Origin:http://tieba.baidu.com"); // 允许指定域名发起的跨域请求
echo "saber";

这就ok了。
Read More →

使用Access-Control-Allow-Origin解决Ajax跨域问题

03/22
2016
学习

网站黑名单的油猴脚本

用油猴脚本屏蔽网站 黑名单

昨天搜索一个问题,点击了一个像模像样的答案,结果打开是一个游戏的官网。被恶心到了,所以写了个user脚本,可以手动把网站添加到黑名单。

安装此UserScript

如果想屏蔽某个域名的网站,需要手动去代码里添加其域名。

代码如下:
Read More →

网站黑名单的油猴脚本

02/20
2016
学习

使用JavaScript按收藏数筛选pixiv上的作品

如果我们买了p站会员,那么搜索tag的时候可以随意按收藏数筛选作品。但如果没有会员,看到的作品列表只能是按最新投稿时间排序的。这些作品内容参差不齐,经常要用肉眼去找收藏数高的作品。这是很痛苦的事情,我不能忍受此状况,所以搞出了这个工具,算是做了点微小的工作吧。

如果筛选之后还想下载,请移步《pixiv图片批量下载器》

本工具只有一段js,在tag搜索页执行。由于js还是有点长的,所以就不贴到页面上了。

下载filterpixivimg.js

好了,来讲讲怎么用。以搜索“saber”为例:

1.在控制台里直接粘贴执行js代码。之后页面右侧会出现两个按钮(见上图)。
Read More →

使用JavaScript按收藏数筛选pixiv上的作品