12/24
2015
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/19
2015
12/18
2015
昨天在做图的痛苦煎熬中，忽然脑子一抽想到了鼠标双击事件（看啊，我不得不思考代码以减轻做图的痛苦了。可见做图是多么惨无人道的事情）。于是鼓捣了两个玩意出来。
第一个代码是自定义鼠标双击事件。我们知道，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
2015
以JavaScript中的alert()函数为例，改变它的功能。
var _alert=window.alert;
window.alert=function (s) {
if (arguments[0].indexOf("萝莉")>=0) {
_alert("快看 有小萝莉！");
}else{
_alert("没有萝莉，拒绝执行");
};
}
alert("萝莉控");
alert("御姐控");
功能怎么改自然可以随意来，也可以改成压根就不弹。
javascript 函数劫持
12/3
2015
<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
2015
虽然也没什么卵用就是了。使用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
2015
在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
2015
今天完成了一个手机站专题的排版，然后到手机上测试缩放的时候出了问题，折腾半个上午，摸索出一些心得（后来发现，这就是固定宽度布局嘛）。
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
2015
以前有篇文章《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代码使手机访问手机版网站
02/17
2015
之前我已经搜集了两种雪花飘落的效果：
第一种 雪花会飘满整个网页长度，占用资源严重，不推荐使用
第二种 雪花只飘满网页当前可视区域，即只会覆盖在当前一屏上，不太占资源。
这次找到的第三种，原理和第二种类似，代码如下：
<script>
var snow = function() {
if(1==1) {
$("body").append('<canvas id="christmasCanvas" style="top: 0px; left: 0px; z-index: 5000; position: fixed; pointer-events: none;"></canvas>');
var b = document.getElementById("christmasCanvas"), a = b.getContext("2d"), d = window.innerWidth, c = window.innerHeight;
b.width = d;
b.height = c;
for(var e = [], b = 0;b < 70;b++) {
e.push({x:Math.random() * d, y:Math.random() * c, r:Math.random() * 4 + 1, d:Math.random() * 70})
}
var h = 0;
window.intervral4Christmas = setInterval(function() {
a.clearRect(0, 0, d, c);
a.fillStyle = "rgba(255, 255, 255, 0.6)";
a.shadowBlur = 5;
a.shadowColor = "rgba(255, 255, 255, 0.9)";
a.beginPath();
for(var b = 0;b < 70;b++) {
var f = e[b];
a.moveTo(f.x, f.y);
a.arc(f.x, f.y, f.r, 0, Math.PI * 2, !0)
}
a.fill();
h += 0.01;
for(b = 0;b < 70;b++) {
if(f = e[b], f.y += Math.cos(h + f.d) + 1 + f.r / 2, f.x += Math.sin(h) * 2, f.x > d + 5 || f.x < -5 || f.y > c) {
e[b] = b % 3 > 0 ? {x:Math.random() * d, y:-10, r:f.r, d:f.d} : Math.sin(h) > 0 ? {x:-5, y:Math.random() * c, r:f.r, d:f.d} : {x:d + 5, y:Math.random() * c, r:f.r, d:f.d}
}
}
}, 70)
}
}
snow();
</script>
只是后两种效果看着都不怎么像真的雪花呢
