サマリー：<!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)擊開燈</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';
// 請問老師：下面為什么打印出來是 rgb(51, 51, 51) ，不是 #333 ？
// console.log(body.style.backgroundColor);
ball.style.boxShadow = '0 0 20px #111';
console.log(text);
text.innerText = '點(diǎn)擊開燈';
text.style.color = 'rgba(255, 255, 255, 0.5)';
}
}
/*
常用事件
下面是一個(gè)屬性列表，這些屬性可以插入HTML標(biāo)簽來定義事件動作
屬性 描述
onload 一張頁面或一幅圖像完成加載
onfocus 元素獲得焦點(diǎn)
onblur 元素失去焦點(diǎn)
onchange 域的內(nèi)容被改變
onsubmit 確認(rèn)按鈕被點(diǎn)擊
onclick 點(diǎn)擊時(shí)
ondblclick 雙擊時(shí)
onkeydown 某個(gè)鍵盤按鍵被按下
onkeyup 某個(gè)鍵盤按鍵被松開
onkeypress 某個(gè)鍵盤按鍵被按下并松開
onmousedown 鼠標(biāo)按鈕被按下
onmouseup 鼠標(biāo)按鍵被松開
onmousemove 鼠標(biāo)被移動
onmouseover 鼠標(biāo)移動到某元素之上
onmouseout 鼠標(biāo)從某元素移開
*/
</script>
</html>
添削の先生：韋小寶添削時(shí)間：2019-02-11 10:27:06
先生のまとめ：你把前面的backgroundColor也都改成不是rgb的形式你再看看！