08/18
2015
08/15
2015
百度了一些tooltip插件，后来感觉bootstrap的这个tooltip插件比较顺眼，于是鼓捣一番，会简单的使用了。
上例的代码如下：
<script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.js"></script>
<script src="/f/bootstrap-tooltip.js"></script>
<link rel="stylesheet" href="/f/bootstrap_tooltip.css"/>
<script>
$(function () { $("[data-toggle='tooltip']").tooltip(); }); //启用页面中的所有的工具提示（tooltip）
</script>
<img src="/f/穹妹%20小图.jpg" alt="" data-toggle="tooltip" data-placement="bottom" title="不要羡慕我的床"/>
<br /><br />
<a href="saber.我爱你" data-toggle="tooltip" title="这是一个hentai网站">saber酱的抱枕</a>
<br /><br />
<span data-toggle="tooltip" data-placement="right" title="原来saber是我的剑鞘啊~">最爱saber啦~</span>
<br /><br />
<div data-toggle="tooltip" title="练习~练习~">练习~练习~</div>
原理是触发时添加html元素和class类，提示的样式是css实现的，无需图片，所以我们只需要处理代码就行了。
Read More →
bootstrap的tooltip插件使用
08/14
2015
代码如下：
html{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
}
chrome下效果完美，火狐中body的背景图片没有变灰，IE11中完全无效。对于IE应该可以兼容到IE9。
我花了半个多小时，测试了各种方法，除了各种css外，还找过用js创建canvas的代码，或是使用某jq插件，最后也没成功实现全浏览器通吃。css的方法最简单，不过兼容性不怎么让人满意。
chrome是使用了-webkit-filter: grayscale(100%)这一项，火狐中生效的是filter:grayscale(100%)。
IE10和IE11在图像滤镜方面还是比较坑爹的,不能执行filter滤镜，而且连svg滤镜也不支持。
使用chrome的话可以玩玩下面这个小玩意：
可以重复点哦。
代码如下：
<button id="setGray">设置网页的灰度</button>
<script>
$("#setGray").click(
function setGray () {
var grayCss="-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%); filter: grayscale(100%);";
var num=prompt("请输入您希望的灰度（正整数）","");
if (num!=100) {
grayCss=grayCss.replace(/100/g, num);
};
$("html").attr("style",grayCss);
}
)
</script>
以上真是蛋疼之作，不知道会有地方用到不。
使用灰度滤镜将网页变成灰色
08/7
2015
今天想到了验证码倒计时的效果，于是做了一个出来。
发现定时器里面写函数名的话，如果带了括号，函数会瞬间执行多次。
代码如下：
<form action="">
<input type="text"> <input type="button" id="getyzm" value="获取验证码">
</form>
<script>
function yzmdjs (id,time) {
var getyzm=document.getElementById(id);
var getyzmYuan=getyzm.value;
getyzm.setAttribute("disabled","disabled");
time=time;
getyzm.value=time+"秒后可重新获取验证码";
daojishiT=setTimeout(daojishi(),1000);
function daojishi () {
//console.log(time);
time--;
getyzm.value=time+"秒后可重新获取验证码";
if (time==0) {
getyzm.value=getyzmYuan;
getyzm.removeAttribute("disabled");
}else{
daojishiT=setTimeout(daojishi,1000);
};
}
}
document.getElementById("getyzm").onclick=function (argument) {
//添加发送验证码的操作
yzmdjs(this.id,10);
}
</script>
js做的获取验证码倒计时效果
08/7
2015
刚才有个同学问了个问题，div里面有个超链接，但点击div时中的其他地方时，也有事件。这样如果点击超链接了，会同时触发“页面跳转”和“div上的事件”这两个事件。我们当然希望这两个事件互不影响。
后来我想到以前看过用js获取当前焦点元素的办法，找了出来，写了个demo，成功了。用的是document.activeElement属性。
原理就是div上发生onclick事件时，判断是不是里面的a标签获得了焦点。如果不是，则触发div上的事件。
demo如下：
<div id="a" style="border:1px solid #f00;width:300px;height:100px;">
<a href="bbbbb" id="b" target="_blank">bbbbbbb</a>
</div>
<script>
document.getElementById("a").onclick =function (argument) {
if(document.activeElement!=document.getElementById("b")){
window.open("aaaaa");
};
}
</script>
经过试验发现，div是获取不到焦点的。简单的说，table不到div。如果点击div，获取焦点的是body元素。
之前我们想过做定位，让div和超链接处在不同的z-index上，经过试验，没用。但今天想到的有个思路看情况是可以选择使用的：
首先给内部元素设置一个属性，默认为false。当鼠标经过内部元素时，变为true。这样就可以判断点击发生时，点击区域是不是在内部元素上了。
js获取获得了焦点的元素
07/21
2015
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="/f/jquery-sakura.min.js"></script>
<link type="text/css" rel="stylesheet" media="screen" href="/f/jquery-sakura.min.css" />
<script>
// domReady
$(function() {
$('body').sakura();
});
// windowLoad
$(window).load(function() {
$('body').sakura();
});
</script>
转自离别歌，十几岁已经完爆我了。
页面太长的话可能会导致有点卡顿。jq版本不知有无影响。
一个樱花飞舞的jq特效
07/21
2015
之前发了个《js左右切换展示的效果》，作用是在小区域内展示内容并且可以左右来回切换。放在大区域用就不合适了，于是改大之后加上了指示器，加上了指示器跳转，加上了自动播放，改到最后改成了banner……很无语，单独放出来吧。
代码也很简单，需要修改功能的话也不难。
js左右切换带控制按钮的banner
07/21
2015
07/11
2015
当你查看P站左上角的“动态”页面时，会发现里面的动态分为两种，一种是别人收藏了某个作品的消息，另一种就是画师的投稿了。关注的人多的话，收藏的动态会多于投稿的动态。（吐槽下以前我关注的一个画师是收藏狂魔，动态往下翻几页全都是他的收藏，几乎看不到别人的动态，无奈之下我取消关注了。
有时候，我想单独看看投稿作品，但是没有发现这个功能开关。于是自己动手，写了段简单的js来筛选投稿动态：
window.onscroll=function () {
var allList=document.getElementsByClassName("stacc_status");
for (var i = 0; i < allList.length; i++) {
if(allList[i].getElementsByClassName("stacc_type_message_add_illust").length==0){
allList[i].style.display="none";
}
};
}[/code]
在浏览器的控制台执行，之后当页面滚动时，会把不是投稿的动态隐藏掉，这样就只剩下投稿的动态了。
有时候，在页面滚动后会加载新的动态。要对这些新动态进行筛选的话就需要再滚一下。
用js筛选P站动态中的投稿作品
07/6
2015
获取页面卷去（滚动）高度的语句是：
document.body.scrollTop
然而实际应用中，在IE和firefox中需要这么写：
document.documentElement.scrollTop
综合起来可以用下面的写法：
document.documentElement.scrollTop|| document.body.scrollTop
上面是获取卷去的高度，如果是要设置卷去的高度的话，就只能通过判断浏览器来区别对待了：
if(navigator.userAgent.indexOf('AppleWebKit') > -1){//如果是chrome内核，则
document.body.scrollTop =_scrollTop;
}else{//否则
document.documentElement.scrollTop=_scrollTop;//IE和火狐需要这一句
}
scrollLeft也需要这么写。
以上没有考虑Safari的情况，因为我是win系统。据说Safari用的是自己特有的函数，需要考虑Safari的话可参考此处。
刚才帮同学写了个返回顶部的按钮，按钮是在iframe里面的，把代码贴出来备用：
$("#ScrollToTop").click(function () {
if(navigator.userAgent.indexOf('AppleWebKit') > -1){//如果是chrome内核，则
window.top.document.body.scrollTop =0;
}else{//否则
window.top.document.documentElement.scrollTop=0;
}
})
注意，如果你把此代码用在顶级页面中，是没有问题的。如果用在iframe里面，只有在服务器环境中才能看到效果。在本地环境中，iframe获取window.top的属性会受到跨域限制，所以无效。
