您好，如果用户名/密码输入错误，我想让我的 div 摇动。我尝试过的方法显然行不通...我认为这可能与我使用 javascript 的方式有关。 提前致谢。
HTML/PHP/JavaScript:
<?php
if(isset($_POST["submit"])) {
$link = mysqli_connect("localhost","root","");
mysqli_select_db($link,"users");
$count = 0;
$res=mysqli_query($link,"SELECT * FROM users WHERE username='$_POST[Username]' && password='$_POST[Password]'");
$count=mysqli_num_rows($res);
if ($count > 0){
header("location: /test.php");
}
else {
?>
<script type="text/javascript">
document.getElementById("box").addClass("invalid");
</script>
<?php
}
}
?>
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="home.css">
</head>
<body>
<div id ="box">
<img src="user.png">
<form autocomplete="off" method="post" action="index.php">
<input class="inputbox" type="text" name= "Username" pattern=".{2,15}" required title="2 to 15 characters" placeholder="Username "/>
<input class="inputbox" type="password" name ="Password" pattern=".{2,15}" required title="2 to 15 characters" placeholder="Password"/>
<input id = "submitbutton" type="submit" name="submit" value="Login" />
</form>
</div>
</body>
CSS:
body {
background-color:#42cbf4;
}
#box {
position:absolute;
top:45%;
left:50%;
width:300px;
height:375px;
transform:translate(-50%, -50%);
box-shadow:0px 0px 15px rgba(51, 96, 175,0.5);
border-radius:8px;
}
#box img {
position:absolute;
width:150px;
height:150px;
left:50%;
top:7%;
transform:translate(-50%, 0);
}
.inputbox {
margin-bottom:10px;
border:solid #333caf 1px;
border-radius:5px;
background-color:rgba(51, 60, 175, .05);
font-size:20px;
}
::-moz-placeholder {
opacity:0.5;
color: #333caf;
}
:-moz-placeholder {
color: #333caf;
opacity:0.5;
}
::-webkit-input-placeholder {
color: #333caf;
opacity:0.5;
}
#box form {
position:absolute;
left:50%;
transform:translate(-50%, 0);
bottom:5%;
text-align:center;
}
.inputbox:focus {
outline:none;
}
#box form {
z-index:5;
}
#box #submitbutton {
background-color:#333caf;
border:0;
margin-top:5px;
font-family:arial;
font-size:18px;
padding:7px 17px;
border-radius:5px;
color:rgb(202,202,202);
transition:color 0.2s ease-in-out, box-shadow 0.25s ease-out, background-color 0.2s ease-in-out ;
}
#box #submitbutton:hover {
background-color:rgba(51, 60, 175, .5);
color:white;
box-shadow:3px 3px 5px rgba(15,15,15,0.7);
}
#box #submitbutton:focus {
outline:none;
}
#box.invalid {
outline-color: red;
-webkit-animation: shake .5s linear;
}
@-webkit-keyframes shake {
8%, 41% {
-webkit-transform: translateX(-10px);
}
25%, 58% {
-webkit-transform: translateX(10px);
}
75% {
-webkit-transform: translateX(-5px);
}
92% {
-webkit-transform: translateX(5px);
}
0%, 100% {
-webkit-transform: translateX(0);
}
}
最佳答案
PHP代码:
<?php
$invalid = false;
if(isset($_POST["submit"])) {
$link = mysqli_connect("localhost","root","");
mysqli_select_db($link,"users");
$count = 0;
$res=mysqli_query($link,"SELECT * FROM users WHERE username='$_POST[Username]' && password='$_POST[Password]'");
$count=mysqli_num_rows($res);
if ($count > 0){
header("location: /test.php");
}
else {
$invalid=true;
}
}
?>
在您的 </body> 之前添加以下 javascript 代码标签:
检查是否设置了 $invalid，如果设置了则添加 invalid类到框
<script>
$(document).ready(function() {
var is_invalid = "<?php echo $invalid;?>";
if(is_invalid)
$('#box').addClass('invalid');
});
</script>
关于javascript - 如果输入不正确，则尝试使 div 摇动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42546456/