【登录案例--JavaScript】
css部分：
*{margin: 0;padding: 0;
}
ul{list-style: none;
}
body{background-image: url(../img/index.jpg);background-repeat: no-repeat;background-size: cover;
}
form .bigbox{margin: 200px auto;display: flex;flex-direction: column;align-items: center;justify-content: space-around;width: 500px;height: 200px;background-color: rgb(255, 255, 255,.3);border: 2px solid black;
}
form .bigbox label>input{height:30px;width: 300px;line-height: 30px;margin: 0 auto;border-radius: 5px;
}
form .bigbox .labelmima{transform: translate(20px);
}
form .bigbox label #eyebtn{background-color: transparent;height: 30px;width: 30px;
}
form .bigbox .loginAndRegster{display: flex;justify-content: space-around;}
form .bigbox .loginAndRegster button{background-color: transparent;width: 50px;height: 30px;line-height:30px;color: black;margin:0px 30px;text-align: center;
}html部分：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<link rel="stylesheet" href="..\\css\\index.css">
<link rel="stylesheet" href="..\\font\\iconfont.css">
<body><form method="" action=""><div class="bigbox"><label>登录界面</label><label>用户名:<input id="text" type="text" value="" placeholder="请输入用户名"></label><label class="labelmima">密 码:<input id="password" type="password" value="" placeholder="请输入密码"><button id="eyebtn"><i class="iconfont icon-icon-test"></i></button></label><lable class="loginAndRegster"><button id="denglu">登录</button><button id="zhuce">注册</button></lable></div></form><script src="../javascript/index.js"></script>
</body>
</html>javascript部分：
//显示密码
var textInput=document.getElementById("text")
var passInput=document.getElementById("password")
var eyebutton=document.getElementById("eyebtn")
eyebtn.onclick=function(evt){evt.preventDefault()if(passInput.type==="password"){passInput.type="text"}else{passInput.type="password"}
}
var mydenglu=document.getElementById("denglu")
var myzhuce=document.getElementById("zhuce")
mydenglu.onclick=function(evt){//阻止默认行为evt.preventDefault()if(textInput.value=="admin"&passInput.value=="123456"){console.log('我被点击了')window.location.href="../html/main.html"}else{alert("用户名或密码错误，请重新输入！")}
}
myzhuce.onclick=function(evt){evt.preventDefault()window.location.href="../html/register.html"
}
注意：用户名:admin,密码：123456，（如需改动，在代码里改）
我这里登录之后就跳到其他页面，你可以自己写个页面