网站登陆界面—无php版

效果图:

HTML code:

<!--
Author: yanheng 
Site :	NJFUlib
Time: 	14/10/2018
-->
<!DOCTYPE html>
<html>
<head>
	<meta charset="ust-8">
	<title>皇家林学院数据库</title>
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
	<script type="text/javascript" src="js/js.js"></script>
</head>

<body style="background-image:url(assets/timg.jpg)">
<!--
<body background = "timg.jpg">
-->	
	<div class = "div_box">
		<h1>皇家林学院数据库</h1>
		<form action="">
			<div><input type = "text" required = "required" placeholder = "用户名" name = "uid" id = "phoneNum" onblur="checkUsr()" /></div>
			<div><p class = "div_p" id = "p1"></p>
			<div><input type = "password" required = "required" placeholder = "密码" name = "pwd" id = "password" onblur="checkPwd()" /></div>
			<div class = "div_p"><p id = "p2"></p>
			<select class = "div_select" name="identity">
				<option value = "admin">管理员</option> 
				<option value = "teacher">老师</option>
				<option value = "student">学生</option>
			</select>
			<!--
			<div><input type = "select" required = "required" name = "identity" /></div>
			-->
			<div><button class = "div_but" type = "button" onclick = "myFunction()">登录</button></div>
		</form>
	</div>
	<div class = "div_footer">
	</div>
</body>

</html>

CSS code:

html{
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-style: sans-serif;
}

.div_box{
    position: absolute;
    top: 50%;
    left:50%;
    margin: -150px 0 0 -150px;
    width: 300px;
    height: 300px;
}

.div_box input{
	width: 278px;
    height: 18px;
    margin-bottom: 10px;
    outline: none;
    padding: 10px;
    font-size: 13px;
    color: #fff;
    text-shadow:1px 1px 1px;
    border-top: 1px solid #312E3D;
    border-left: 1px solid #312E3D;
    border-right: 1px solid #312E3D;
    border-bottom: 1px solid #56536A;
    border-radius: 4px;
    background-color: #2D2D3F;
}

.div_but {
    width: 300px;
    min-height: 20px;
    display: block;
    background-color: #4a77d4;
    border: 1px solid #3762bc;
    color: #fff;
    padding: 9px 14px;
    font-size: 15px;
    line-height: normal;
    border-radius: 5px;
    margin: 0;
}

.div_footer{

}

.div_header{
    position: absolute;
    top: 50%;
    left:50%;
    margin: -150px 0 0 -150px;
    width: 300px;
    height: 300px;
}

.div_box h1{
    color: #fff;
    text-shadow:0 0 10px;
    letter-spacing: 1px;
    text-align: center;
}

.div_select{
    border: none;
    outline: none;
    width: 100%;
    height: 100%;
    margin-bottom: 10px;
    color: #fff;
    text-shadow:1px 1px 1px;
    padding: 10px;
    font-size: 13px;
    border-top: 1px solid #312E3D;
    border-left: 1px solid #312E3D;
    border-right: 1px solid #312E3D;
    border-bottom: 1px solid #56536A;
    border-radius: 4px;
    
    background-color: #2D2D3F;
}

body{
    width: 100%;
    height: 100%;
    font-family: 'Open Sans',sans-serif;
    margin: 0;
    background-color: #9ed048;
}

.div_p {
    margin-bottom:-3px;
    padding-top:-3px;
    font-size: 9px;
    color:red;
}

.div_footer {

}

JS code:


function checkUsr() {
    var phone = document.getElementById('phoneNum').value;
    if(!(/^1[34578]\d{9}$/.test(phone))){ 
        document.getElementById("p1").innerHTML="手机号码有误，请重填!";
        return false;
        //alert("手机号码有误，请重填"); 
    }
    return true;
}

function checkPwd(){
    var password = document.getElementById("password"); //获取密码框值
    if(password.value.length != 6) {
        document.getElementById("p2").innerHTML="请输入六位数密码！";
        return false;
    }
    //alert("请输入六位数密码！");
    return true;
}

function myFunction() {
    if(checkUsr() && checkPwd()) {
        alert("账号：" + document.getElementById('phoneNum').value + "\n" + "密码：" + document.getElementById("password").value);
    }
}
//输入有误就报错，最后button之后就alert自己的账号和密码

如果有时间，会继续完善增加php。

网站登陆界面—无php版

猜你喜欢