脚本宝典收集整理的这篇文章主要介绍了运用了js的登陆页面（残），脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
不要问我为什么一堆代码，因为U盘损坏导致丢了一堆各种玩意的我习惯性的会在多个地方保存文件。
HTML
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/login.css" /> <!-- <script type="text/javascript"> window.onload = function() { // 点击然后弹出弹框 // querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。 // // querySelector("button");获取文档中第一个button元素 var btn = document.querySelector("button"); btn.onclick = function() { var box = document.querySelector(".box"); box.style.display = "flex"; } // 点击叉号然后关闭弹窗 // querySelector(".close");获取文档中 class="close" 的第一个元素: var close = document.querySelector(".close");querySelector(".close"); close.onclick = function() { var box = document.querySelector(".box"); box.style.display = "none"; } } </script> --> <script type="text/javascript"> window.onload = function() { var btns = document.querySelectorAll(".box .title a"); var forms = document.querySelectorAll(".box .text form");// console.log(btns); 给元素加事件 集合不能加事件 for (var i = 0; i < btns.length; i++) { btns[i].onclick = function() { // 方法一 // for (var j = 0; j < btns.length; j++) { // if(btns[j]==this){ // btns[j].className = "active"; // }else{ // btns[j].className = ""; // } // }
// 方法二 for (var j = 0; j < btns.length; j++) { btns[j].className = ""; } this.className = "active";
// 点击时找到idx 给他俩都不显示 var idx = this.attributes["data-idx"].value; for (var j = 0; j < forms.length; j++) { forms[j].style.display = "none"; } forms[idx].style.display = "block"; } } } </script>
</head> <body> <iframe src="head.html" width="100%" height="200"></iframe> <!-- <button type="button">显示登录框</button> <div class="box"> <div class="content"> --> <!-- × 表示叉号 --> <!-- <span class="close">×</span> </div> </div> -->
<div class="content"> <div class="box"> <div class="right"> <div class="title"> <a href="#" class="active" data-idx="0">登录</a> <a href="#" data-idx="1">注册</a> </div> <div class="text"> <form action="#" method="get"> <div> <input type="text" name="name" id="name" value="" /> </div> <div> <input type="password" name="pwd" id="pwd" value="" /> </div> <div> <input type="checkbox" name="chk" id="chk" value="" /> <label for="chk">自动登录</label> </div> <div> <input type="submit" value="登录" /> </div> </form> <form action="#" method="get">
<input type="submit" value="" /> </form> </div> </div> </div> </div> <iframe src="foot.html" target="_top" width="100%" height="250px"></iframe> </body></html>
CSS
/* *{ margin: 0; padding: 0;}
body,.box{ width: 100%; height: 600px;}
body{ position: relative;}
.box{ position: absolute; top: 0; left: 0; background-color: rgba(0,0,0,0.333); display: flex; justify-content: space-around; align-items: center; display: none;}
.box .content .close{ float: right; width: 16px; display: block;}
.box .content{ width: 750px; height: 380px; background-color: #FFFFFF;} */
body { margin: 0;}
.content { background-color: rgba(0, 0, 0, 0.333); height: 600px; display: flex; justify-content: space-around; align-items: center;}
.content .box { width: 750px; height: 380px; background-image: url(../img/pop-bg.jpg); display: flex; /* flex-direction: column; */ justify-content: flex-end;}
.content .box .right { height: 260px; width: 260px; background-color: rgba(0,0,0,0); margin-right: 60px; margin-top: 40px; padding: 20px;}
.content .box .right .title { font-size: 0;
}
.content .box .right .title a { font-size: 20px; color: #333333; text-decoration: none; display: inline-block; width: 130px; text-align: center; border-bottom: 1px solid #CCCCCC; padding-bottom: 15px;}
.content .box .right .title .active { color: #27d5bf; border-bottom: 2px solid #27d5bf; padding-bottom: 14px;}
.content .box .right .text { font-size: 16px;}
.content .box .right .text div { margin: 20px 0;}
.content .box .right .text div input[type=text],.content .box .right .text div input[type=password] { width: 256px; height: 24px; border-radius: 4px; outline: 1px solid #CCCCCC; border: none;}
.content .box .right .text div input[type=text]:focus,.content .box .right .text div input[type=password]:focus { outline: 1px solid #27d5bf; border-bottom: transparent;}
.content .box .right .text div input[type=submit] { width: 260px; height: 38px; border: none; font-size: 20px; border-radius: 4px;}
.content .box .right .text form{ display: none;}
.content .box .right .text form:first-child{ display: block;}
iframe { /* overflow: hidden;干掉滚动条 */ overflow: hidden; border: none; margin: 0; padding: 0; margin-bottom: -4px;}
以上是脚本宝典为你收集整理的运用了js的登陆页面（残）全部内容，希望文章能够帮你解决运用了js的登陆页面（残）所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。