saber酱的抱枕

哀哉京阿尼

12/26
08:00
学习

筛选pixiv搜索页面中的作品

p站会员过期了,无法直接按收藏数搜索了。普通用户看到的作品貌似是按时间排序的,这里面质量参差不齐,为了快速筛选高素质的作品,搞了下面这个小玩意,可以把收藏数低于指定标准的作品从页面中删除:

var wantNum=100;
var allPicArea=$(".autopagerize_page_element .image-item");
for (var i = 0; i <allPicArea.length; i++) {
	if (allPicArea.eq(i).find("._ui-tooltip").length==0||allPicArea.eq(i).find("._ui-tooltip").eq(0).text()<wantNum) {
		allPicArea.eq(i).remove();
	};
};

直接在控制台执行就可以,这个100用的时候自己改吧。

虽然使用了jQuery,但p站页面引用的有,我们不用自己再引用了。

ps:写的时候犯了低级错误,应该用find()的,用成了children(),还是用的太少了。

筛选pixiv搜索页面中的作品

12/24
11:48
学习

去掉document.referrer的两种方法

JavaScript中的document.referrer属性保存了来源网页,也就是当前页面是从哪个网址跳转或打开的。如果想要去除document.referrer信息,有两种办法:

1.对于支持html5特性的浏览器,直接在超链接上加上的属性:

<a href="index.php" rel=noreferrer>测试</a>

这样,在跳转后的页面中查看属性,值为空。

2.对于不支持html5的浏览器,例如IE8,也先加上rel=noreferrer属性,然后使用JavaScript代码来去除:

<a href="index.php" rel=noreferrer>测试</a>
<script src="https://code.jquery.com/jquery-1.8.0.min.js"></script>
<script>
	 $.browser.webkit || $.event.add(window, "load", function () { //webkit系列浏览器啥也不做
	     //把所有带有rel=noreferrer的链接找出来变量处理
	     $("a[href][rel~=noreferrer], area[href][rel~=noreferrer]").each(function () {
	         var b, e, c, g, d, f, h;
	         b = this;    //b表示当前链接dom对象
	         c = b.href;  //保存原始链接
	         $.browser.opera ? (b.href = "http://www.google.com/url?q=" + encodeURIComponent(c), b.title || (b.title = "Go to "     + c)) : (d = !1, g = function () { //Opera做了些啥暂不管
	             b.href = "javascript:void(0)"
	        }, f = function () {
	            b.href = c
	        }, $(b).bind("mouseout mouseover focus blur", f).mousedown(function (a) { //鼠标out over focus blue都把链接还原
	            a.which === 2 && (d = !0) //鼠标down时,且鼠标中间按下时,把标志d设成true
	        }).blur(function () { //blur把标志d设成false
	            d = !1
	        }).mouseup(function (a) {
	            if (!(a.which === 2 && d)) return !0;
	            g();
	            d = !1;
	            setTimeout(function () {
	                alert("Middle clicking on this link is disabled to keep the browser from sending a referrer.");
	                f()
	            }, 500);
	            return !1
	        }), e = "<html><head><meta http-equiv='Refresh' content='0; URL=" + $("<p/>").text(c).html() + "' /></head><body><    /body></html>", $.browser.msie ? $(b).click(function () { //e是一个0秒自动刷新的页面,指向原始链接,但是没搞懂为什么搞个p标签在这里??
	            var a;                             //如果是IE的话
	            switch (a = this.target || "_self") {
	            case "_self": 
	            case window.name:
	                a = window;
	                break;
	            default:                           //如果原始链接的目标是本窗口,则在本窗口操作        
	                a = window.open(null, a)       //如果原始链接的目标不是本窗口,则用js open一个空窗口
	            }
	            a = a.document;
	            a.clear();                         //清除窗口的document
	            a.write(e);                        //写入上面构造的0秒自动刷新的页面
	            a.close();                         //关闭文档使其展示出来
	            return !1                          //如果非IE(firefox), 是用的'Data URI scheme'承载0秒自动刷新的页面
	        }) : (h = "data:text/html;charset=utf-8," + encodeURIComponent(e), $(b).click(function () { //最后js触发点击
	            this.href = h; 
	            return !0
	        })))
	    })
	})
