最近发现的,如果把表单input控件的type设置为date,chrome就会自动应用选择日期功能了。
<input type="date" name="">
首先输入框上会显示“年/月/日”的字样。

你可以点击这三项中的任意一个输入数字。
鼠标放上input之后,最右侧会显示一些操作按钮。点击最右侧的三角形,就会打开一个日期选择面板:

点击即可把选择的日期输进去。

这样在chrome上大部分时候都可以对各种日期输入插件说拜拜啦~来,跟我念:
谷人希谷人希谷人希谷人希谷人希谷人希谷人希谷人希谷人希谷人希谷人希谷人希……
试一试:
如果chrome浏览器中有了重复书签,我们可以使用Bookmark Checker这个扩展来检查。但是Bookmark Checker的检查结果没有把重复书签放到一起,如果重复书签较多的话,找起来就非常费事。所以我写了一段JavaScript代码来重新组织Bookmark Checker的结果页面,以提高去重的效率。
首先安装Bookmark Checker,之后在浏览器的工具栏上点击它以打开操作界面。

在下拉框选择“duplicate”,然后点击下方的“check”按钮,即可开始检查重复的书签。
等它检查完毕并且显示了结果页面后,请打开控制台,粘贴执行位于本文末尾的代码。
Read More →
16.5.19更新:
推荐配合Bookmark Checker扩展来去除重复书签。方法见此。
因为种种原因,chrome中可能会存在一些重复的书签。我前天同步浏览器数据时就被坑了,有两百个书签重复了。
我先是找到了“Bookmark Checker”这个扩展,它可以检查重复书签,但显示结果时没有把重复项放一起,只能靠眼睛去找。而且它页面上的文字还无法复制,这导致我们无法使用ctrl+F来查找匹配项。最后我只好自己写一个。
使用步骤如下:
首先在书签管理器中导出书签为html文件,这个步骤不截图了,不会的可以百度。
导出之后,打开该html文件,如图:
如果你使用chrome访问本网站,你应该能看到本站的滚动条样式是自定义的。那我们要如何做呢?
其实chrome内置了一些伪类,使用它们可以控制滚动条的外观。例如:(less 语法)
.beautify_scrollbar {
// 滚动条整体
// width 是垂直滚动条的宽度,height 是水平滚动条的高度
&::-webkit-scrollbar {
width: 10px;
height: 10px;
}
// 整个滚动条的底色
//&::-webkit-scrollbar-track {background:#fcfcfc;}
// 滚动条的滑块部分
&::-webkit-scrollbar-thumb {
background-color: #3AB8F2;
border-radius: 10px;
}
// 垂直滚动条的滑块部分
// &::-webkit-scrollbar-thumb:vertical {
// background-color: #3AB8F2;
// border-radius: 10px;
// }
// 水平滚动条的滑块部分
// &::-webkit-scrollbar-thumb:horizontal {
// background-color: #3AB8F2;
// border-radius: 10px;
// }
}
如果你要对特定元素设置滚动条,而不是对整个页面设置,那么需要在伪类前面加上这个元素的选择器。
昨天在做图的痛苦煎熬中,忽然脑子一抽想到了鼠标双击事件(看啊,我不得不思考代码以减轻做图的痛苦了。可见做图是多么惨无人道的事情)。于是鼓捣了两个玩意出来。
第一个代码是自定义鼠标双击事件。我们知道,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 →

虽然也没什么卵用就是了。使用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来做,费了不少事,走了两次弯路←_←

今天在chrome上安装了Tampermonkey扩展,折腾一番后想起来给贴吧发帖框添加小尾巴。于是去尝试一番,现在成功了。
document.getElementsByClassName("poster_submit")[0].addEventListener('click', function(){
var ueditorAllP=document.getElementById('ueditor_replace').getElementsByTagName('p');
ueditorAllP[ueditorAllP.length-1].innerHTML+='<br><br>Servant Saber、召唤に従い参上した。';
}, true)
原理是给提交按钮添加一个事件,当点击它的时候,在输入框内最后一个P标签内(因为每次按enter换行都会产生一个新的P标签)的html代码中,追加小尾巴的html代码。注意不能使用innerText,因为这样的话,如果最后一个P标签内有图片,则图片会被文字替换,图片就没了。
PS:Tampermonkey可以引用外部js文件,格式是使用// @require,然后在后面加上js文件的url,如下:
// @require /f/keymaster.js
今天在某网站看到导航的英文标签用css来缩小了字体
-webkit-transform:scale(0.84,0.84);
这使12px的字体显示的像9px左右,但是看起来不是很自然了。我刚开始很奇怪,因为用的arial字体即使在小于12px的情况下也有很好的表现,后来我去掉这条属性,直接把字号改成9px,却发现无效,这才想起来chrome里面字号小于12px的话也是按12px显示的,这个方法大概可以算是一个变通的方法了。