js+css实现可配置的密码生成器代码

代码语言:html

所属分类:其他

代码描述:js+css实现可配置的密码生成器代码

代码标签: js css 配置 密码 生成器 代码

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    :root{
  --primary:#7c26fc;
  --fade:#7c26fc20;
}

*{
  box-sizing:border-box;
}

html, body{
  height:100%;
  margin:0;
  font-family:Arial;
  font-size:12px;
}

body{
  display:flex;
  justify-content:center;
  align-items:center;
  background:var(--primary);
}

label{
  display:block;
}

.container{
  max-width:500px;
  width:100%;
  height:375px;
  
  background:#fff;
  border-radius:8px;
  box-shadow:0 0 5px #00000080;
  padding:0.75em;
  
  overflow:hidden;
}

.title{
  text-align:center;
}

.range{
  -webkit-appearance: none;
  width:100%;
  background:#884fe3;
  height:6px;
  border-radius:6px;
  margin:0;
}

.range::-webkit-slider-thumb{
  -webkit-appearance: none;
  cursor:pointer;
  width:16px;
  height:16px;
  background:#fff;
  box-shadow:0 0 5px #00000040;
  border:1px solid #00000040;
  border-radius:50%;
}

.box{
  background:var(--fade);
  padding:0.5em;
  border-radius:6px;
  margin:0.5em 0;
}

.toggle{
  display:flex;
  justify-content:space-between;
  align-items:ce.........完整代码请登录后点击上方下载按钮下载查看

网友评论0