</script>

这样,跳转后的网页查看rel=noreferrer属性也是空的。

需要注意的是,由于使用了$.browser,所以jQuery版本不能高于1.9。

去掉document.referrer的两种方法

12/18
11:24
学习

js自定义鼠标双击事件以及对其的一些思考

昨天在做图的痛苦煎熬中,忽然脑子一抽想到了鼠标双击事件(看啊,我不得不思考代码以减轻做图的痛苦了。可见做图是多么惨无人道的事情)。于是鼓捣了两个玩意出来。

第一个代码是自定义鼠标双击事件。我们知道,JavaScript的鼠标双击事件(ondblclick)的判定时间是有阈值的。如果我们想自己定义,例如必须间隔在200毫秒以内才算双击,又比如想把时间间隔延长到1000毫秒。这时候可以自己设置时间阈值,满足条件就执行事件代码:

var click0=null;//第一次点击的时间戳
var clickTimeOut=500;//自定义允许的时间间隔
document.onclick=function  () {
	var d=new Date();
	if(click0==null){
		click0=d.getTime();
	}else{
		if(d.getTime()-click0>clickTimeOut){
			//console.log("不是双击");
			click0=d.getTime();
		}else{
			console.log("一次双击");
			click0=null;//初始化
		}
	}
}

这个和浏览器的判定应该是一样的了(至少从结果来看)。这也是数次修改之后的结果,改进的地方有(完全可以不看):

1.把相邻两次单击进行判断。例如鼠标点击了3次,第1次和第2次的间隔超时,第2次和第3次间隔在规定时间内。可以把第2和第3次点击识别为双击,而不是必须1、2判断一次,3、4再判断一次。

2.但是当一次双击事件触发之后,必须再进行至少两次单击才可以触发双击判定。例如3次单击间隔都在规定范围内,在把第1次和第2次识别为双击之后,不会把第3次和第2次连起来,认为又是一次双击。
Read More →

js自定义鼠标双击事件以及对其的一些思考

12/8
14:35
学习

javascript 函数劫持

以JavaScript中的alert()函数为例,改变它的功能。

var _alert=window.alert;
window.alert=function (s) {
  if (arguments[0].indexOf("萝莉")>=0) {   
    _alert("快看 有小萝莉!");   
  }else{
    _alert("没有萝莉,拒绝执行");   
  };
}
alert("萝莉控");
alert("御姐控");

功能怎么改自然可以随意来,也可以改成压根就不弹。

javascript 函数劫持

12/3
08:00
学习

使用js打印评分

四星:
二星:
三星:
零星:

<div class="rating" date-rating="4">四星:</div>
<div class="rating" date-rating="2">二星:</div>
<div class="rating" date-rating="3">三星:</div>
<div class="rating" date-rating="0">零星:</div>
<script type="text/javascript">
  function getRating(rating) {
      if(rating > 5 || rating < 0) throw new Error('数字不在范围内');
      return '★★★★★☆☆☆☆☆'.substring(5 - rating, 10 - rating );
  }
  var ratingwrap=document.getElementsByClassName("rating");
  for (var i = 0; i < ratingwrap.length; i++) {
    ratingwrap[i].innerHTML=getRating(ratingwrap[i].getAttribute("date-rating"));
  };
</script>

前几天在知乎上看到了一些巧妙的JavaScript代码,这个单独记录一下。设想满星5星的评分(也可以是10星,自己改代码),用js截取字符打印出评分。

我们一般的思路是先打印实心星星,然后补满空心星星。然而这个代码(getRating函数)把实心星星和空心星星放一起,一次截取完成。突破性的思维,令人不得不惊叹。

如果有半分制,又该怎么做呢?

