先創(chuàng)建一個盒子。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
font-size: 20px;
font-weight: 900;
border: 1px solid black;
}
</style>
</head>
<body>
<div id='box'>
</div>
</body>
</html>
里面盒子的屬性（width： 寬度 所禀；height：高度方面；text-align：文本的樣式，可以讓文字在水平方向靠左色徘、靠右恭金、居中；line-height：行高褂策，可以設置文字在垂直方向的位置蔚叨，通過調節(jié)像素實現(xiàn)）可以在上面的css里面進行更改。
下面的是JavaScript
以下的是鼠標事件
onmouseenter/onmouseover：鼠標移入
當鼠標移入?yún)^(qū)域時辙培，網(wǎng)頁會進行一些自動操作蔑水，下面的代碼是當鼠標移入盒子時，盒子中會顯示：親愛的扬蕊，我愛你搀别。
box.onmouseenter = function(){
box.innerHTML='親愛的，我愛你'
}
onmouseleave/onmouseout：鼠標移出
和鼠標移入意思剛好相反尾抑，這個事件是在鼠標移出區(qū)域時歇父，網(wǎng)頁才會做出反應。下面的是我的一個示例：
box.onmouseleave = function(){
box.innerHTML = '對不起再愈，開玩笑'
}
onmousemove：鼠標移動
這個是在給定區(qū)域內鼠標移動時榜苫，網(wǎng)頁會做出反應，
下面是我的一個示例：
box.onmousemove = function(){
var a = [0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f']
var color = '#'
for(var i=0;i<6;i++){
var j= parseInt(Math.random()*16)
color += a[j]
}
box.style.background = color
}
請妥善使用翎冲！
好了以上的就是我今天想要分享的垂睬！
最后我給出一個完整的代碼，可以實現(xiàn)以上的功能抗悍。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
font-size: 20px;
font-weight: 900;
border: 1px solid black;
}
</style>
<script>
onload = function(){
box.onmouseenter = function(){
box.innerHTML='親愛的驹饺，我愛你'
}
box.onmouseleave = function(){
box.innerHTML = '對不起，開玩笑'
}
box.onmousemove = function(){
var a = [0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f']
var color = '#'
for(var i=0;i<6;i++){
var j= parseInt(Math.random()*16)
color += a[j]
}
box.style.background = color
}
}
</script>
</head>
<body>
<div id='box'>
</div>
</body>
</html>
