Saber 酱的抱枕

今天要把许多网站的密码重新设置，所以自己写了个密码生成器。比较简陋，不过在简单的用途上应该算够用了。

您希望密码中包含哪些内容？

阿拉伯数字（0-9）
大写英文字母（A-Z）
小写英文字母（a-z）
特殊符号（键盘上除了\的所有输入符号）

请设置密码位数：

生成结果：

生成密码

代码如下：

<p>您希望密码中包含哪些内容？</p>
<input type="checkbox" name="pwType" value="Number"> 阿拉伯数字（0-9）<br>
<input type="checkbox" name="pwType" value="Upper"> 大写英文字母（A-Z）<br>
<input type="checkbox" name="pwType" value="Lower"> 小写英文字母（a-z）<br>
<input type="checkbox" name="pwType" value="Punctuation"> 特殊符号（键盘上除了\的所有输入符号）<br><br>
请设置密码位数：<input type="text" name="pwLength" value="10"><br><br>
生成结果：<input  type="text" name="outputPw" /><br><br>
<button name="createPwButton">生成密码</button>
<script type="text/javascript">
   function createPW () {
       var allPw={
        "Number":"0123456789",
        "Upper":"ABCDEFGHIJKLMNOPQRSTUVWXYZ",
        "Lower":"abcdefghijklmnopqrstuvwxyz",
        "Punctuation":"~!@#$%^&*()_+[]{}|`;:,./?><-="
       }
       var allowPw="";
       for (var i = 0; i < document.getElementsByName("pwType").length; i++) {
           if (document.getElementsByName("pwType")[i].checked) {
                allowPw+=allPw[document.getElementsByName("pwType")[i].value];
           };
       };
       var pwLength=parseInt(document.getElementsByName("pwLength")[0].value,10);
       var pwResult="";
       for (var i = 0; i < pwLength; i++) {
        var nowRandom=parseInt(Math.random()*allowPw.length,10);
            pwResult+=allowPw.substring(nowRandom, nowRandom+1);
        };
        document.getElementsByName("outputPw")[0].value=pwResult;
   }

   document.getElementsByName("createPwButton")[0].onclick=function  () {
       createPW();
   }
</script>

使用js随机生成密码

本站以前有篇文章——《saber美图》。以前我看到了saber的美图就会发上来，频繁的更新。可是自从逛了P站之后这篇文章基本就没更新过了。这也算告一段落了吧，于是我想把这篇文章里的图片下载下来，这就有了下面的代码：

window.stop();
var allimg=$(".post_t img");
var downa=document.createElement("a");
document.body.appendChild(downa);
downa.download="";
var imgno=0;
function downimg () {
	downa.href=allimg.eq(imgno).attr("src");
	downa.click();
	imgno++;
	if (imgno>=allimg.length) {
		window.clearInterval(downimgt);
	};
	return imgno;
}
var downimgt=setInterval("downimg()", 1000);

使用方法：
打开文章页面，在文档加载完成之后（不必等待图片加载完成），在控制台执行上面的代码。
执行之后，将会停止页面加载，然后创建一个下载用的链接（所以此代码照例是chrome only）。最后，每一秒创建一个下载链接，以下载图片。
如果chrome询问是否允许此网站下载多个文件（应该是在地址栏上显示的提示），点击允许。

下载本站图片的js代码

昨天用js做了鼠标拖动元素的功能，并且限制了元素不能超出窗口边界。

之前用js制作的的自定义滚动条中，滚动条的拖动也是用的鼠标移动事件，不过那个情况简单些，只需要判断和限制Y轴上的情况。这次的情况复杂了一点，限制部分花了不少时间才写出来合适的

查看demo

使用js制作鼠标拖动元素的功能

WordPress的文章编辑器好蛋疼，代码模式下如果插入的代码有空行，就会自动加上p标签，还把&符号给转码了，想插入直接运行的代码还是只好用iframe。

前两天看到bilibili个人中心的收藏夹，收藏夹改版后，左侧显示的是分类列表，那里用了一个自定义滚动条。于是我也想做一个出来。花了大半天时间，终于做出来了，运行良好。

由于最外层div设置了overflow:hidden属性，所以滚动也需要用鼠标滚动事件来做。这个之前做过，没费多大事就做出来了。到了用滚动条控制滚动的时候就犯难了。因为以前用到鼠标事件基本上就是onclick，现在的拖动则要使用mousedown、mousemove、mouseup这三项。百度之后看到了别人写的结构，这才明白了一些。然后设置鼠标移动时的事件，设法减小计算量（有些值甚至有三种方法可以设置），增加必要的限制。真是步步维艰，光拖动这块，最少用了4个小时才完成。不过做完了收获也不小。

做这部分的时候我发现如果把mousemove事件写到mousedown里面，而且过后不解除绑定的话，会累计次数。就是说你第2次触发mousemove的时候是执行2次，触发第10次的时候是10次……写到外面不知道是否可以避免。

代码比较多，不贴了，查看demo更好一些。demo里也保留了很多注释。

需要jq支持；代码已经封装成了函数，可以直接饮用（参数代码里有说明）。你需要在网页中预设的高度有三个：外层box的高度，主体部分的高度和滚动条容器的高度。鼠标滚轮每次滚动多少个像素是由变量preHeight规定的。

当然，在实际使用中也要注意这几个主要结构的css属性，例如外层box的overflow:hidden;以及一些定位属性等。

此代码在chromeV45、firefoxV39、IE8、IE11中测试通过。

注意：

在实际中使用，不建议应用到全网页上（虽然我已经在本站上成功试验过了）。因为外层box的高度小于内容的高度（要不怎么会出现滚动条），而且设置了overflow:hidden属性。这将导致这个区域的翻页快捷键无效（例如上下方向键、翻页键等），会影响用户体验。如果把body标签作为最外层容器，很容易被发现。

此外，在移动设备上这个完全没卵用。

所以这个玩意较为适合的使用场景是在单独的区域上使用。

js制作的的自定义滚动条