嗯,似乎还找不到半实心半空心的五角星字符 ←_←

使用js打印评分

12/2
14:55
学习

隐藏百度贴吧帖子列表的摘要内容

虽然也没什么卵用就是了。使用chrome的Tampermonkey扩展,新建脚本,作用域为“http://tieba.baidu.com/*”,首先在头部注释里引用keymaster.js:

// @require /f/keymaster.js

然后添加如下js代码:

key('alt+a', function(){
	var _allList=document.getElementsByClassName("threadlist_detail");
	if(_allList[0].style.display!="none"){
		for (var i = 0; i < _allList.length; i++) {
			_allList[i].style.display="none";
		};
	}else{
		for (var i = 0; i < _allList.length; i++) {
			_allList[i].style.display="block";
		};
	}
	return false;
});

在页面中按快捷键alt+a(这个可以自己修改),可以隐藏/显示帖子摘要内容。

没什么技术含量的东西,不过一开始没想到用Tampermonkey来做,费了不少事,走了两次弯路←_←

隐藏百度贴吧帖子列表的摘要内容

08/28
08:00
学习

js的条件操作符(三元运算符)

在js中,假设有两个数值,我们要选出一个大的存入某个变量中。一般我们是用if写的:

var num1=3;
var num2=5;
var num;

if (num1>num2) {
	num=num1;
}else{
	num=num2;
};

今天看到一个教程上说到了“条件操作符”(三元运算符),可以代替上例中的if部分。试了下果然好使:

num=(num1>num2)?num1:num2;

语法:

variable = boolean_expression ? true_value : false_value;

感觉不能用在if里面有复杂操作的场景,用来赋值倒是极好的。

容我吐槽一下,现在这个代码高亮插件的着色效果太差了,上面两条让我以为我选的是text模式呢。

与之相关的还有||运算符,除了在条件判断中使用,它也可以在赋值的时候使用:

var a=document.documentElement.scrollTop|| document.body.scrollTop;

判断为真的值才会保存到变量里,这个例子是用来解决兼容性问题的。

js的条件操作符(三元运算符)

08/24
14:35
学习

网页使用固定宽度布局,适应不同宽度的手机屏幕

今天完成了一个手机站专题的排版,然后到手机上测试缩放的时候出了问题,折腾半个上午,摸索出一些心得(后来发现,这就是固定宽度布局嘛)。

1.排版的时候用px排,在css里把body宽度固定,可以定成和设计稿一样,例如360px,640px。其他元素也都用px。

2.使用js动态设置viewport:

var scale=document.documentElement.clientWidth/640;
// var scale=window.screen.width/640;
var metaEl = document.createElement('meta');
document.querySelector("head").appendChild(metaEl);
metaEl.setAttribute('name','viewport');
metaEl.setAttribute('content', 'width=device-width ,initial-scale=' + scale + ',maximum-scale=1.0, minimum-scale=0 ,user-scalable=no');

这里面的640改成自己给body定的的宽度。这个代码的意思就是把initial-scale倍数设置为浏览器device-width/网页固定的宽度,使得页面被缩放到适应屏幕宽度。

ps:本文最近做过更新,第二步动态设置viewport,虽然理论上是正确的,但我还没实践过。我现在尝试用rem布局。

网页使用固定宽度布局,适应不同宽度的手机屏幕

06/27
07:56
学习

利用百度Site App代码使手机访问手机版网站

以前有篇文章《js判断访问网站的是pc还是移动设备》,现在有个更方便的办法,就是使用百度的Site App代码来判断是否是手机访问。

<script src="http://siteapp.baidu.com/static/webappservice/uaredirect.js" type="text/javascript"></script>
<script type="text/javascript">uaredirect("http://wap.site.com");</script>

代码需要添加到head标签之中,首先引入百度的uaredirect.js,然后使用另一个js标签来设置手机访问时重定向到的url。
但是这种方式只能设置跳转网址,不能执行其他操作,所以有其局限性。

利用百度Site App代码使手机访问手机版网站