前端登录页面开发(附加js验证)

web前端开发用户登录代码|前端登录页面开发|网站前端开发

html 代码

<!DOCTYPE html>
<head>
<metacharset=”UTF-8″>
<title>前端开发标记语言</title>
<linkhref=’http://fonts.googleapis.com/css?family=Open+Sans:400,700′ rel=’stylesheet’ type=’text/css’>
<linkrel=”stylesheet” href=”//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css”>
<style>
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
font-family:sans-serif;
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
}
body{
margin:0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary{
display:block;
}
audio,
canvas,
progress,
video{
display:inline-block;
vertical-align:baseline;
}
audio:not([controls]){
display:none;
height:0;
}
[hidden],
template{
display:none;
}
a{
background-color:transparent;
}
a:active,
a:hover{
outline:0;
}
abbr[title]{
border-bottom:1pxdotted;
}
b,
strong{
font-weight:bold;
}
dfn{
font-style:italic;
}
h1{
font-size:2em;
margin:0.67em0;
}
mark{
background:#ff0;
color:#000;
}
small{
font-size:80%;
}
sub,
sup{
font-size:75%;
line-height:0;
position:relative;
vertical-align:baseline;
}
sup{
top:-0.5em;
}
sub{
bottom:-0.25em;
}
img{
border:0;
}
svg:not(:root){
overflow:hidden;
}
figure{
margin:1em40px;
}
hr{
-moz-box-sizing:content-box;
-webkit-box-sizing:content-box;
box-sizing:content-box;
height:0;
}
pre{
overflow:auto;
}
code,
kbd,
pre,
samp{
font-family:monospace,monospace;
font-size:1em;
}
button,
input,
optgroup,
select,
textarea{
color:inherit;
font:inherit;
margin:0;
}
button{
overflow:visible;
}
button,
select{
text-transform:none;
}
button,
htmlinput[type=”button”],
input[type=”reset”],
input[type=”submit”]{
-webkit-appearance: button;
cursor:pointer;
}
button[disabled],
htmlinput[disabled]{
cursor:default;
}
button::-moz-focus-inner,
input::-moz-focus-inner{
border:0;
padding:0;
}
input{
line-height:normal;
}
input[type=”checkbox”],
input[type=”radio”]{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
padding:0;
}
input[type=”number”]::-webkit-inner-spin-button,
input[type=”number”]::-webkit-outer-spin-button{
height:auto;
}
input[type=”search”]{
-webkit-appearance: textfield;
-moz-box-sizing:content-box;
-webkit-box-sizing:content-box;
box-sizing:content-box;
}
input[type=”search”]::-webkit-search-cancel-button,
input[type=”search”]::-webkit-search-decoration{
-webkit-appearance:none;
}
fieldset{
border:1pxsolid#c0c0c0;
margin:02px;
padding:0.35em0.625em0.75em;
}
legend{
border:0;
padding:0;
}
textarea{
overflow:auto;
}
optgroup{
font-weight:bold;
}
table{
border-collapse:collapse;
border-spacing:0;
}
td,
th{
padding:0;
}
</style>
<style>
/* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
body{
font-family:”Open Sans”,sans-serif;
height:100vh;
background:url(“http://i.imgur.com/HgflTDf.jpg”)50%fixed;
background-size:cover;
}
@keyframesspinner{
0% {
transform:rotateZ(0deg);
}
100% {
transform:rotateZ(359deg);
}
}
*{
box-sizing:border-box;
}
.wrapper{
display:flex;
align-items:center;
flex-direction:column;
justify-content:center;
width:100%;
min-height:100%;
padding:20px;
background:rgba(4,40,68,0.85);
}
.login{
border-radius:2px2px5px5px;
padding:10px20px20px20px;
width:90%;
max-width:320px;
background:#ffffff;
position:relative;
padding-bottom:80px;
box-shadow:0px1px5pxrgba(0,0,0,0.3);
}
.login.loadingbutton{
max-height:100%;
padding-top:50px;
}
.login.loadingbutton.spinner{
opacity:1;
top:40%;
}
.login.okbutton{
background-color:#8bc34a;
}
.login.okbutton.spinner{
border-radius:0;
border-top-color:transparent;
border-right-color:transparent;
height:20px;
animation:none;
transform:rotateZ(-45deg);
}
.logininput{
display:block;
padding:15px10px;
margin-bottom:10px;
width:100%;
border:1pxsolid#ddd;
transition: border-width 0.2sease;
border-radius:2px;
color:#ccc;
}
.logininput+i.fa{
color:#fff;
font-size:1em;
position:absolute;
margin-top:-47px;
opacity:0;
left:0;
transition:all0.1sease-in;
}
.logininput:focus{
outline:none;
color:#444;
border-color:#2196F3;
border-left-width:35px;
}
.logininput:focus+i.fa{
opacity:1;
left:30px;
transition:all0.25sease-out;
}
.logina{
font-size:0.8em;
color:#2196F3;
text-decoration:none;
}
.login.title{
color:#444;
font-size:1.2em;
font-weight:bold;
margin:10px030px0;
border-bottom:1pxsolid#eee;
padding-bottom:20px;
}
.loginbutton{
width:100%;
height:100%;
padding:10px10px;
background:#2196F3;
color:#fff;
display:block;
border:none;
margin-top:20px;
position:absolute;
left:0;
bottom:0;
max-height:60px;
border:0pxsolidrgba(0,0,0,0.1);
border-radius:002px2px;
transform:rotateZ(0deg);
transition:all0.1sease-out;
border-bottom-width:7px;
}
.loginbutton.spinner{
display:block;
width:40px;
height:40px;
position:absolute;
border:4pxsolid#ffffff;
border-top-color:rgba(255,255,255,0.3);
border-radius:100%;
left:50%;
top:0;
opacity:0;
margin-left:-20px;
margin-top:-20px;
animation: spinner 0.6sinfinitelinear;
transition:top0.3s0.3sease, opacity 0.3s0.3sease, border-radius 0.3sease;
box-shadow:0px1px0pxrgba(0,0,0,0.2);
}
.login:not(.loading)button:hover{
box-shadow:0px1px3px#2196F3;
}
.login:not(.loading)button:focus{
border-bottom-width:4px;
}
footer{
display:block;
padding-top:50px;
text-align:center;
color:#ddd;
font-weight:normal;
text-shadow:0px-1px0pxrgba(0,0,0,0.2);
font-size:0.8em;
}
footera,
footera:link{
color:#fff;
text-decoration:none;
}
</style>
</head>
<body>
<divclass=”wrapper”>
<formclass=”login”>
<pclass=”title” style=”text-align:center;”>登录</p>
<inputtype=”text” id=”userName” name=”userName” placeholder=”姓名” autofocus/>
<iclass=”fa fa-user”></i>
<inputtype=”password” id=”pwd” name=”pwd” placeholder=”密码” />
<iclass=”fa fa-key”></i>
<ahref=”#”>忘记密码?</a>
<buttontype=”submit” id=”login-button”>
<!–<i class=”spinner”></i>–>
<!–<span class=”state” >–>登录
<!–</span>–>
</button>
</form>
<footer>
<atarget=”blank” href=”https://www.rokub.com”>前端开发者</a>
</footer>
</div>
<script src=’http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js’></script>
<script>
$(‘#login-button’).click(function(event){
varuserName=document.getElementById(“userName”).value;
varpwd=document.getElementById(“pwd”).value;
if (userName==”admin”&&pwd==”123456″) {
event.preventDefault();
$(‘form’).fadeOut(500);
$(‘.wrapper’).addClass(‘form-success’);
setTimeout(function(){
location.href =”https://www.rokub.com”;
},2000);
}else{
alert(“Wrong Password”);
}
});
</script>
</body>
</html>

用户名admin ,密码123456 ,通过验证后进入前端开发者网址;

前端开发要学多久?|网页制作和前端开发|前端开发者

» 本文来自:前端开发者 » 《前端登录页面开发(附加js验证)》
» 本文链接地址:https://www.rokub.com/3553.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!