标签：box select size event 基于 close auto smo ali
HTML代码：
1 <div class="box"> 2 <label> 3 <img src="./logo.png" alt=""> 4 </label> 5 <div class="inp1"> 6 <input type="text" name="" id="user" placeholder="用户名"> 7 <!-- 也可以placeholder="用户名" --> 8 <p class="logU"></p> 9 </div> 10 <div class="inp2"> 11 <input type="password" name="" id="password" placeholder="账号密码"> 12 <!-- 也可以placeholder="账号密码" --> 13 <p class="logP"></p> 14 </div> 15 <div class="rem"> 16 <div class="checkBox"></div> 17 <span>记住账号和密码</span> 18 </div> 19 <button>立即登录<span>></span></button> 20 </div>
css代码
1 <style> 2 * { 3 margin: 0; 4 padding: 0; 5 border: none; 6 color: #fff; 7 outline: none; 8 /* 去除input高亮边框 */ 9 } 10 11 body { 12 background: url("./bg.png") no-repeat center; 13 background-attachment: fixed; 14 /* 当内容高度大于图片高度时背景图像的位置相对viewport固定 */ 15 background-size: cover; 16 /* 让背景图基于容器大小伸缩 */ 17 /* 18 或者 直接 height: 100vh; 19 background: url("./bg.png") no-repeat center; 20 vh直接把整个窗口平分为100vh份,每份1vh 21 */ 22 text-align: center; 23 } 24 25 .box { 26 width: 400px; 27 margin: 100px auto 0; 28 text-align: center; 29 background: transparent; 30 } 31 32 .box>label>img { 33 display: block; 34 margin: 0 auto 120px; 35 } 36 .inp1, 37 .inp2 { 38 position: relative; 39 width: 100%; 40 margin-top: 40px; 41 display: block; 42 } 43 .box>.inp1>input, 44 .box>.inp2>input{ 45 width: 390px; 46 height: 30px; 47 text-indent: 44%; 48 border-bottom: 1px solid #ffffff; 49 color: #eee; 50 background-color: transparent; 51 cursor: auto; 52 53 } 54 .box>.inp1>#user::-webkit-input-placeholder, 55 .box>.inp2>#password::-webkit-input-placeholder{ 56 color: #ffffff; 57 opacity: .5; 58 } 59 .box>.inp1>#user::-ms-input-placeholder, 60 .box>.inp2>#password::-ms-input-placeholder { 61 color: #ffffff; 62 opacity: .5; 63 } 64 .logU, 65 .logP { 66 font-size: 12px; 67 color: #f00; 68 position: absolute; 69 left: 0; 70 } 71 .rem { 72 text-align: left; 73 margin: 15px auto 80px; 74 display: flex; 75 justify-content: left; 76 align-items: center; 77 } 78 .rem>.checkBox { 79 position: relative; 80 width: 14px; 81 height: 14px; 82 border: 1px solid #ccc; 83 border-radius: 5px; 84 background: transparent; 85 margin-right: 10px; 86 cursor: pointer; 87 } 88 /* 谁需要加给谁 */ 89 .rem>.checked::before { 90 display: block; 91 position: absolute; 92 top: -5px; 93 width: 100%; 94 color:tan; 95 content: ‘?‘; 96 97 } 98 .rem>span { 99 font-size: 14px; 100 color: whitesmoke; 101 } 102 .box>button { 103 font-size: 20px; 104 background: transparent; 105 } 106 .box>button>span { 107 display: inline-block; 108 width: 25px; 109 height: 25px; 110 border-radius: 15px; 111 background-color: skyblue; 112 margin-left: 8px; 113 } 114 </style>
JavaScript
1 <script> 2 window.onload = function () { 3 // 获取元素 4 var user = document.querySelector(‘#user‘); 5 var password = document.querySelector(‘#password‘); 6 var button = document.querySelector(‘button‘); 7 var inp1 = document.querySelector(‘.inp1‘); 8 var inp2 = document.querySelector(‘.inp2‘); 9 var checkbox = document.querySelector(‘.checkBox‘); 10 // 登陆成功成功时,记录用户名和账号密码 并且记住登录状态,每次网页加载时做判断 11 // 假设用户名和密码都不正确 12 var userCheck = false; 13 var passwordCheck = false; 14 // 注册事件 15 //当鼠标输入 16 user.oninput = function () { 17 checkFun(this, ‘用户名‘, 6, 16); 18 } 19 password.oninput = function () { 20 checkFun(this, ‘密码‘, 6, 20); 21 } 22 checkbox.onclick = function () { 23 this.className = this.className == ‘checkBox checked‘ ? ‘checkBox‘ : ‘checkBox checked‘; 24 } 25 button.onclick = function () { 26 // 点击登录按钮,判断用户名和密码是否同时正确 正确就跳转到跳转页面 27 // 这里要用 假设思想 假设用户名和密码都正确 28 if (userCheck && passwordCheck) { 29 // 保存用户名和密码,刷新网页还显示 30 localStorage.user = user.value; 31 localStorage.password = password.value; 32 //判断是否勾选记住密码了 33 if (checkbox.className == ‘checkBox checked‘) { 34 localStorage.rem = true; 35 } else { 36 localStorage.rem = false; 37 } 38 window.location.href = ‘跳转页面.html‘; 39 } 40 } 41 // 每次网页加载时做判断 假设勾选记住密码框 就把存储的对应的值给分别user和password 勾选框类名变为checked 42 if (localStorage.rem == ‘true‘) { 43 user.value = localStorage.user; 44 password.value = localStorage.password; 45 userCheck = true; 46 passwordCheck = true; 47 checkbox.className = ‘checkBox checked‘; 48 } else { 49 user.value = ‘‘; 50 password.value = ‘‘; 51 checkbox.className = ‘checkBox‘; 52 } 53 54 /* 55 将用户名和密码的校验封装成一个函数 56 声明一个函数，用于校验用户名和密码 57 第一个参数：校验的对象 58 第二个参数：提示文字 59 第三个参数：最小值 60 第四个参数：最大值 61 */ 62 function checkFun(obj, str, min, max) { 63 if (obj.value == ‘‘) { 64 change(obj, ‘red‘, str + ‘不能为空‘, ‘‘); 65 return false; 66 67 } else if (obj.value.length <= min || obj.value.length >= max) { 68 change(obj, ‘red‘, ‘输入的字符长度要在‘ + min + ‘~‘ + max + ‘个字符之间‘, ‘‘); 69 return false; 70 } else {//恢复原状 71 change(obj, ‘greenyellow‘, str + ‘输入正确‘, ‘greenyellow‘); 72 return true; 73 } 74 } 75 /* 76 将提示文字放到 p 标签中，并且让 input 的下边框变成红色 77 声明一个函数，用于显示校验的提示 78 第一个参数：校验的对象 79 第二个参数：是否显示 80 第三个参数：提示文字 81 第四个参数：颜色 82 */ 83 function change(obj, colorL, text, color) { 84 obj.style.borderColor = colorL; 85 obj.nextElementSibling.textContent = text; 86 obj.nextElementSibling.style.color = color; 87 } 88 } 89 </script>
标签：box select size event 基于 close auto smo ali
原文地址：https://www.cnblogs.com/leoragelovexer/p/11749344.html
