<meta charset="utf-8">
<?php
// print_r($_POST);
$loginmsg = '去登陆...';
// 账户验证
if ($_POST['userName']) {
$host = "127.0.0.1";//mysql主机地址
$user = "root"; //mysql 登录账户
$pwd = "949969709"; //mysql登录密码
//连接数据库
$conn = mysqli_connect($host, $user, $pwd);
//判断
if (!$conn) {
die('连接数据库失败: ' . mysqli_connect_error());
} else {
// echo "mysql 连接成功！<br>";
mysqli_select_db($conn, "userMsg"); // 连接具体的库
mysqli_query($conn, "SET NAMES UTF8"); // 设置编码格式
$query = "SELECT * FROM msg"; // 查询库里面的具体的某个文件 比如：一个表名
$result = mysqli_query($conn, $query); // 返回查询结果集
while (!!$row = mysqli_fetch_array($result)) { // 以数组方式遍历
if ($row['username'] == $_POST['userName']) {
if ($row['userpassword'] === $_POST['userPassword']) {
$loginmsg = '去登陆...';
header("location:./www/");
$ip = getenv("REMOTE_ADDR");
file_put_contents('./ip.txt', $ip . ';', FILE_APPEND);
} else {
// echo "<script>alert('密码错误,请重新输入')</script>";
$loginmsg = '密码错误，请重新输入';
mysqli_close($conn); // 断开数据库连接
// echo '密码错误,请重新输入<br/>3秒后跳转';
// header("refresh:3 ; url=./index.php");
break;
}
}
if ($row['username']!=$_POST['userName']) {
// echo "<script>alert('账户名错误,请重新输入')</script>";
$loginmsg = '账户名错误，请重新输入';
mysqli_close($conn); // 断开数据库连接
// echo '账户名错误或不存在,请重新输入或者注册<br/>3秒后跳转';
// header("refresh:3 ; url=./index.php");
break;
}
}
}
}
// 注册 部分
if ($_POST['username']) {
$host = "127.0.0.1";//mysql主机地址
$user = "root"; //mysql 登录账户
$pwd = "949969709"; //mysql登录密码
$username = $_POST['username'];
$userpassword = $_POST['userpassword'];
$name = $_POST['name'];
$class = $_POST['class'];
$ip = getenv("REMOTE_ADDR");
if ($class == 1) {
$class = '前端';
} else if ($class == 2) {
$class = 'Python';
} else if ($class == 3) {
$class = 'Java';
}
//连接数据库
$conn = mysqli_connect($host, $user, $pwd);
//判断
if (!$conn) {
die('连接数据库失败: ' . mysqli_connect_error());
} else {
echo "mysql 连接成功！<br>";
mysqli_select_db($conn, "userMsg"); // 连接具体的库
mysqli_query($conn, "SET NAMES UTF8"); // 设置编码格式
};
//插入数据 到数据库的表中
// 格式: $insertdata = "insert into 表名(id,name,password) values('9','pick','8888')";
$insertdata = "insert into msg(username,userpassword,name,class,ip) values('$username','$userpassword','$name','$class','$ip')"; // 插入
if ($conn->query($insertdata) == true) { // 判断表中是否有了这个数据
echo "注册成功"; // 存在了 返回插入成功
} else {
echo "Error insert data: " . $conn->error; // 不存在 返回插入失败
};
mysqli_close($conn);
}
?>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
text-decoration: none;
}
body {
background-color: rgba(29, 78, 128, .8);
}
form {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-image: linear-gradient(
45deg,
blue,
skyblue,
green
);
padding: 10px 30px;
border-radius: 12px;
width: 400px;
text-align: center;
box-shadow: 0 10px 35px #000;
z-index: 1;
}
h2 {
color: white;
}
.inputBox {
overflow: auto;
position: relative;
}
input {
width: 280px;
padding: 10px 10px;
border: 1px solid #fff;
margin: 20px;
outline: none;
font-size: 16px;
border-radius: 6px;
}
label {
position: absolute;
top: 28px;
left: 66px;
transition: .5s;
color: #FF6666;
pointer-events: none;
}
input:focus ~ label,
input:valid ~ label {
top: -6px;
font-size: 14px;
color: #67ff4a;
}
.button {
display: block;
width: 80px;
height: 36px;
padding: 0;
line-height: 36px;
float: left;
border-radius: 8px;
margin: 5px 60px;
text-align: center;
border: 0;
color: orange;
font-size: 16px;
cursor: pointer;
background-color: rgba(0, 0, 0, .5);
opacity: .8;
}
.login-box {
position: absolute;
top: 0;
left: -100%;
/*left: 0;*/
width: 100%;
height: 100vh;
transition: .5s;
background-image: linear-gradient(
45deg, darkslategray, skyblue, salmon
);
}
.close-login-btn {
position: absolute;
top: 40px;
right: 40px;
color: white;
font-size: 30px;
transform: rotate(45deg);
cursor: pointer;
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
}
.show-login-btn {
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid #fff;
padding: 10px;
cursor: pointer;
border-radius: 4px;
}
.show-login-btn:hover {
background-color: rgba(0, 0, 0, .5);
color: #e33333;
z-index: 1;
}
.to-show {
left: 0;
}
.mask {
position: absolute;
top: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: rgba(0, 0, 0, .6);
display: none;
transition: .8s;
}
.form {
width: 460px;
height: 459px;
}
select {
width: 280px;
height: 30px;
border: 1px solid #fff;
margin: 20px;
outline: none;
font-size: 16px;
border-radius: 6px;
}
option {
text-align: center;
}
input[type=submit] {
cursor: pointer;
}
.massage {
position: absolute;
left: 50%;
/*top: 160px;*/
top: 0;
transform: translateX(-50%);
width: 460px;
height: 50px;
color: white;
line-height: 50px;
background-color: darkgreen;
border-radius: 12px;
z-index: 0;
padding-left: 10px;
box-sizing: border-box;
display: block;
}
.massage span {
display: inline-block;
width: 200px;
color: white;
height: 50px;
line-height: 50px;
margin-left: 40px;
text-align: center;
}
</style>
<script src="animate.js"></script>
</head>
<body>
<div class="show-login-btn">
-> Show Login Form
</div>
<div class="login-box">
<div class="close-login-btn">
+
</div>
<form action="" name="userMsg" method="post">
<h2>Login</h2>
<div class="inputBox">
<input type="text" required="required" name="userName"><label>Username</label>
</div>
<div class="inputBox">
<input type="password" required="required" name="userPassword"><label>password</label>
</div>
<!-- <button>submit</button>-->
<a href="javascript:" class="button">sign in</a>
<!-- <input type="submit" class="button" value="sign in">-->
<input type="submit" class="button" value="submit">
</form>
</div>
<div class="mask">
<div class="sign-in">
<form action="" method="post" class="form">
<h1>Login In</h1>
用户名：<input type="text" name="username" required placeholder="6~16个字符" class="yz"><br>
密 码：<input type="password" name="userpassword" required placeholder="6~16个字符" class="yz"><br>
姓 名：<input type="text" name="name"><br>
类 别：<select name="class" id=""><br>
<option value="1">前端</option>
<option value="2">Python</option>
<option value="3">Java</option>
</select>
<input type="submit" value="提 交" disabled="disabled" class="tj">
</form>
</div>
</div>
<div class="massage">Massage: <span><?php echo $loginmsg;?></span></div>
<script type="text/javascript">
// 这里是引入的jquery 部分文件 为实现后面的功能
// 相当于引入了jquery 文件
function hasClass(element, clssname) {
return element.className.match(new RegExp('(\\s|^)' + clssname + '(\\s|$)'))
}
function addClass(element, clssname) {
if (!this.hasClass(element, clssname)) element.className += ' ' + clssname
}
function removeClass(element, clssname) {
if (hasClass(element, clssname)) {
var reg = new RegExp('(\\s|^)' + clssname + '(\\s|$)')
element.className = element.className.replace(reg, ' ')
}
}
function toggleClass(element, clssname) {
if (hasClass(element, clssname)) {
removeClass(element, clssname)
} else {
addClass(element, clssname)
}
}
// 功能区
var loginBox = document.getElementsByClassName('login-box')
var showBtn = document.getElementsByClassName('show-login-btn')
var hideBtn = document.getElementsByClassName('close-login-btn')
var loginIn = document.querySelector('form a')
var mask = document.querySelector('.mask')
var login = document.querySelectorAll('.button')[1]
var msg = document.querySelector('.massage')
showBtn[0].addEventListener('click', function () {
toggleClass(loginBox[0], 'to-show')
msg.style.display = 'none'
})
hideBtn[0].addEventListener('click', function () {
toggleClass(loginBox[0], 'to-show')
msg.style.display = 'block'
f()
})
loginIn.addEventListener('click', function () {
mask.style.display = 'block'
})
var span = msg.querySelector('span')
window.addEventListener('load', function () {
// msg.style.display = 'block'
// msg.style.top = '160px'
f()
})
function f() {
if (span.innerHTML !='去登陆...') {
msg.style.background = 'orangered'
msg.style.color = '#000'
span.style.color = '#000'
}
animate(msg,188)
setTimeout(function () {
animate(msg,488,function () {
msg.style.display = 'none'
})
},2000)
}
// 注册验证
var yz = document.querySelectorAll('.yz')
var reg = new RegExp(/^[0-9a-zA-Z-\W]{6,16}$/)
var tj = document.querySelector('.tj');
yz[0].addEventListener('change',function () {
if (reg.test(this.value)&®.test(yz[1].value)) {
tj.disabled = false
tj.style.color = 'green'
}
})
yz[1].addEventListener('change',function () {
if (reg.test(this.value)&®.test(yz[1].value)) {
tj.disabled = false;
tj.style.color = 'green'
}
})
</script>
</body>
</html>
