abstract：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{width: 500px;height: 500px;border: 1px solid pink;margin: 0px auto;}
</style>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var c=5;
$("#input2").click(function(){
var a =$("#input1").val();
var b =$("#input3").val();
if(c<0)
{return;}
document.write(a+b);
if(a=="灭绝" || b=="123"){
alert("密码正确");
}else{
c--;
alert("密码错误，你还有"+c+"次机会重新输入");
}
})
$(".input").blur(function(){
$('#input1').css('background','pink');
})
$(".input").focus(function(){
$(".input").css('background','blue'); })
$("#input2").mouseover(function(){
$("#input2").css('background','pink');
})
$("#input2").mouseleave(function(){
$("#input2").css('background','blue');
})
$(".input").change(function(){
$(".input").css('width','100px');
})
})
</script>
</head>
<body>
<div>
账号：
<input type="text" id="input1" placeholder="请输入账号" ><br>
密码：
<input type="text" id="input3" placeholder="请输入密码">
<br>
<input type="button" id="input2" value="登陆">
</div>
</body>
</html>