摘要：<!DOCTYPE html> <html lang = "en"> <head> <meta charset = "UTF-8"> <ti
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>JavaScript事件</title>
<style>
body {
background: #333;
}
.box {
width: 100px;
margin: 200px auto 0;
text-align: center;
cursor: pointer;
}
.ball {
width: 100px;
height: 100px;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
box-shadow: 0 0 20px #111;
}
p {
margin-top: 50px;
color: rgba(255, 255, 255, 0.5);
text-shadow: 0 6px 3px #999;
}
</style>
</head>
<body>
<div class = "box">
<div class = "ball"></div>
<p>點(diǎn)擊開(kāi)燈</p>
</div>
</body>
<script src = "https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
var body = document.getElementsByTagName('body')[0];
var box = document.getElementsByClassName('box')[0];
var ball = document.getElementsByClassName('ball')[0];
var text = document.getElementsByTagName('p')[0];
box.onclick = function () {
if (body.style.backgroundColor != 'rgb(238, 238, 238)') {
body.style.backgroundColor = 'rgb(238, 238, 238)';
ball.style.boxShadow = '0 0 100px yellow';
text.innerText = '點(diǎn)擊關(guān)燈';
text.style.color = '#999';
} else {
body.style.backgroundColor = '#333';
// 請(qǐng)問(wèn)老師：下面為什么打印出來(lái)是 rgb(51, 51, 51) ，不是 #333 ？
// console.log(body.style.backgroundColor);
ball.style.boxShadow = '0 0 20px #111';
console.log(text);
text.innerText = '點(diǎn)擊開(kāi)燈';
text.style.color = 'rgba(255, 255, 255, 0.5)';
}
}
/*
常用事件
下面是一個(gè)屬性列表，這些屬性可以插入HTML標(biāo)簽來(lái)定義事件動(dòng)作
屬性 描述
onload 一張頁(yè)面或一幅圖像完成加載
onfocus 元素獲得焦點(diǎn)
onblur 元素失去焦點(diǎn)
onchange 域的內(nèi)容被改變
onsubmit 確認(rèn)按鈕被點(diǎn)擊
onclick 點(diǎn)擊時(shí)
ondblclick 雙擊時(shí)
onkeydown 某個(gè)鍵盤按鍵被按下
onkeyup 某個(gè)鍵盤按鍵被松開(kāi)
onkeypress 某個(gè)鍵盤按鍵被按下并松開(kāi)
onmousedown 鼠標(biāo)按鈕被按下
onmouseup 鼠標(biāo)按鍵被松開(kāi)
onmousemove 鼠標(biāo)被移動(dòng)
onmouseover 鼠標(biāo)移動(dòng)到某元素之上
onmouseout 鼠標(biāo)從某元素移開(kāi)
*/
</script>
</html>
批改老師：韋小寶批改時(shí)間：2019-02-11 10:27:06
老師總結(jié)：你把前面的backgroundColor也都改成不是rgb的形式你再看看！