摘要：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>我的第一個(gè)事件動(dòng)畫!</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.box {
width: 500px;
height: 250px;
margin: 30px auto 0;
border: 1px solid #ccc;
}
.box p {
width: 500px;
height: 40px;
line-height: 40px;
text-align: center;
background: #f5f5f5;
color: #000;
font-size: 18px;
font-weight: bold;
}
.box form {
padding: 10px 30px;
}
.box form input {
width: 420px;
height: 40px;
margin: 10px 0;
border: none;
border: 1px solid #029cff;
padding-left: 20px;
outline: none;
}
.box form button {
margin-top: 10px;
border: 0;
width: 440px;
height: 40px;
background-color: #029cff;
color: #fff;
font-size: 18px;
}
</style>
<script>
function aa(x) {
x.style.boxShadow = '1px 1px 10px #029cff';
}
function bb(y) {
y.style.boxShadow = 'none';
}
function cc(z) {
z.style.background = 'red'
}
function dd(l) {
l.style.background = '#029cff'
}
</script>
</head>
<body>
<div>
<p>歡迎登錄</p>
<form action="">
<input type="text" name="username" placeholder="用戶名" onfocus="aa(this)" onblur="bb(this)">
<input type="password" name="paw" placeholder="密碼" onfocus="aa(this)" onblur="bb(this)">
<button onmouseover="cc(this)" onmouseout="dd(this)">登錄</button>
</form>
</div>
</body>
</html>
批改老師：天蓬老師批改時(shí)間：2019-01-28 09:10:56
老師總結(jié)：函數(shù)中的參數(shù)(this)指的是什么,你考慮過(guò)嗎? 實(shí)際上他指的是當(dāng)前代碼執(zhí)行的上下文 對(duì)象, 就是事件做用的本體