当前位置 博文首页 > 大曾blog：DaZeng：超好看完整的自定义web密码生成器！！！(带源
成品镇楼（演示案例）：
<div class="box">
<h2>密码生成器</h2>
<div class="pasbox">
<p id="password">Lorem ipsum dolor sit.</p>
<p class="tip fz">点击复制</p>
</div>
<p class="tip">长度：<span id="nowlen">16</span></p>
<div class="rangebox">
<span>0</span><input type="range" id="rangein"><span>32</span>
</div>
<p class="tip">sections</p>
<div class="sectionbox">
<p>包含大写</p>
<!-- 选择框 -->
<div class="changestatus" data-id="0">
<div></div>
</div>
</div>
<div class="sectionbox">
<p>包含小写</p>
<!-- 选择框 -->
<div class="changestatus" data-id="1">
<div></div>
</div>
</div>
<div class="sectionbox">
<p>包含数字</p>
<!-- 选择框 -->
<div class="changestatus" data-id="2">
<div></div>
</div>
</div>
<div class="sectionbox">
<p>包含符号</p>
<!-- 选择框 -->
<div class="changestatus" data-id="3">
<div></div>
</div>
</div>
<button type="button" id="doit">生成密码</button>
</div>
渐变色的设置，使用linear-gradient（渐变的方向，颜色1，颜色2）
background: linear-gradient(to bottom, #acb6e5, #86fde8);
效果图如：
更改默认input range的样式：
- 取消range默认样式：
使用到-webkit-appearance这个特殊属性，这是 webkit 特有的属性，代表使用系统预设的外观，只要我们将这个属性设为none，那麽原本 range 的样式就不会呈现了。- 设置滑条两边不一样的颜色：
background: -webkit-linear-gradient(#5791f5, #579ef5) no-repeat #E6E6E5;- 更改小圆球的样式：
上面的 CSS 只是针对 range 的本体，但还有一个拉把的按钮样式还没改。这时候我们要使用另外一个 webkit 的伪元素::-webkit-slider-thumb来修改
input{
-webkit-appearance: none;
/*自己的css*/
}
input::-webkit-slider-thumb {
-webkit-appearance: none;
/*自己的css*/
}
默认样式：
添加了自己的css样式之后修改为如图所示：
两种方法的思路：
方法一的控制器为且的条件，即开启的规则都要满足。
方法二的控制器为或的条件，即满足开启的规则，但不一定都满足。
方法一：
四个规则四个flag控制器，开启对应规则时，传入不同的遍历范围，设置都遍历同一个数组arr，arr中包含大小写字母，数字以及特殊符号。开启不同控制器时，判断控制器个数，再分别每个控制器中生成随机多少个数，返回不同控制器生成的字符串拼接再打乱排序渲染到页面上。注意：在判断时要注意分割条件。
方法二：
四个规则四个flag控制器，开启对应规则时，传入开启的状态，设置遍历不同的arr规则，定义四个arr，分别包含，大写字母，小写字母，数字和字符串，定义一个函数根据不同的开启规则执行不同的数组拼接排序和返回。
方法一：核心js
function randomWord(min,a,b, max) {
let str = "",
range = min,
//0-9
//10-35 a
//36-61 A
//62-79
arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9',
'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l',
'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L',
'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z',
'-','.','~','!','@','#','$','%','^','&','*','(',')','_',':','<','>','?'];
for (let i = 0; i < range; i++) {
pos = parseInt(Math.random() * (a-b+1)+b);
str += arr[pos];
}
return str;
}
function wuxuFn(str){
let temparr = str.split('').sort(function(){
return Math.random() - 0.5
})
str = temparr.join('')
laststr = str
return str
}
//使用函数案例：
let num1 =parseInt(Math.random()*(pswlen-4)+1)
let num2 =parseInt(Math.random()*(pswlen-num1-2)+1)
let num3 =parseInt
