題目：
有一塊空白區(qū)域, 當(dāng)鼠標(biāo)移動(dòng)到區(qū)域內(nèi),顯示"親愛的, 我愛你", 當(dāng)我鼠標(biāo)移開的時(shí)候,顯示"對(duì)不起, 開玩笑", 當(dāng)我鼠標(biāo)不停的在區(qū)域內(nèi)移動(dòng)的時(shí)候, 變換隨機(jī)顏色(隨機(jī)十六進(jìn)制的顏色：#FFFFFF)
1.<body>內(nèi)內(nèi)容
創(chuàng)建一個(gè)區(qū)域
<div id="box"></box>
2.格式設(shè)置
#box{
width: 300px;? //設(shè)置區(qū)域?qū)挾?/p>
height: 300px;? //設(shè)置區(qū)域高度
line-height: 300px;? //設(shè)置區(qū)域內(nèi)字體高度——為了讓顯示的字在區(qū)域內(nèi)居中
border: 1px solid black;? //設(shè)置邊框
font-size: 30px;?? //設(shè)置字體大小
text-align: center;? //字體居中
}
3.js設(shè)置
<script>
onload = function(){?????? //因?yàn)?lt;script>寫在<head>內(nèi)部，因此需要調(diào)用onload，表示在加載完成后調(diào)用
?????? box.onmouseover = function(){? //鼠標(biāo)移入操作函數(shù)，當(dāng)鼠標(biāo)移入后，在區(qū)域內(nèi)顯示“親愛的，我愛你”
??????????????? box.innerHTML='親愛的，我愛你'
?????? }
???? box.onmouseleave = function(){? //鼠標(biāo)移出操作，當(dāng)鼠標(biāo)離開區(qū)域，在區(qū)域內(nèi)顯示“對(duì)不起，開玩笑”
??? ? ? ?? box.innerHTML = '對(duì)不起，開玩笑'
???? }
??? box.onmousemove = function(){? //區(qū)域內(nèi)，鼠標(biāo)移動(dòng)操作，隨機(jī)改變顏色
??????? var ye=[0,,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f']???? //定義數(shù)組，保存十六進(jìn)制
????? ?? var str = '#';???? //定義字符串str，用來設(shè)置顏色，此處定義顏色開頭的‘#’
?????? ? var j = 0
???????? for(var i = 0;i<6;i++){???? // 循環(huán)6次，將字符串str補(bǔ)充完整
???????????? j = parseInt(Math.random()*16)??? // j為[0,15]之間的隨機(jī)一個(gè)整數(shù)
??????????? str += ye[j]? //根據(jù)獲取的j來往str中追加
???????? }
???????? box.style.background = str console.log(str)?? //改變區(qū)域顏色
??? }
}
</script>
4.運(yùn)行效果
a.鼠標(biāo)在區(qū)域內(nèi)
b.鼠標(biāo)移出區(qū)域
