密码生成器
成品镇楼（演示案例）：
HTML结构搭建：
<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>
css样式书写
渐变色的设置，使用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样式之后修改为如图所示：
js代码控制
两种方法的思路：
方法一的控制器为且的条件，即开启的规则都要满足。
方法二的控制器为或的条件，即满足开启的规则，但不一定都满足。
-
方法一：
四个规则四个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(Math.random()*(pswlen-num1-num2-2)+1)
let num4 =pswlen-num1-num2-num3
$('#password').html(wuxuFn(randomWord(num1,61,36)+randomWord(num2,35,10)+randomWord(num3,9,0)+randomWord(num3,79,62)))
方法二：核心js
arrA = [
'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'
];
arra = [
'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'
]
arr1 = [
'0', '1', '2', '3', '4', '5', '6', '7', '8', '9'
]
arr_=[
'-','.','~','!','@','#','$','%','^','&','*','(',')','_',':','<','>','?'
]
//gui==4
if(a==1&&b==1&&c==1&&d==1){
//...
}
//gui==1
else if(a==1&&b==0&&c==0&&d==0){
str = dofn(range,arrA)
}
function dofn(range,arrx,arry,arrz){
let str = ''
for (let i = 0; i < range; i++) {
if(arrz){
pos = parseInt(Math.random() * (arrx.concat(arry).concat(arrz).length));
let temp = arrx.concat(arry).concat(arrz).sort(function(){
return Math.random() - 0.5;
});
str += temp[pos];
}
else if(arry){
//...
}
else{
//...
}
}
return str
}
实现点击复制：详细使用参考文章
document.execCommand()
$('.fz').on('click',function(){
const input = document.createElement('input');
document.body.appendChild(input);
input.setAttribute('value', laststr);
input.select();
if (document.execCommand('copy')) {
document.execCommand('copy');
alert('复制成功');
}
document.body.removeChild(input);
})
完整代码
方法一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>密码生成器(无排序，且====>推荐)</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 800px;
background: linear-gradient(to bottom, #acb6e5, #86fde8);
}
.box {
width: 350px;
height: 550px;
background-color: rgb(8, 14, 48);
color: white;
border-radius: 10px;
/* text-align: center; */
margin: 0 auto;
margin-top: 100px;
box-shadow: 2px 2px 2px rgb(52, 52, 52);
box-sizing: border-box;
padding: 20px;
}
.box>div {
width: 100%;
height: 50px;
line-height: 50px;
border-radius: 10px;
/* padding: 10px; */
padding: 0 10px;
box-sizing: border-box;
background-color: #1C2040;
margin: 10px 0;
}
.sectionbox {
overflow: hidden;
}
.sectionbox p {
float: left;
width: 85%;
}
.changestatus {
float: right;
width: 15%;
background-color: #6D6F83;
/* background-color: #5C68E3; */
height: 25px;
border-radius: 25px;
margin-top: 12px;
position: relative;
}
.changestatus div {
height: 25px;
width: 50%;
border-radius: 50%;
background-color: white;
position: absolute;
left: 0%;
/* left: 50%; */
transition: all .2s;
}
button {
width: 100%;
height: 50px;
line-height: 50px;
border-radius: 10px;
background: linear-gradient(to left, #85c2e7, #ebbfff);
border: none;
outline: none;
color: white;
font-weight: bold;
}
.tip {
font-size: 10px;
color: rgb(189, 189, 189);
}
.tip span {
color: white;
font-size: 12px;
}
.pasbox {
overflow: hidden;
position: relative;
}
#password {
height: 30px;
line-height: 30px;
text-align: center;
margin-top: 10px;
font-size: 14px;
}
.fz {
height: 20px;
line-height: 20px;
position: absolute;
right: 10px;
bottom: 0;
}
.fz:hover {
color: white;
}
/* 更改input range样式 */
/* 使用到-webkit-appearance这个特殊属性，这是 webkit 特有的属性，代表使用系统预设的外观 */
/* 只要我们将这个属性设为none，那麽原本 range 的样式就不会呈现了 */
.rangebox input {
margin: 0 10px;
width: 80%;
height: 4px;
border-radius: 10px;
-webkit-appearance: none;
outline: none;
background: #404561;
/* 设置滑条两边不一样的颜色 */
background: -webkit-linear-gradient(#5791f5, #579ef5) no-repeat #E6E6E5;
background-size: 50% 100%;
}
/* 上面的 CSS 只是针对 range 的本体，但还有一个拉把的按钮样式还没改.
这时候我们要使用另外一个 webkit 的伪元素::-webkit-slider-thumb来修改 */
.rangebox input::-webkit-slider-thumb {
-webkit-appearance: none;
position: relative;
background-color: white;
width: 15px;
height: 15px;
border-radius: 50%;
}
</style>
</head>
<body>
<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>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
let flag0 = 0
let flag1 = 0
let flag2 = 0
let flag3 = 0
let pswlen = 16
let laststr = 'Lorem ipsum dolor sit.'
$('#rangein').on('input', function (e) {
let len = e.target.value
$('#rangein').css('background-size', len + '% 100%')
//改变长度
pswlen = parseInt((len / 100) * 32)
$('#nowlen').html(pswlen)
})
let gui = 0//开启的规则数量
$('.changestatus').on('click', function () {
let id = $(this)[0].dataset.id
if ($(this).css('background-color') == 'rgb(109, 111, 131)') {
//打开开关
$(this).css('background-color', 'rgb(92, 104, 227)')
$(this).children().css('left', '50%')
switch (Number(id)) {
case 0:
flag0 = 1
gui+=1
break;
case 1:
flag1 = 1
gui+=1
break;
case 2:
flag2 = 1
gui+=1
break;
case 3:
flag3 = 1
gui+=1
break;
}
} else {
//关闭开关
$(this).css('background-color', 'rgb(109, 111, 131)')
$(this).children().css('left', '0%')
switch (Number(id)) {
case 0:
flag0 = 0
gui-=1
break;
case 1:
flag1 = 0
gui-=1
break;
case 2:
flag2 = 0
gui-=1
break;
case 3:
flag3 = 0
gui-=1
break;
}
}
})
$('#doit').on('click', function () {
console.log(pswlen,flag0, flag1, flag2, flag3);
if (gui == 0) {
alert('至少开启一项规则')
}
if(gui==4){
if(pswlen>3){
let num1 =parseInt(Math.random()*(pswlen-4)+1)
let num2 =parseInt(Math.random()*(pswlen-num1-2)+1)
let num3 =parseInt(Math.random()*(pswlen-num1-num2-2)+1)
let num4 =pswlen-num1-num2-num3
$('#password').html(wuxuFn(randomWord(num1,61,36)+randomWord(num2,35,10)+randomWord(num3,9,0)+randomWord(num3,79,62)))
}else{
alert('密码至少为4位')
}
}
if(gui==1){
if(pswlen>0){
if(flag0 == 1){
$('#password').html(randomWord(pswlen,61,36))
}
else if(flag1==1){
$('#password').html(randomWord(pswlen,35,10))
}
else if(flag2==1){
$('#password').html(randomWord(pswlen,9,0))
}
else if(flag3==1){
$('#password').html(randomWord(pswlen,79,62))
}
}else{
alert('长度至少1位')
}
}
if(gui==2){
if(pswlen>1){
let num1 =parseInt(Math.random()*(pswlen-1)+1)
let num2 = pswlen-num1
if(flag0 == 1&&flag1==1){
$('#password').html(wuxuFn(randomWord(num1,61,36)+randomWord(num2,35,10)))
}
else if(flag0==1&&flag2==1){
$('#password').html(wuxuFn(randomWord(num1,61,36)+randomWord(num2,9,0)))
}
else if(flag0==1&&flag3==1){
$('#password').html(wuxuFn(randomWord(num1,61,36)+randomWord(num2,79,62)))
}
else if(flag1 == 1&&flag2==1){
$('#password').html(wuxuFn(randomWord(num1,35,10)+randomWord(num2,9,0)))
}
else if(flag1 == 1&&flag3==1){
$('#password').html(wuxuFn(randomWord(num1,35,10)+randomWord(num2,9,0)))
}
else if(flag2 == 1&&flag3==1){
$('#password').html(wuxuFn(randomWord(num1,35,10)+randomWord(num2,9,0)))
}
}else{
alert('长度至少2位')
}
}
if(gui==3){
if(pswlen>2){
let num1 =parseInt(Math.random()*(pswlen-3)+1)
let num2 =parseInt(Math.random()*(pswlen-num1-1)+1)
let num3 =pswlen-num1-num2
if(flag0==1&&flag1==1&&flag2==1){
$('#password').html(wuxuFn(randomWord(num1,61,36)+randomWord(num2,35,10)+randomWord(num3,9,0)))
}
else if(flag0==1&&flag1==1&&flag3==1){
$('#password').html(wuxuFn(randomWord(num1,61,36)+randomWord(num2,35,10)+randomWord(num3,79,62)))
}
else if(flag0==1&&flag2==1&&flag3==1){
$('#password').html(wuxuFn(randomWord(num1,61,36)+randomWord(num2,9,0)+randomWord(num3,79,62)))
}
else if(flag1==1&&flag2==1&&flag3==1){
$('#password').html(wuxuFn(randomWord(num1,35,10)+randomWord(num2,9,0)+randomWord(num3,79,62)))
}
}
else{
alert('长度至少为3位')
}
}
})
/*
** randomWord 产生任意长度随机字母数字组合
** randomFlag 是否任意长度 min 任意长度最小位[固定位数] max 任意长度最大位
** yuejingge 2017/11/8
*/
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',
'-','.','~','!','@','#','$','%','^','&','*','(',')','_',':','<','>','?'];
// if(a){
for (let i = 0; i < range; i++) {
pos = parseInt(Math.random() * (a-b+1)+b);
str += arr[pos];
}
// }else{
// for (let i = 0; i < range; i++) {
// pos = parseInt(Math.random() * (arr.length - 1));
// 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
}
//js复制参考：
//https://blog.csdn.net/muzihuaner/article/details/109571237?utm_medium=distribute.pc_relevant.none-task-blog-OPENSEARCH-1.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-OPENSEARCH-1.control
//chrom复制：
$('.fz').on('click',function(){
const input = document.createElement('input');
document.body.appendChild(input);
input.setAttribute('value', laststr);
input.select();
if (document.execCommand('copy')) {
document.execCommand('copy');
alert('复制成功');
}
document.body.removeChild(input);
})
//ios复制
// const btn = document.querySelector('#btn');
// btn.addEventListener('click',() => {
// const input = document.createElement('input');
// input.setAttribute('readonly', 'readonly');
// input.setAttribute('value', 'hello world');
// document.body.appendChild(input);
// input.setSelectionRange(0, 9999);
// if (document.execCommand('copy')) {
// document.execCommand('copy');
// console.log('复制成功');
// }
// document.body.removeChild(input);
// })
</script>
</body>
</html>
方法二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>密码生成器(无排序,或)</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 800px;
background: linear-gradient(to bottom, #acb6e5, #86fde8);
}
.box {
width: 350px;
height: 550px;
background-color: rgb(8, 14, 48);
color: white;
border-radius: 10px;
/* text-align: center; */
margin: 0 auto;
margin-top: 100px;
box-shadow: 2px 2px 2px rgb(52, 52, 52);
box-sizing: border-box;
padding: 20px;
}
.box>div {
width: 100%;
height: 50px;
line-height: 50px;
border-radius: 10px;
/* padding: 10px; */
padding: 0 10px;
box-sizing: border-box;
background-color: #1C2040;
margin: 10px 0;
}
.sectionbox {
overflow: hidden;
}
.sectionbox p {
float: left;
width: 85%;
}
.changestatus {
float: right;
width: 15%;
background-color: #6D6F83;
/* background-color: #5C68E3; */
height: 25px;
border-radius: 25px;
margin-top: 12px;
position: relative;
}
.changestatus div {
height: 25px;
width: 50%;
border-radius: 50%;
background-color: white;
position: absolute;
left: 0%;
/* left: 50%; */
transition: all .2s;
}
button {
width: 100%;
height: 50px;
line-height: 50px;
border-radius: 10px;
background: linear-gradient(to left, #85c2e7, #ebbfff);
border: none;
outline: none;
color: white;
font-weight: bold;
}
.tip {
font-size: 10px;
color: rgb(189, 189, 189);
}
.tip span {
color: white;
font-size: 12px;
}
.pasbox {
overflow: hidden;
position: relative;
}
#password {
height: 30px;
line-height: 30px;
text-align: center;
margin-top: 10px;
font-size: 14px;
}
.fz {
height: 20px;
line-height: 20px;
position: absolute;
right: 10px;
bottom: 0;
}
.fz:hover {
color: white;
}
/* 更改input range样式 */
/* 使用到-webkit-appearance这个特殊属性，这是 webkit 特有的属性，代表使用系统预设的外观 */
/* 只要我们将这个属性设为none，那麽原本 range 的样式就不会呈现了 */
.rangebox input {
margin: 0 10px;
width: 80%;
height: 4px;
border-radius: 10px;
-webkit-appearance: none;
outline: none;
background: #404561;
/* 设置滑条两边不一样的颜色 */
background: -webkit-linear-gradient(#5791f5, #579ef5) no-repeat #E6E6E5;
background-size: 50% 100%;
}
/* 上面的 CSS 只是针对 range 的本体，但还有一个拉把的按钮样式还没改.
这时候我们要使用另外一个 webkit 的伪元素::-webkit-slider-thumb来修改 */
.rangebox input::-webkit-slider-thumb {
-webkit-appearance: none;
position: relative;
background-color: white;
width: 15px;
height: 15px;
border-radius: 50%;
}
</style>
</head>
<body>
<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>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
let flag0 = 0
let flag1 = 0
let flag2 = 0
let flag3 = 0
let pswlen = 16
$('#rangein').on('input', function (e) {
let len = e.target.value
$('#rangein').css('background-size', len + '% 100%')
//改变长度
pswlen = parseInt((len / 100) * 32)
$('#nowlen').html(pswlen)
})
let gui = 0//开启的规则数量
$('.changestatus').on('click', function () {
let id = $(this)[0].dataset.id
if ($(this).css('background-color') == 'rgb(109, 111, 131)') {
//打开开关
$(this).css('background-color', 'rgb(92, 104, 227)')
$(this).children().css('left', '50%')
switch (Number(id)) {
case 0:
flag0 = 1
gui+=1
break;
case 1:
flag1 = 1
gui+=1
break;
case 2:
flag2 = 1
gui+=1
break;
case 3:
flag3 = 1
gui+=1
break;
}
} else {
//关闭开关
$(this).css('background-color', 'rgb(109, 111, 131)')
$(this).children().css('left', '0%')
switch (Number(id)) {
case 0:
flag0 = 0
gui-=1
break;
case 1:
flag1 = 0
gui-=1
break;
case 2:
flag2 = 0
gui-=1
break;
case 3:
flag3 = 0
gui-=1
break;
}
}
})
$('#doit').on('click', function () {
console.log(pswlen,flag0, flag1, flag2, flag3);
if (gui == 0) {
alert('至少开启一项规则')
}
if(gui==4){
$('#password').html(randomWord(pswlen,1,1,1,1))
}
if(gui==1){
if(pswlen>0){
if(flag0 == 1){
$('#password').html(randomWord(pswlen,1,0,0,0))
}
else if(flag1==1){
$('#password').html(randomWord(pswlen,0,1,0,0))
}
else if(flag2==1){
$('#password').html(randomWord(pswlen,0,0,1,0))
}
else if(flag3==1){
$('#password').html(randomWord(pswlen,0,0,0,1))
}
}else{
alert('长度至少1位')
}
}
if(gui==2){
if(pswlen>1){
let num1 =parseInt(Math.random()*(pswlen-1)+1)
let num2 = pswlen-num1
if(flag0 == 1&&flag1==1){
$('#password').html(randomWord(pswlen,1,1,0,0))
}
else if(flag0==1&&flag2==1){
$('#password').html(randomWord(pswlen,1,0,1,0))
}
else if(flag0==1&&flag3==1){
$('#password').html(randomWord(pswlen,1,0,0,1))
}
else if(flag1 == 1&&flag2==1){
$('#password').html(randomWord(pswlen,0,1,1,0))
}
else if(flag1 == 1&&flag3==1){
$('#password').html(randomWord(pswlen,0,1,0,1))
}
else if(flag2 == 1&&flag3==1){
$('#password').html(randomWord(pswlen,0,0,1,1))
}
}else{
alert('长度至少2位')
}
}
if(gui==3){
if(pswlen>2){
let num1 =parseInt(Math.random()*(pswlen-3)+1)
let num2 =parseInt(Math.random()*(pswlen-num1-1)+1)
let num3 =pswlen-num1-num2
if(flag0==1&&flag1==1&&flag2==1){
$('#password').html(randomWord(pswlen,1,1,1,0))
}
else if(flag0==1&&flag1==1&&flag3==1){
$('#password').html(randomWord(pswlen,1,1,0,1))
}
else if(flag0==1&&flag2==1&&flag3==1){
$('#password').html(randomWord(pswlen,1,0,1,1))
}
else if(flag1==1&&flag2==1&&flag3==1){
$('#password').html(randomWord(pswlen,0,1,1,1))
}
}
else{
alert('长度至少为3位')
}
}
})
/*
** randomWord 产生任意长度随机字母数字组合
** randomFlag 是否任意长度 min 任意长度最小位[固定位数] max 任意长度最大位
** yuejingge 2017/11/8
*/
function randomWord(min,a,b,c,d) {
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',
'-','.','~','!','@','#','$','%','^','&','*','(',')','_',':','<','>','?'];
arrA = [
'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'
];
arra = [
'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'
]
arr1 = [
'0', '1', '2', '3', '4', '5', '6', '7', '8', '9'
]
arr_=[
'-','.','~','!','@','#','$','%','^','&','*','(',')','_',':','<','>','?'
]
if(a==1&&b==1&&c==1&&d==1){
for (let i = 0; i < range; i++) {
pos = parseInt(Math.random() * (arr.length));
str += arr[pos];
}
}
//gui==1
else if(a==1&&b==0&&c==0&&d==0){
str = dofn(range,arrA)
}
else if(a==0&&b==1&&c==0&&d==0){
str = dofn(range,arra)
}
else if(a==0&&b==0&&c==1&&d==0){
str = dofn(range,arr1)
}
else if(a==0&&b==0&&c==0&&d==1){
str = dofn(range,arr_)
}
//gui==2
else if(a==1&&b==1&&c==0&&d==0){
str = dofn(range,arrA,arra)
}
else if(a==1&&b==0&&c==1&&d==0){
str = dofn(range,arrA,arr1)
}
else if(a==1&&b==0&&c==0&&d==1){
str = dofn(range,arrA,arr_)
}
else if(a==0&&b==1&&c==1&&d==0){
str = dofn(range,arra,arr1)
}
else if(a==0&&b==1&&c==0&&d==1){
str = dofn(range,arra,arr_)
}
else if(a==0&&b==0&&c==1&&d==1){
str = dofn(range,arr1,arr_)
}
//gui==3
else if(a==1&&b==1&&c==1&&d==0){
str = dofn(range,arrA,arra,arr1)
}
else if(a==1&&b==1&&c==0&&d==1){
str = dofn(range,arrA,arra,arr_)
}
else if(a==1&&b==0&&c==1&&d==1){
str = dofn(range,arrA,arr1,arr_)
}
else if(a==0&&b==1&&c==1&&d==1){
str = dofn(range,arra,arr1,arr_)
}
return str;
}
function dofn(range,arrx,arry,arrz){
let str = ''
for (let i = 0; i < range; i++) {
if(arrz){
pos = parseInt(Math.random() * (arrx.concat(arry).concat(arrz).length));
let temp = arrx.concat(arry).concat(arrz).sort(function(){
return Math.random() - 0.5;
});
str += temp[pos];
}
else if(arry){
pos = parseInt(Math.random() * (arrx.concat(arry).length));
let temp = arrx.concat(arry).sort(function(){
return Math.random() - 0.5;
});
str += temp[pos];
}
else{
pos = parseInt(Math.random() * (arrx.length));
str += arrx[pos];
}
}
return str
}
</script>
</body>
</html>
389
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
