免费网站成本,站长之家html模板,wordpress怎么部署到虚拟linux服务器,seo关键词推广多少钱介绍
体验密码生成器
前往体验
什么是密码#xff1f;
密码是一种用来混淆的技术#xff0c;它希望将正常的#xff08;可识别的#xff09;信息转变为无法识别的信息。当然#xff0c;对一小部分人来说#xff0c;这种无法识别的信息是可以再加工并恢复的。密码在中…介绍
体验密码生成器
前往体验
什么是密码
密码是一种用来混淆的技术它希望将正常的可识别的信息转变为无法识别的信息。当然对一小部分人来说这种无法识别的信息是可以再加工并恢复的。密码在中文里是“口令”password的通称。登录网站、电子邮箱和银行取款时输入的“密码”其实严格来讲应该仅被称作“口令”因为它不是本来意义上的“加密代码”但是也可以称为秘密的号码。
什么是强密码
独特的 您应该为每个帐户设置单独的密码。长的 它的长度至少为 12 个字符。复杂的 它包括大写和小写字母、数字和符号。
什么是随机密码生成器
密码随机生成器是一种软件或程序可为您的各种软件和网站的帐户随机生成密码。使用此工具您不必时常手动更改密码并且可以获得由各种字母、数字和符号组成的字符串组成的强密码。
您可能想知道我可以自己创建组合随机字符的密码那为什么还要麻烦呢因为人们不擅长随机选择密码而倾向于使用常见的数字、字符和名称。无论你认为自己有多聪明计算机都很容易破解人类生成的密码。这就是为什么您应该使用我们的密码生成器。
随机密码生成器安全吗
在选择随机密码生成器时人们最关心的是安全性。不确定密码生成器的公司是否会知道您的新密码。这些公司与许多安全站点一样使用 HTTPS 通信协议但它可能不如银行系统安全。
因此在选择密码管理器或密码生成器时最好选择信誉良好且安全级别高的。
我们的密码生成器具有安全的本地加密使黑客无法访问创建的密码。我们不会在线存储您的详细信息。
为什么我的密码应该是唯一的
绝对有必要为您的每个在线帐户设置一个唯一的密码。
跨帐户重复使用密码会带来重大风险。一旦黑客窃取了您的一个帐户的密码他们就会获得对所有其他帐户的访问权限。
通过简单地向现有密码添加额外的字符、符号或数字来创建新密码并不是一个好主意。建议您使用我们的强密码生成器这将为您提供额外的保护。
为什么我的密码应该是随机的
强密码由大小写字母、数字和特殊字符组成即使是最熟练的黑客也无法破解。它也应该与您的个人信息无关。如果您在密码中使用电话号码、社会安全号码、邮政编码、身份证号码、门牌号码和生日则攻击者很容易危及您的帐户。
代码
效果图 Html结构
div classpassword w theme-bg-colordiv classcontentdiv classtool-titlesvg classicon aria-hiddentrueuse xlink:href#icon-mima1/use/svgh1密码生成器/h1/divdiv classtool-mainel-input classpassword-input sizelarge v-modelpasswordValtemplate #suffixdiv classinput-icon-boxsvgclassicon refresh-iconaria-hiddentrueclickhandleRefreshClickuse xlink:href#icon-shuaxin/use/svg/divdivclassinput-icon-box copy-icon-boxclickcopyText(passwordVal)复制/div/template/el-inputdiv classinput-icon-box m-copy-icon-box clickcopyText(passwordVal)复制/divdiv classconfig-item-boxspansvg classicon aria-hiddentrueuse xlink:href#icon-peizhi/use/svgspan配置项/span/spandivel-checkboxchangeupdatePasswordsizelargelabel数字0-9v-modelnumbers/el-checkboxchangeupdatePasswordsizelargelabel小写字母a-zv-modellowercase/el-checkboxchangeupdatePasswordsizelargelabel大写字母A-Zv-modeluppercase/el-checkboxchangeupdatePasswordsizelargelabel特殊字符!#$%^*v-modelsymbols//divdivel-checkboxchangeupdatePasswordlabel排除混淆字符1lI、0oOv-modelexclude//div/divdiv classpassword-length-boxspansvg classicon aria-hiddentrueuse xlink:href#icon-changdu/use/svgspan密码长度/span/spanel-sliderchangeupdatePasswordv-modelpassLengthshow-inputclassslider:min1:max50//divdiv classhistory-boxdiv classrecord-boxel-checkbox label记录历史密码 v-modelisHistory /span---该功能将记录您最近生成的100个密码。并且历史记录不是存储在我们云端服务器上而是存储在您的浏览器本地存储中。/span/divdiv classlook-history-boxspan clickhistoryPassword{{ isMore ? 隐藏历史记录 : 查看历史记录 }}i classbi bi-chevron-down/i/span/divdiv classremove-btn v-ifisMore clickremoveHistory清除历史记录/divdiv classhistory-content v-ifisMoredivclasshistory-pw-itemv-for(item, idx) in dataMap.passList:keyidxspan clickcopyText(item){{ item }}/span/div/div/divdiv classabout-password-boxspansvg classicon aria-hiddentrueuse xlink:href#icon-guanyu-/use/svgspan关于密码生成器/span/spanp密码是一种用来混淆的技术它希望将正常的可识别的信息转变为无法识别的信息。当然对一小部分人来说这种无法识别的信息是可以再加工并恢复的。密码在中文里是“口令”password的通称。登录网站、电子邮箱和银行取款时输入的“密码”其实严格来讲应该仅被称作“口令”因为它不是本来意义上的“加密代码”但是也可以称为秘密的号码。/p/div/div/div/divcss样式
style langscss scoped
.password .content {padding: 50px 100px;
}.tool-main {padding-top: 20px;
}.tool-title {display: flex;align-items: center;
}.tool-title h1 {font-size: 24px;
}.tool-title .icon {width: 2.2em;height: 2.2em;margin-right: 5px;
}.input-icon-box {display: flex;align-items: center;padding: 10px 5px;
}.copy-icon-box,
.m-copy-icon-box {cursor: pointer;background-color: var(--themeTextColor);margin: 5px 0;padding: 5px 25px;border-radius: 2px;color: #fff;line-height: 35px;display: flex;align-items: center;justify-content: center;text-align: center;user-select: none;:hover {opacity: 0.8;}
}.m-copy-icon-box {margin-top: 10px;display: none;
}.icon {width: 2em;height: 2em;cursor: pointer;margin-right: 10px;
}.config-item-box,
.password-length-box,
.about-password-box {margin: 20px 0;span {font-weight: 500;display: flex;align-items: center;.icon {width: 1.2em;height: 1.2em;}}
}.config-item-box {margin-top: 20px;
}.password-length-box span {margin-right: 20px;
}.password-length-box .slider {width: 400px;
}.history-box p {font-size: 14px;
}.record-box {font-size: 12px;display: flex;align-items: center;flex-wrap: wrap;span {margin-left: 20px;}
}.look-history-box {display: flex;align-items: center;span {font-size: 14px;cursor: pointer;user-select: none;display: flex;align-items: center;.bi {margin-left: 3px;}}
}.bi-chevron-down::before {transform: rotate(0deg);transition: all 0.3s;vertical-align: middle;
}.bi-chevron-down.open-more::before {transform: rotate(180deg);transition: all 0.3s;
}.remove-btn {margin-top: 10px;background-color: red;width: 90px;display: flex;align-items: center;justify-content: center;border-radius: 5px;padding: 8px 0;color: #fff;font-size: 12px;cursor: pointer;transition: all 0.2s;:hover {background-color: rgb(229, 41, 41);transition: all 0.2s;}
}.history-content {padding: 10px;display: flex;align-items: center;flex-wrap: wrap;background-color: #fff;border-radius: 5px;margin-top: 10px;.history-pw-item {padding: 8px 0;width: 50%;overflow-wrap: break-word;span {color: rgb(12, 6, 1);font-weight: 500;font-size: 14px;cursor: pointer;transition: all 0.2s;:hover {color: var(--linkTextColor);transition: all 0.2s;}}}p {font-size: 14px;}
}.about-password-box {margin-top: 30px;p {font-size: 14px;margin: 10px 0;}
}:deep(.el-input__wrapper.is-focus) {box-shadow: none;
}:deep(.el-slider__runway) {background-color: #666;
}:deep(.el-slider__bar) {background-color: var(--themeTextColor);
}:deep(.el-slider__button) {border-color: var(--themeTextColor);
}:deep(.el-checkbox__label) {color: var(--balckTextColor) !important;
}:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {background-color: var(--themeTextColor);border-color: var(--themeTextColor);
}:deep(.password-input .el-input__inner) {font-size: 20px;font-weight: 600;color: var(--balckTextColor);
}.rotate-animation {animation: rotate 0.3s linear infinite;
}keyframes rotate {from {transform: rotate(0deg);}to {transform: rotate(360deg);}
}media (max-width: 860px) {.password .content {padding: 10px;}.tool-main {padding: 0;}.password-input .icon {margin-right: 0;}.copy-icon-box {display: none;}.m-copy-icon-box {display: block;}.password-length-box .slider {width: 100%;}.look-history-box {margin-top: 10px;}.history-pw-item {width: 100% !important;}
}
/style定义变量
const dataMap reactive({passList: [],
});let passwordVal ref();
let passLength ref(12);
let numbers ref(true);
let lowercase ref(true);
let uppercase ref(true);
let symbols ref(true);
let exclude ref(true);
let isHistory ref(true);
let isMore ref(false);
let maxPw ref(100);定义刷新密码的方法
const updatePassword () {const charSets {uppercase: ABCDEFGHIJKLMNOPQRSTUVWXYZ,lowercase: abcdefghijklmnopqrstuvwxyz,numbers: 0123456789,symbols: !#$%^*()_-[]{}|;:,.?,};let allChars ;for (const [key, value] of Object.entries(charSets)) {if (key exclude exclude.value) {allChars allChars.replace(/[1lI0oO]/g, );} else if (key symbols symbols.value) {allChars value;} else if (key ! exclude key ! symbols eval(${key}.value)) {allChars value;} else {allChars allChars.replace(new RegExp([ value ], g), );}}passwordVal.value ;for (let i 0; i passLength.value; i) {const randomIndex Math.floor(Math.random() * allChars.length);passwordVal.value allChars[randomIndex];}if (isHistory.value) {dataMap.passList getStore(PASS_WORD_LIST)?.length? getStore(PASS_WORD_LIST): [];if (dataMap.passList.length maxPw.value) {dataMap.passList.push(passwordVal.value);setStore(PASS_WORD_LIST, dataMap.passList);}}
};页面加载或刷新时
在onMounted钩子中调用updatePassword函数并在setup中判断浏览器是否保存了历史密码记录
onMounted(() {updatePassword();
});if (getStore(PASS_WORD_LIST)?.length) {dataMap.passList getStore(PASS_WORD_LIST);
}点击刷新按钮时给按钮添加动画
const handleRefreshClick () {const iconBox document.querySelector(.refresh-icon);iconBox.classList.add(rotate-animation);setTimeout(() {iconBox.classList.remove(rotate-animation);}, 500);updatePassword();
};点击显示/隐藏历史记录按钮方法
const historyPassword () {isMore.value !isMore.value;const moreIcon document.querySelector(.bi-chevron-down);moreIcon.classList.toggle(open-more);
};点击清楚历史记录的方法
const removeHistory () {clearStore(PASS_WORD_LIST);dataMap.passList getStore(PASS_WORD_LIST);isMore.value false;
};点击赋值按钮的方法
const copyText (val) {navigator.clipboard.writeText(val).then(() {ElNotification({title: 成功,message: 您生成的密码已经复制成功,type: success,zIndex: 99999,});}).catch(() {ElNotification({title: 失败,message: 复制密码时出错请重试,type: warning,zIndex: 99999,});});
};原文链接
记录小工具密码生成器的开发
