题目：
有一块空白区域, 当鼠标移动到区域内,显示"亲爱的, 我爱你", 当我鼠标移开的时候,显示"对不起, 开玩笑", 当我鼠标不停的在区域内移动的时候, 变换随机颜色(随机十六进制的颜色：#FFFFFF)
1.<body>内内容
创建一个区域
<div id="box"></box>
2.格式设置
#box{
width: 300px; //设置区域宽度
height: 300px; //设置区域高度
line-height: 300px; //设置区域内字体高度——为了让显示的字在区域内居中
border: 1px solid black; //设置边框
font-size: 30px; //设置字体大小
text-align: center; //字体居中
}
3.js设置
<script>
onload = function(){ //因为<script>写在<head>内部，因此需要调用onload，表示在加载完成后调用
box.onmouseover = function(){ //鼠标移入操作函数，当鼠标移入后，在区域内显示“亲爱的，我爱你”
box.innerHTML='亲爱的，我爱你'
}
box.onmouseleave = function(){ //鼠标移出操作，当鼠标离开区域，在区域内显示“对不起，开玩笑”
box.innerHTML = '对不起，开玩笑'
}
box.onmousemove = function(){ //区域内，鼠标移动操作，随机改变颜色
var ye=[0,,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f'] //定义数组，保存十六进制
var str = '#'; //定义字符串str，用来设置颜色，此处定义颜色开头的‘#’
var j = 0
for(var i = 0;i<6;i++){ // 循环6次，将字符串str补充完整
j = parseInt(Math.random()*16) // j为[0,15]之间的随机一个整数
str += ye[j] //根据获取的j来往str中追加
}
box.style.background = str console.log(str) //改变区域颜色
}
}
</script>
4.运行效果
a.鼠标在区域内
鼠标在区域内b.鼠标移出区域
鼠标移出区域
网友评论